video.js支持m3u8格式直播的实现示例
这篇文章主要介绍了video.js支持m3u8格式直播的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
为什么要使用video.js?
1. PC端浏览器并不支持video直接播放m3u8格式的视频
2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差
3. video.js解决以上两个问题,还可以有各种视频状态接口暴露,优化体验
核心代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <!DOCTYPE html> < html > < head > < title >videojs支持hls直播实例</ 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'); //加载到元数据后开始播放视频 startVideo(); }) this.on('ended',function(){ console.log('ended') }) this.on('firstplay',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('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(); //微信内全屏支持 document.getElementById('roomVideo').style.width = window.screen.width + "px"; document.getElementById('roomVideo').style.height = window.screen.height + "px"; //判断开始播放视频,移除高斯模糊等待层 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){ //此时视频已卡主3s //设置当前播放时间为超时时间,此时videojs会在play()后把currentTime设置为0 myPlayer.currentTime(currentTime+10000); myPlayer.play(); //尝试5次播放后,如仍未播放成功提示刷新 if(++tryTimes > 5){ alert('您的网速有点慢,刷新下试试'); tryTimes = 0; } }else{ lastTime = currentTime; tryTimes = 0; } },3000) } </ script > </ body > </ html > |
源码请移步github:
附:
一. 视频状态分析:
EVENTS
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
currentTime()可以用来发辅助判断视频播放情况
二. 视频加载优化:
通过不初始化video无用组件的方式,提高video加载速度
1 2 3 4 5 6 7 | 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 undefined
解决:
正确
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var myPlayer = videojs( 'roomVideo' ,{ bigPlayButton : false , textTrackDisplay : false , posterImage: false , errorDisplay : false , controlBar : { captionsButton : false , chaptersButton: false , subtitlesButton: false , liveDisplay: false , playbackRateMenuButton: false } }, function (){ console.log( this ) }); |
错误
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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格式直播的实现示例的文章就介绍到这了