如果不用iframe的调用方式,layer中如何实现点击一张图片,然后弹出ckplayer视频播放器

已采纳
9 708
CKplayer是一款视频播放器,简单的实现代码如下:
<div id="ivideo"></div>
<script type="text/javascript" src="http://localhost/ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
f:'http://localhost/ckplayer/video.flv',
c:0,
i:'http://localhost/ckplayer/image_before_play.png',
v:100,
e:1,
h:4
};
var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
CKobject.embedSWF('http://localhost/ckplayer/ckplayer.swf','ivideo','ckplayer_ivideo','1250','703',flashvars,params);
</script>
ckplaye的使用也非常简单,一个div标签+一个ckplayer.js,再加上相应的JS参数就可以了。

但是如果不使用Iframe引入页面(页面上放CKPLAYER代码)的方式,有什么方式实现:点击页面上一张图片,然后弹出ckplayer视频播放器呢?
也就是说layer的代码和ckplayer的代码同样放在当前页面中。

请教大家,能否就上面的代码出个完整的示例呢?
  • 洋溢的蓝莓 洋溢的蓝莓 VIP1
    2016-07-07 16:00:40
    @黄焯华
    http://layer.layui.com/api.html#content
    官方说得很清楚了,其他不懂的先查查文档。
    0 回复
  • 贤心 贤心 (管理员)
    2016-07-03 18:34:36
    $('#图片id').on('click', function(){
    layer.open({
    type: 1
    ,content: $('#ivideo')
    });
    });
    0 回复
  • 黄焯华 黄焯华
    2016-07-03 22:40:57
    @贤心 我试试看
    0 回复
  • 黄焯华 黄焯华
    2016-07-03 22:54:33
    @贤心 能否就上面的代码出个完整示例呢?我这边不太理解你的意思,div、ckplaey.js和它的script应该怎么样处理呢?
    0 回复
  • 洋溢的蓝莓 洋溢的蓝莓 VIP1
    2016-07-04 10:09:20
    在你的demo基础上引入jQ,layer,放上一张图片,环境就齐了。
    <img id="图片id" ...>
    <div id="video"></div>
    <script src="#引入jQ"> </script>
    <script src="#引入layer"> </script>
    <script src="#引入ckplayer"> </script>
    <script>#播放器js</script>
    <script>#layer code</script>
    0 回复
  • 黄焯华 黄焯华
    2016-07-05 22:41:45
    @洋溢的蓝莓 不行哦,这样的话,layer code里怎么写调用的内容呢?<div id="ivideo"></div>这个是不是先要隐藏呢?不然还没有弹出层,播放器就已经出现在页面下方了。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <div id="images"><img src="2014.jpg"> </div>
    <div id="ivideo"></div>
    <script type="text/javascript" src="http://localhost/phpstorm/skin/default/js/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://localhost/phpstorm/layer/layer.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://localhost/phpstorm/ckplayer/ckplayer.js" charset="utf-8"></script>
    <script>
    var flashvars={
    f:'http://localhost/phpstorm/ckplayer/2.flv',
    c:0,
    i:'http://localhost/phpstorm/d/file/alphafeed_mini.png',
    v:100,
    e:1,
    h:4
    };
    var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
    CKobject.embedSWF('http://localhost/phpstorm/ckplayer/ckplayer.swf','ivideo','ckplayer_ivideo','1250','703',flashvars,params);
    </script>
    <script>
    $('#images').on('click', function(){
    layer.open({
    type: 1, //page层
    area: ['1066px', '600px'],
    title: false,
    shade: 0.6, //遮罩透明度
    moveType: 1, //拖拽风格,0是默认,1是传统拖动
    shift: -1, //0-6的动画形式,-1不开启
    content: '这里要怎么写呢?'
    });
    });
    </script>
    </body>
    </html>
    0 回复
  • 洋溢的蓝莓 洋溢的蓝莓 VIP1
    2016-07-06 11:20:38
    @黄焯华 [衰] 开始隐藏这个需要特别说明吗
    0 回复
  • 黄焯华 黄焯华
    2016-07-06 15:38:32
    @洋溢的蓝莓 因为我刚接触这一块,不是很清楚。这个隐藏是在CSS中写吗?然后还有一个问题,请问lay JS的content: '这里要怎么写呢?' 要怎么写呢?
    0 回复
  • 洋溢的蓝莓 洋溢的蓝莓 VIP1
    2016-07-07 16:02:00
    开始隐藏你可以写在css里面,也可以写在style里面。
    0 回复
最近热帖
最近你们访问官网或社区,有出现样式无法加载的现象吗? 937
如何评价LayUI和他的作者闲心? 794
关于LayUi upload模块跨域问题 534
layui2.0这个月底可以出来吗 473
2.0何时出现哇 457
table选项功能就是出不来,样式都能政策银行显示。 283
layer.msg is not a function 245
请问下,layer我看完了文档,也不知道里面的内容怎么自定义编译呢??? 244
layer终极疑难杂症。。感觉这问题无解了。。 230
html5+CSS3+layui开发的前台网站模板 227
近期热议
最近你们访问官网或社区,有出现样式无法加载的现象吗? 26
请问下,layer我看完了文档,也不知道里面的内容怎么自定义编译呢??? 16
layer.msg is not a function 13
layer终极疑难杂症。。感觉这问题无解了。。 13
layui弹出层没反应 12
模态窗口用ajax 获取分页面,一直报404 12
pePrefilter is not defined? 10
table选项功能就是出不来,样式都能政策银行显示。 10
求教一个兼容问题,iframe界面自适应高度 9
layui.css!checkbox和radio,没有样式。下面有问题的图。麻烦看一下。这都是最基本 9