采用video.js插件!
<link href="./video-js.css" rel="stylesheet">
<script src="./video.js"></script>
<script src="./videojs-contrib-hls.min.js"></script>
<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>
// 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();
})
}