解决video标签播放m3u8格式视频失败问题

前言

什么是m3u8？

效果

1. 效果地址
   m3u8视频切换
2. 效果图片
   

解决方法

采用video.js插件！

引入

1. 引入videoJS插件样式文件；
2. 引入videoJS插件JS文件；
3. 引入videoJS插件播放m3u8格式视频的HLS功能。

<link href="./video-js.css" rel="stylesheet">
<script src="./video.js"></script>
<script src="./videojs-contrib-hls.min.js"></script>

HTML代码

<button onclick="changeVideo('http://hls.open.ys7.com/openlive/84b99bd79f85495f84965022a7a345fc.m3u8')">视频一</button>
<button onclick="changeVideo('http://alhlsgw.lechange.com:9001/LCO/3H06397PAF00873/0/1/20180514185906/dev_20180514185906_sft2z5tlrz957s0t.m3u8')">视频二</button>
<div id="videobox">
    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="300" height="250">
        <source id="source" src="http://hls.open.ys7.com/openlive/84b99bd79f85495f84965022a7a345fc.m3u8" type="application/x-mpegURL">
    </video>
</div>

JS代码

// videojs 简单使用
videojs('myVideo', {
    bigPlayButton: true,
    textTrackDisplay: false,
    posterImage: false,
    errorDisplay: false
})
function changeVideo(url){
    var player = videojs('myVideo');
    player.pause();
    player.dispose();
    document.getElementById('videobox').innerHTML = '';
    var str2 = `<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="300" height="250">
        <source id="source" src="${url}" type="application/x-mpegURL">
    </video>`;
    document.getElementById('videobox').innerHTML = str2;

    videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false
    },function(){
        this.play();
    })
}

注意

1. videoJS的初始化很容易第一步实现；
2. 由于实现videoJS的视频切换，不能等同于常规的mp4等格式视频，直接切换地址，而是需要在点击切换的时候进行销毁原来的videoJS；
3. 重新添加一个video标签，对其赋值视频路径；
4. 添加到页面后进行再次初始化！

其他

QQ交流群: 264303060

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表