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

已采纳
9 440
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的代码同样放在当前页面中。

请教大家,能否就上面的代码出个完整的示例呢?

热忱回答9

  • 洋溢的蓝莓 洋溢的蓝莓 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 回复

最近热帖

  1. layui 分页如何自己用JS 跳转到指定页? 7008
  2. 建议。layer相册,不能实时增加图片。 4046
  3. 近期服务器遭受不明来源的持续攻击 1647
  4. layui的form组件的响应数据怎么获取 1563
  5. 为什么社区里搜索后跳转到必应? 1471
  6. .Net WebCMS后台管理系统 1377
  7. layui 社区2016年度十佳案例 1353
  8. 蓝狐宝社区,一个成长中的社区 412
  9. 分享自己的一点劳动成果 389
  10. ifram 父页面的 【确定】按钮触发页面的form验证 357
layim下载

近期热议

  1. layui能否支持 select2.的功能 27
  2. 近期服务器遭受不明来源的持续攻击 24
  3. .Net WebCMS后台管理系统 21
  4. 表单开关按钮放在模态框内就不显示了,怎么办,急! 15
  5. layer如何获取 拖动后的坐标位置 offset left和to'p 13
  6. 分享自己的一点劳动成果 11
  7. layui 社区2016年度十佳案例 11
  8. 关于layui树形菜单当前元素高亮的问题 10
  9. 关于lauyi单选框的问题 9
  10. 贤心是一个人吗?男的还是女的。。。 9