为什么要使用video.js？
1. PC端浏览器并不支持video直接播放m3u8格式的视频
2. 手机端各式各样的浏览器定制的video界面风格不 统一 ，直接写原生的js控制视频兼容性较差
3. video.js解决以上两个问题，还可以有各种视频状态接口暴露，优化体验
核心代码：
<!DOCTY PE ht ML >
<html>
<head>
<t IT le>videojs支持hls直播实例</title>
<link hr ef="./video.css?v=bcd2ce1385" rel="stylesheet">
</head>
<body>
<video id="roomVideo" class="video-js vjs-default -s kin vjs- Big - play - center ed" x- webkit - airplay ="allow" poster="" webkit-playsinline playsinline x5-video- player -t ype="h5" x5-video-player-fullscreen="true" PR eload="auto">
<source src="/c hat /playlist.m3u8" type="application/x-mpegURL">
</video>
<script src="./video.js?v= fc 5104a2ab23"></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');
//加载到元数据后 开始 播放视频
startVideo();
})
this.on('ended',function(){
console.log('ended')
})
this.on(' First play',function(){
console.log('firstplay')
})
this.on('loadstart',function(){
//开始加载
console.log('loadstart')
})
this.on('loadeddata',function(){
console.log('loadeddata')
})
this.on('seeking',function(){
//正在去拿视频流的 路上
console.log('seeking')
})
this.on('seeked',function(){
//已经拿到视频流,可以播放
console.log('seeked')
})
this.on('w ai ting',function(){
console.log('waiting')
})
this.on('pause',function(){
console.log('pause')
})
this.on('play',function(){
console.log('play')
})
});
var isVideo br eak;
function startVideo() {
myPlayer.play();
//微信内全屏支持
document.getElementById('roomVideo').style.width = window.screen.width + "px";
document.getElementById('roomVideo').style.h ei ght = window.screen.height + "px";
//判断开始播放视频，移除高斯模糊等待层
var isVideoPlaying = setInterval(function(){
var current Time = 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){
//此时视频已卡主3s
//设置当前播放时间为超时时间，此时videojs会 在P lay()后把currentTime设置为0
myPlayer.currentTime(currentTime+10000);
myPlayer.play();
//尝试5次播放后，如仍未播放成功提示刷新
if(++tryTimes > 5){
alert('您的 网速 有点慢，刷新下试试');
tryTimes = 0;
}
}else{
lastTime = currentTime;
tryTimes = 0;
}
},3000)
}
</script>
</body>
</html>
源 码请移步gith ub ：
videojs支持hls直播实例
附：
一. 视频状态分析：
EVENTS
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
currentTime()可以用来发辅助判断视频播放情况
二. 视频加载优化：
通过不初始化video无用组件的方式， 提高 video加载速度
var myPlayer = videojs('roomVideo',{
bigPlayButton : false,
textTrackDisplay : false,
posterImage: true,
errorDisplay : false,
controlBar : false
},function(){});
未 简化 之前：
简化后：
三. 你可能也会遇到的错误error
错误1：
{code: 4, message: "No compatible source was found for this media."}
解决：去掉 video标签 的data- SETUP ="{}"， 只保留js的初始配置
错误2：
video.js Uncaught TypeError: Cannot read property 'one' of un define d
解决：
正确
var myPlayer = videojs('roomVideo',{
bigPlayButton : false,
textTrackDisplay : false,
posterImage: false,
errorDisplay : false,
controlBar : {
captionsButton : false,
chaptersButton: false,
su BT itlesButton:false,
liveDisplay:false,
playbackRateMenuButton:false
}
},function(){
console.log(this)
});
错误
var myPlayer = videojs('roomVideo',{
children : {
bigPlayButton : false,
textTrackDisplay : false,
posterImage: false,
errorDisplay : false,
controlBar : {
captionsButton : false,
chaptersButton: false,
subtitlesButton:false,
liveDisplay:false,
playbackRateMenuButton:false
}
}
},function(){
console.log(this)
});
到此这篇关于video.js支持m3u8格式直播的实现示例的 文章 就介绍到这了,更多相关video.js支持m3u8内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 video.js支持m3u8格式直播的实现示例 全部内容，希望文章能够帮你解决 video.js支持m3u8格式直播的实现示例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于video.js支持m3u8格式直播的实现示例的详细内容...