两种实时视频对接的简单实现案例

m3u8视频流对接，使用video.js

<!-- 引入相关资源 -->
<link rel="stylesheet" href="video-js.min.css">
<script src="video.min.js"></script>
<script src="videojs-contrib-hls.js"></script>

<!-- dom结构 -->
<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>

var myVideo = videojs('myVideo', {
  "poster": "",
  "controls": "true"
}, function () {
  this.on('play', function () {
    console.log('正在播放');
  });
  //暂停--播放完毕后也会暂停
  this.on('pause', function () {
    console.log("暂停中")
  });
  // 结束
  this.on('ended', function () {
    console.log('结束');
  })

})
myVideo.play();

flv视频对接

<!-- 引入相关资源 -->
<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>

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

插件的更进一步使用请看官方文档。