layui.open使用例子播放m3u8视频

最新推荐文章于 2024-10-10 07:34:11 发布

@Winner

最新推荐文章于 2024-10-10 07:34:11 发布

阅读量2.6k

点赞数 1

分类专栏： layui

本文链接：https://blog.csdn.net/zxh7770/article/details/117090017

版权

layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

阐述：

最近项目需求，使用弹窗播放m3u8视频，本例子中使用了layui.open弹窗方式。

代码例子如下：

语法

layer.open(options)

layer.open 根据type不同，类型也就不一样,有五种类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
其实工作开发中用的最多的就是1、2这两种类型了，这里就只介绍这两种，其他的可以参考官网例子。

页面层(type:1) ：弹出层展示的是某个定义好的页面元素

layer.open({
    type: 1 //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加                    
              载层）4（tips层）,
    title: 'title here',   //标题
    area: ['390px', '330px'],   //宽高
    shade: 0.4,   //遮罩透明度
    content: $("#test"),//支持获取DOM元素
    btn: ['确定', '取消'], //按钮组
    scrollbar: false ,//屏蔽浏览器滚动条
    yes: function(index){//layer.msg('yes');    //点击确定回调
        layer.close(index);
        showToast();
    },
    btn2: function(){//layer.alert('aaa',{title:'msg title'});  点击取消回调
        layer.msg('bbb');//layer.closeAll();
    }
});

iframe层(type:2) ：弹出层直接调用其他地方的页面

layer.open({
	  type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
	  shade:0.1, //遮罩层透明度
	  area:['850px','500px'], //弹出层宽高
	  title:'材料库',//弹出层标题
	  content: 'xx/xx.jsp' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
	});

播放m3u8视频例子

 <!-- 引用m3u8视频插件 -->
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
    <script src="http://unpkg.com/videojs-contrib-media-sources@4.4.4/dist/videojs-contrib-media-sources.min.js"></script>
    <script src="./js/videojs/videojs-contrib-hlsjs.min.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/agInte.css">

js部分

${PointList[i].VideoSource} 视频地址

 var video_str = `
<div class="myVideo1">
    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
      <source id="source" src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"/>
    </video>
  </div>
    `
layer.open({
   skin: 'yourclass',
     type: 1,
     closeBtn: 2,
     shadeClose: true,
     area: ['45%', '70%'],
     content: video_str,
     btn: ['播放', '取消'], //按钮组
     yes: function (index) {
         console.log('wdebug yes', index)
         var myVideo1 = document.getElementById('myVideo')
         console.log('wdebug yes2', myVideo1)
         // videojs 简单使用
         console.log(myVideo1)
         var myVideo = videojs(myVideo1,{
             bigPlayButton : true,
             textTrackDisplay : false,
             posterImage: false,
             errorDisplay : false,
         })
         myVideo.play() // 视频播放
         myVideo.pause() // 视频暂停
     }
 });

播放效果如下

在这里插入图片描述