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

前言

效果

效果地址
m3u8视频切换
效果图片

解决方法

采用video.js插件！

引入

引入videoJS插件样式文件；
引入videoJS插件JS文件；
引入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();
    })
}