什么是HLS,RTSP,RTMP

HLS 协议：基于HTTP协议的流直播（wikipedia）。苹果推出的解决方案，将视频分成 5-10 秒的视频小分片，然后用 m3u8 索引表进行管理。由于客户端下载到的视频都是 5-10 秒的完整数据，故视频的流畅性很好，但也同样引入了很大的延迟（HLS 的一般延迟在 10-30s 左右）。相比于 FLV， HLS 在iPhone 和大部分 Android 手机浏览器上的支持非常给力，所以常用于 QQ 和微信朋友圈的 URL 分享。

RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的，基于文本的多媒体播放控制协议. RTSP定义流格式，流数据经由RTP传输；RTSP实时效果非常好，适合视频聊天，视频监控等方向。

RTMP 实时消息传输协议，由Adobe公司研发，但当前还没有收入国际标准（wikipedia）。协议比较全能，既可以用来推送又可以用来直播，其核心理念是将大块的视频帧和音频帧“剁碎”，然后以小数据包的形式在互联网上进行传输，且支持加密，因此隐私性相对比较理想，但拆包组包的过程比较复杂，所以在海量并发时容易出现一些不可预期的稳定性问题。

百度一遍，RTMP播放，一堆资料，也有基于video.js封装的vue-video-player组件，这两者我都尝试了，很尴尬的是，引入原生video.js成功了，但是使用vue-video-player却失败了,所以还是不要用vue-video-player这个组件，这个组件已经很久没维护，还是用video.js吧！

在引入的时候要注意 video.js 的版本，6.0以上的版本有可能会出现问题，如果不行的话建议切换 5.6.0 版本，我这里安装的还有flash插件：

"video.js": "5.6.0",
"videojs-flash": "^2.2.0",
"videojs-swf": "^5.4.2",

简单封装

<template>
  <video :id="'player'+id" class="video-js" preload="auto" style="width: 100%;height: 100%;" controls muted data-setup='{"html5" : { "nativeTextTracks" : false }}'>
    <source :src="videoSrc" type="rtmp/flv">
  </video>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-flash';
import SWF_URL from 'videojs-swf/dist/video-js.swf';
videojs.options.flash.swf = SWF_URL;
export default {
  name: 'video-player',
  props: {
    id: {
      type: [String, Number]
    }
  },
  data() {
    return {
      player: null,
      videoSrc: null
    };
  },
  mounted() {
    this.player = videojs('player' + this.id);
  },
  methods: {
    changeVideo(source) {
      this.player = videojs('player' + this.id);
      this.videoSrc = source;
      this.player.src({
        src: this.videoSrc,
        type: 'rtmp/flv'
      });
      this.player.play();
    }
  },
  beforeDestroy: function() {
    this.player.dispose();
  }
};
</script>
<style lang="scss">
.video-js .vjs-big-play-button {
  display: none;
}
</style>

这里我做了一个初始化的设置，并且传id给每一个播放器。changeVideo这个接父组件传来的src，来动态的切换视频。一定要记得在beforeDestroy时把组件进行销毁！

这里，还需要对webpack做一个处理，因为里面引入了swf文件，我这里用的是cli3搭建的，vue.config.js配置如下：

configureWebpack: config => {
    config.module.rules.push({
        test: /\.swf$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 1024,
                name: 'file/[path][name].[hash:7].[ext]'
            }
        }]
    })
},

webpack.base.js配置如下：

module: {
  rules: [
    {
      test: /\.swf$/,
      loader: 'url-loader',
      options: {
        limit: 1024,
        name: 'file/[path][name].[hash7].[ext]'
      }
    }
  ]
}

总结

最后总结一下，RTMP播放质量高效果好，可以说是当下最值得应用的监控视频接入技术了，当然了，需要flash也确实要考虑进来，这个接入方案在未来估计也会逐渐的降温，然后是hls方案，这个对移动端的适配挺好，安卓和苹果的浏览器都提供了原生支持，所以移动端开发应该优先考虑这个方案，唯一的缺点就是延迟比较大，但是以后5G普及之后，这应该就不是什么缺点了！

放一张效果图：

另外，用HLS格式，做了一个电视点播：http://tv.wangdaodao.com/，基本上满足了视频点播的需求。