video.js支持m3u8格式直播

为什么要使⽤video.js？

1. PC端浏览器并不⽀持video直接播放m3u8格式的视频

2. ⼿机端各式各样的浏览器定制的video界⾯风格不统⼀，直接写原⽣的js控制视频兼容性较差3. video.js解决以上两个问题，还可以有各种视频状态接⼝暴露，优化体验

核⼼代码：

源码请移步github：

附：

⼀.　　视频状态分析：

EVENTSdurationchangeendedfirstplay

fullscreenchangeloadedalldataloadeddata

loadedmetadataloadstartpauseplayprogressseekedseekingtimeupdatevolumechangewaiting

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 undefined解决：

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) });

正确

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) });

错误