为什么要使用video.js？
1. pc端浏览器并不支持video直接播放m3u8格式的视频
2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差
3. video.js解决以上两个问题，还可以有各种视频状态接口暴露，优化体验
核心代码：
<!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"></s人口与计划生育法修正案cript> <script type="text/javascript"> var myplayer = videojs('roomvideo',{ bigplaybutton : fal, texttrackdisplay : fal, posterimage: true, errordisplay : fal, controlbar : fal },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('eking',function(){ //正在去拿视频流的路上 console.log('eking') }) this.on('eked',function(){ //已经拿到视频流,可以播放 console.log('eked') }) this.on('waiting',function(){ console.log('waiting') }) this.on('pau',function(){ console.log('pau') }) 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 = tinterval(function(){ var currenttime = myplayer.currenttime(); if(cu调档线rrenttime > 0){ $('.vjs-poster').remove(); clearinterval(isvideoplaying); } },200) //判断视频是否卡住，卡主3s重新load视频 年度个人工作总结 var lasttime = -1, trytimes = 0; clearinterval(isvideobreak); isvideobreak = tinterval(f小时代小说在线阅读unction(){ 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; } }el{ lasttime = currenttime; trytimes = 0; } },3000) } </script></body></html>源码请移步github：
附：
一. 视频状态分析：
events
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pau
play
progress
eked
eking
timeupdate
volumechange
waiting
resize inherited
currenttime()可以用来发辅助判断视频播放情况
二. 视频加载优化：
通过不初始化video无用组件的方式，提高video加载速度
var myplayer = videojs('roomvideo',{ bigplaybutton : fal, texttrackdisplay : fal, posterimage: true, errordisplay : fal, controlbar : fal },function(){});未简化之前：
简化后：
三. 你可能也会遇到的错误error
错误1：
{code: 4, message: "no compatible source was found for this media."}
解决：去掉video标签的data-tup=”{}”， 只保留js的初始配置
错误2：
video.js uncaught typeerror: cannot read property ‘one’ of undefined
解决：
正确
var myplayer = videojs('roomvideo',{ bigplaybutton : fal, texttrackdisplay : fal, posterimage: fal, errordisplay : fal, controlbar : { captionsbutton : fal, chaptersbutton: fal, subtitlesbutton:fal, livedisplay:fal, play小孩智商多少正常backratemenubutton:fal } },function(){ console.log(this) });错误
var myplayer = videojs('roomvideo',{ children : { bigplaybutton : fal, texttrackdisplay : fal, posterimage: fal, errordisplay : fal, controlbar : { captionsbutton : fal, chaptersbutton: fal, subtitlesbutton:fal, livedisplay:fal, playbackratemenubutton:fal } } },function(){ console.log(this) });到此这篇关于video.js支持m3u8格式直播的实现示例的文章就介绍到这了,更多相关video.js支持m3u8内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-07 11:02:10，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/628f45e3de8876d9fe1d4e165899ce03.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：video.js支持m3u8格式直播的实现示例.doc
本文 PDF 下载地址：video.js支持m3u8格式直播的实现示例.pdf
| 留言与评论（共有 0 条评论） |
