M3u8 video stream docking, using video.js

<! -- Introduce related resources -->
<link rel="stylesheet" href="video-js.min.css">
<script src="video.min.js"></script>
<script src="videojs-contrib-hls.js"></script>

<! -- dom structure -->
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup="{}">
  <source id="source" src="http://path/to/1.m3u8" type="application/x-mpegURL">
</video>
Copy the code
var myVideo = videojs('myVideo', {
  "poster": ""."controls": "true"
}, function () {
  this.on('play'.function () {
    console.log('Playing');
  });
  // Pause -- pauses after playing
  this.on('pause'.function () {
    console.log("Suspended")});/ / end
  this.on('ended'.function () {
    console.log('the end');
  })

})
myVideo.play();
Copy the code

FLV video connection

<! -- Introduce related resources -->
<script src="flv.min.js"></script>

<video name="videoElement" class="centeredVideo"  width="100%" height="100%" controls autoplay>
    Your browser is too old which doesn't support HTML5 video.
</video>
Copy the code
var mediaDataSource = {
	type : 'flv'
};
mediaDataSource["isLive"] = true;
mediaDataSource["hasAudio"] = false;
mediaDataSource['url'] = 'demo.flv';
var element = document.getElementsByName('videoElement') [0];
player = flvjs.createPlayer(mediaDataSource, {
	enableWorker : false.lazyLoadMaxDuration : 3 * 60.seekType : 'range'}); player.attachMediaElement(element); player.load(); player.play();Copy the code

See the official documentation for further use of plug-ins.