ckplayer兼容显示chrome,firefox

ckplyer兼容chrome,firefox 显示m3u8格式

ckpley在不同的浏览器上显示m3u8格式的视频问题处理

<script src="{% static 'course/js/jquery.js' %}></script>
<script src="{% static 'course/js/hls.js' %}"></script>
<script src="{% static 'course/js/chplayer-master/chplayer/chplayer.js' %}?t=2"></script>
var videoObject_is_chrome = {
        container: '#video', //容器的ID,如果获到容器定义的是ID则需要增加#,如果是class,则不需要添加或添加.
         variable: 'player',//调用函数名称,该属性主要用于flashplayer发送监听内容时使用,如call('player.time',10)
         volume: 0.6, //默认音量,范围是0-1
         logo: get_loge || "cyberpeace",
         poster: video_poster, //封面图片地址
         autoplay: false, //是否自动播放,默认true=自动播放,false=默认暂停状态
         loop: false, //是否循环播放,默认false=不需要,true=需要
         live: false, //是否是直播,默认false=点播放,true=直播
         loaded: 'loadedHandler', //当播放器加载后执行的函数
         seek:0, //默认需要跳转的时间
         drag: 'start', //在flashplayer情况下是否需要支持按关键帧拖动,不需要留空,需要请填写拖动时请求的属性,本例中使用start,如果需要强制按时间点拖动则增加前缀time_,本例中即time_start,如果需要强制按关键帧进行拖动,则前缀是frames_,本例中即:frames_start
         flashplayer: false,//强制使用flashplayer
         html5m3u8: false,//是否使用hls,默认不选择,如果此属性设置成true,则不能设置flashplayer:true,
         preview: {
             src: [video_preview], //视频首页预览图 可以任意一个图片地址
             scale: video_scale   //ts流比例 可以填1
         },//预览图片地址数组,src=图片地址数组,scale=图片截取时间间隔,单位:秒
         video: [
             {
                 definition: '高清',
                 list: [
                     {
                         url: video_change, // m3u8 的地址路径
                         type: 'video/m3u8',
                         weight: 10,
                     },
                 ]
             },
         ]
     };
     var videoObject_not_chorme = {
         container: '#video',//“#”代表容器的ID,“.”或“”代表容器的class
         variable: 'player',//该属性必需设置,值等于下面的new chplayer()的对象
         autoplay: true,
         html5m3u8: true,
         video: video_change //视频地址
     };
     var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;  //不同的浏览器显示方式不一样, 不是chrome的浏览器需要使用hls.js这个文件
     if (isChrome) {
         var videoObject = videoObject_is_chrome;
     } else {
         var videoObject = videoObject_not_chorme;
     }
     $.extend(true, globalvideoObject, videoObject);
     window.player = new chplayer(videoObject);//创建一个播放器函数并附给player变量,(player需要和 var videoObject里的属性variable相同)
}

附件下载: hls.js, chplayer.js

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值