為什么要使用video.js惯退？
PC端瀏覽器并不支持video直接播放m3u8格式的視頻
手機(jī)端各式各樣的瀏覽器定制的video界面風(fēng)格不統(tǒng)一链瓦，直接寫原生的js控制視頻兼容性較差
video.js解決以上兩個(gè)問(wèn)題闻妓，還可以有各種視頻狀態(tài)接口暴露然爆，優(yōu)化體驗(yàn)
<!DOCTYPE html>
<html>
<head>
<title>videojs支持hls直播實(shí)例</title>
<link href="./video.css?v=bcd2ce1385" rel="stylesheet">
</head>
<body>
<video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
<source src="/chat/playlist.m3u8" type="application/x-mpegURL">
</video>
<script src="./video.js?v=fc5104a2ab23"></script>
<script src="./videojs-contrib-hls.js?v=c726b94b9923"></script>
<script type="text/javascript">
var myPlayer = videojs('roomVideo',{
bigPlayButton : false,
textTrackDisplay : false,
posterImage: true,
errorDisplay : false,
controlBar : false
},function(){
console.log(this)
this.on('loadedmetadata',function(){
console.log('loadedmetadata');
//加載到元數(shù)據(jù)后開(kāi)始播放視頻
startVideo();
})
this.on('ended',function(){
console.log('ended')
})
this.on('firstplay',function(){
console.log('firstplay')
})
this.on('loadstart',function(){
//開(kāi)始加載
console.log('loadstart')
})
this.on('loadeddata',function(){
console.log('loadeddata')
})
this.on('seeking',function(){
//正在去拿視頻流的路上
console.log('seeking')
})
this.on('seeked',function(){
//已經(jīng)拿到視頻流,可以播放
console.log('seeked')
})
this.on('waiting',function(){
console.log('waiting')
})
this.on('pause',function(){
console.log('pause')
})
this.on('play',function(){
console.log('play')
})
});
var isVideoBreak;
function startVideo() {
myPlayer.play();
//微信內(nèi)全屏支持
document.getElementById('roomVideo').style.width = window.screen.width + "px";
document.getElementById('roomVideo').style.height = window.screen.height + "px";
//判斷開(kāi)始播放視頻次和，移除高斯模糊等待層
var isVideoPlaying = setInterval(function(){
var currentTime = myPlayer.currentTime();
if(currentTime > 0){
$('.vjs-poster').remove();
clearInterval(isVideoPlaying);
}
},200)
//判斷視頻是否卡住一姿，卡主3s重新load視頻
var lastTime = -1,
tryTimes = 0;
clearInterval(isVideoBreak);
isVideoBreak = setInterval(function(){
var currentTime = myPlayer.currentTime();
console.log('currentTime'+currentTime+'lastTime'+lastTime);
if(currentTime == lastTime){
//此時(shí)視頻已卡主3s
//設(shè)置當(dāng)前播放時(shí)間為超時(shí)時(shí)間包各，此時(shí)videojs會(huì)在play()后把currentTime設(shè)置為0
myPlayer.currentTime(currentTime+10000);
myPlayer.play();
//嘗試5次播放后摘仅，如仍未播放成功提示刷新
if(++tryTimes > 5){
alert('您的網(wǎng)速有點(diǎn)慢，刷新下試試');
tryTimes = 0;
}
}else{
lastTime = currentTime;
tryTimes = 0;
}
},3000)
}
</script>
</body>
</html>
源碼請(qǐng)移步github：
https://videojs.github.io/videojs-contrib-hls/#
視頻狀態(tài)分析：
EVENTS
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
轉(zhuǎn)載至video.js支持m3u8格式直播
