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

已采纳
9 1781
黄焯华
黄焯华 2016-07-03
悬赏:5飞吻
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的代码同样放在当前页面中。

请教大家,能否就上面的代码出个完整的示例呢?
  • @黄焯华
    http://layer.layui.com/api.html#content
    官方说得很清楚了,其他不懂的先查查文档。
    0 回复
  • 贤心
    贤心 (管理员)
    2016-07-03
    $('#图片id').on('click', function(){
    layer.open({
    type: 1
    ,content: $('#ivideo')
    });
    });
    0 回复
  • 黄焯华
    2016-07-03
    @贤心 我试试看
    0 回复
  • 黄焯华
    2016-07-03
    @贤心 能否就上面的代码出个完整示例呢?我这边不太理解你的意思,div、ckplaey.js和它的script应该怎么样处理呢?
    0 回复
  • 在你的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
    @洋溢的蓝莓 不行哦,这样的话,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 回复
  • @黄焯华 [衰] 开始隐藏这个需要特别说明吗
    0 回复
  • 黄焯华
    2016-07-06
    @洋溢的蓝莓 因为我刚接触这一块,不是很清楚。这个隐藏是在CSS中写吗?然后还有一个问题,请问lay JS的content: '这里要怎么写呢?' 要怎么写呢?
    0 回复
  • 开始隐藏你可以写在css里面,也可以写在style里面。
    0 回复
近期热议
layui 官网累计下载量突破 200000 72
(已结束)LayIM 3.x 标准版盛情巨惠,以最低门槛 加入 LayIM 会员群 57
很好奇社区里使用layui的程序员里面是前端的多还是后端的多 27
如果不能实现,请不要轻易允诺 23
字体图标是不是有点少了 16
php多久能学会 15
建议LayUI永久免费,不要发布收费版本 15
按照社区的模版用了一周时间,仿照了个系统,献丑了,晒晒哈 14
关于动态TABLE 12
贤心你好,请教几个技术问题? 11
layui

微信扫码关注 layui 公众号