首页 LayUI/Layer layui引入视频播放器,可支持mp4,flv等格式

layui引入视频播放器,可支持mp4,flv等格式

作者:胡同里的砖头 围观群众:303 更新于:2021-10-18

内嵌式:
//需要下载ckplayer插件包,可以官网的三方库进行下载
<div class="video" id="video" data-url="<?php echo $show['url'] ?>" style="width: 100%;"></div>


<script type="text/javascript">
layui.config({
base: 'layui/'
}).extend({
ckplayer: 'ckplayer/ckplayer'
}).use(['jquery', 'ckplayer'], function() {
var $ = layui.$,
ckplayer = layui.ckplayer;
var vUrl = $('#video').data('url'),
videoObject = {
container: '#video',
loop: true,
autoplay: true,
video: [
[vUrl, 'video/mp4']
]
};
var player = new ckplayer(videoObject);
});
</script>


//按钮点击弹窗式
$("#mtvshow").click(function(){
var mtv=$(this).attr("title");
//iframe层-多媒体
layer.open({
type: 1,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: '<video controls="true" width="630px" height="360px" preload="none" controls=true><source src="'+ mtv +'" type="video/mp4" /></video >'
});
return false;
})

  • 本文标题: layui引入视频播放器,可支持mp4,flv等格式
  • 文章分类:【LayUI/Layer】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
留言评论
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © huzlblog.com All Rights Reserved. 备案号:苏ICP备2021056683号-8