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

已采纳
9 572
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 回复
最近热帖
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 1453
一个为您省时省力的后台模板jqadmin 1107
meTools - 基于layui+vue的在线工具网站 977
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 926
你的案例或技术分享,将会被置顶推荐 863
LayuiHelp,一个良心插件,为你的代码插上翅膀! 767
LayUI SELECT 多级级联实现,理论上是无限级的 603
Admin-Template 后台模板(开发中...) 536
基于TP5加Layui的轻社区系统,争取下个月上线 307
为什么设计项目最初要为数据设计身份指纹(唯一标号)? 260
近期热议
一个为您省时省力的后台模板jqadmin 24
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 20
LayuiHelp,一个良心插件,为你的代码插上翅膀! 17
layer的使用,以前用的时候还没挺好的怎么现在layer的弹出框一直报错,求大神给指点一下 15
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 15
form表单提交,监听提交按钮,用ajax异步检测名称是否已存在,ajax 不执行! 14
layui点击左侧固定导航栏时,如何在右侧显示,而并不是打开新窗口呢 12
关于layer弹出层搜索刷新当也问题 12
遮罩通过parent 可以全屏,但窗口不能传值了? 12
为什么layui分页只有一页的情况下不无法显示组件呢? 11