Video.js Support m3u8 Format live

Why use Video.js?

1. PC-side browser does not support video direct playback of m3u8 format videos

2. Mobile phone end of a variety of browser-customized video interface style is not unified, direct write native JS control videos Poor compatibility

3. Video.js solve the above two problems, but also can have a variety of video status interface exposure, optimize the experience

Core code:

<! DOCTYPE html>varMyplayer = Videojs (' Roomvideo '), {bigplaybutton:false, Texttrackdisplay:false, Posterimage:true, Errordisplay:false, ControlBar:false        },function() {Console.log ( This)             This. On (' Loadedmetadata ',function() {Console.log (' Loadedmetadata '); //start playing video after loading to meta dataStartvideo (); })             This. On (' ended ',function() {Console.log (' Ended ')            })             This. On (' Firstplay ',function() {Console.log (' Firstplay ')            })             This. On (' Loadstart ',function(){            //Start loadingConsole.log (' Loadstart ')            })             This. On (' Loadeddata ',function() {Console.log (' Loadeddata ')            })             This. On (' Seeking ',function(){            //I 'm on my way to get the video stream.Console.log (' Seeking ')            })             This. On (' seeked ',function(){            //already got the video stream and can playConsole.log (' seeked ')            })             This. On (' Waiting ',function() {Console.log (' Waiting ')            })             This. On (' Pause ',function() {Console.log (' Pause ')            })             This. On (' Play ',function() {Console.log (' Play ')            })        }); varIsvideobreak; functionStartvideo () {myplayer.play (); //in-screen supportdocument.getElementById (' Roomvideo '). Style.width = window.screen.width + "px"; document.getElementById (' Roomvideo '). Style.height = window.screen.height + "px"; //Judging starts playing video, removing Gaussian blur wait layer            varisvideoplaying = SetInterval (function(){                varCurrentTime =Myplayer.currenttime (); if(CurrentTime > 0){                    $('. Vjs-poster '). Remove ();                Clearinterval (isvideoplaying); }            },200)            //determine if the video is stuck, the card master 3s reload video            varLasttime =-1, Trytimes= 0;            Clearinterval (Isvideobreak); Isvideobreak= SetInterval (function(){                varCurrentTime =Myplayer.currenttime (); Console.log (' CurrentTime ' +currenttime+ ' lasttime ' +lasttime); if(CurrentTime = =lasttime) {                    //this time the video has been card master 3s                    //set the current playback time to a timeout, at which time Videojs will set the CurrentTime to 0 after play ()Myplayer.currenttime (currenttime+10000);                    Myplayer.play (); //after you try to play 5 times, if the success prompt refresh is still not playing                    if(++trytimes > 5) {alert (' Your Internet connection is a bit slow, refresh and try '); Trytimes= 0; }                }Else{lasttime=currenttime; Trytimes= 0; }            },3000)        }    </script></body>
SOURCE Please visit GitHub:
VIDEOJS Support HLS Live instance
Report:
I. Video STATUS Analysis:
Eventsdurationchangeendedfirstplayfullscreenchangeloadedalldataloadeddataloadedmetadataloadstartpauseplayprogressseekedse Ekingtimeupdatevolumechangewaitingresize inherited
CurrentTime () can be used to help determine the video playback situation

 
  
 
Two. Video Loading optimization:
Increase video load speed by not initializing video useless components
var myplayer = Videojs (' Roomvideo ', {            false            ,false,             true,            false,            false        },   function() {});
Before it is simplified:
After simplification:

 
  
 
Three. Error errors that you may also encounter
Error 1:
{code:4, message: "No compatible source is found for this media."}
Workaround: Remove the data-setup= "{}" from the video tag, leaving only the initial configuration of JS
Error 2:
Video.js uncaught Typeerror:cannot Read property ' one ' of undefined
Solve:
varMyplayer = 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)    });
correct
    varMyplayer = 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)    });
Error
Video.js Support m3u8 Format live