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

已采纳
9 964
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 回复
最近热帖
layui所在服务器近期连续遭受DDoS攻击 3628
用layui做管理后台的请进 753
有学生愿意接活干吗?做网站!价格不是很高但是经常有活干 513
layer offset只有left、top属性,只能以左、上做参照。是不是可以添加right、bo 163
搞好了,Fly Template2.0 服务端.net源码。 157
使用layer弹框在公司项目中,是否需要被官网授权 149
2.0版本说明时候发布啊? 148
富文本编辑器有点太简单了,富得出油~ 136
layer.msg();怎么关闭,yes;function(){}? 121
发现select的一个bug 116
近期热议
layui所在服务器近期连续遭受DDoS攻击 37
弹出层不能置顶!! 12
各位大神们早上好,小弟有一个问题。 10
求救关于layer.msg的问题 9
求助。。。循环绑定传值问题 9
【求助】layer弹层,type1,firefox,ie8—11,当元素display为none,无 7
layer弹框取值一直为空 6
layer.msg();怎么关闭,yes;function(){}? 6
求推荐一款支持部署SSL证书的云服务器 6
请问如何设置select的宽度? 6