浅析HTML5点播m3u8(hls)格式视频和flv.js播放flv视频流

一、HLS 文件视频介绍

　　这两年来越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。

　　查看演示：https://www.helloweba.net/demo/2018/hls/

　　项目地址：https://github.com/video-dev/hls.js

　　m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件，m3u8是由一系列的 ts 文件组成，一般一个ts文件大概5-10秒，这些ts文件通过一个.m3u8文件做索引。用户播放视频时，可随意拖动视频进度，会读取相应进度的ts文件继续观看视频，不必等到下载完整的视频。因此在播放m3u8的时候很少有卡顿的现象。

　　本文只做HLS点播讲解，与直播不同，点播是指视频文件已经在编辑好，随时可播放。

　　由于HLS是由Apple公司提出的，所以在iOS电脑或手机上，你可以直接使用Safari浏览器的<video>播放m3u8格式视频文件。而其他浏览器则需要借助hls.js来兼容m3u8。

　　使用hls.js，不需要任何定制的播放器，只需要<video>元素就能播放m3u8

二、如何使用

1、加载js和播放元素

　　在需要放置视频的页面位置上加入video元素和hls.js文件。

<video id="video" controls width="100%"></video>
<script src="hls.js"></script>

2、调用hls.js

　　首先判断浏览器是否支持hls，如果支持就实例化new Hls()，加载m3u8源，然后播放。如果不支持hls，而支持苹果原生应用，则播放另一个m3u8源。

var video = document.getElementById('video');
  if(Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
    video.addEventListener('loadedmetadata',function() {
      video.play();
    });
  }

　　运行，试着用PC浏览器和手机访问，你会发现m3u8的播放很流畅

三、在Vue中使用hls.js

// 1、使用Vue框架的同学可以用npm先安装hls。
npm install --save hls.js

// 2、然后添加组件
<video ref="videoRef" width="400" controls></video>

// 3、最后挂载代码：
<script>
import Hls from 'hls.js'; 
export default {
    mounted: function() {
      var hls = new Hls();
      hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
      hls.attachMedia(this.$refs.videoRef);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        this.$refs.videoRef.play();
      });
    }
}
</script>

四、使用flv.js实现flv格式的监控视频流播放

1、flv.js常用方法

　　flvjs.isSupported()：判断当前浏览器是否支持播放

　　flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例

　　flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：将播放实例注册到video节点

　　flvPlayer.load()：加载视频

　　flvPlayer.play()：播放视频

　　flvPlayer.pause()：视频暂停

　　flvPlayer.unload()：去除视频加载

　　flvPlayer.detachMediaElement()：将播放实例从节点中取出

　　flvPlayer.destroy()：销毁播放实例

2、flv.js简单使用

// html
<video id="my-player" preload="auto" muted autoplay type="rtmp/flv">
    <source src="">
</video>

// 引入flv.js
<script src="./flv.js/flv.min.js"></script>

// 使用flv.js实现播放flv格式流
// 获取video节点
videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {
　　flvPlayer = flvjs.createPlayer({
　　　　type: 'flv',
　　　　isLive: true,
　　　　url: 'XXXX',//flv格式流地址
　　},{
　　　　enableWorker: false, //不启用分离线程
　　　　enableStashBuffer: false, //关闭IO隐藏缓冲区
　　　　reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
　　　　autoCleanupSourceBuffer: true //自动清除缓存
　　);
　　flvPlayer.attachMediaElement(videoElement);
　　flvPlayer.load(); //加载
　　flvPlayer.play();//播放
}

// 关闭视频流
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;

　　rtmp 视频流不支持的，可以转为 flv 视频流（http://1011.hlsplay.aodianyun.com/demo/game.flv）