video.js 播放 rtsp、hls

什么是HLS,RTSP,RTMP

HLS（ HTTP Live Streaming）苹果公司提出的流媒体协议，直接把流媒体切片成一段段，信息保存到m3u列表文件中， 可以将不同速率的版本切成相应的片；播放器可以直接使用http协议请求流数据,可以在不同速率的版本间自由切换，实现无缝播放；省去使用其他协议的烦恼。缺点是延迟大小受切片大小影响，不适合直播，适合视频点播。

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

RTMP（Real Time Message Protocol） 有 Adobe 公司提出，用来解决多媒体数据传输流的多路复用（Multiplexing）和分包（packetizing）的问题， 优势在于低延迟，稳定性高，支持所有摄像头格式，浏览器加载 flash插件就可以直接播放。

安装video.js

    yarn add video.js videojs-flash //千万不要下载错了，下载前去npm上面搜索一番，选择下载量最高的
    //vue
    import Vue from "vue";
    import video from 'video.js';
    import 'videojs-flash'; // 引入videojs flash
    
    Vue.prototype.$video = video; // 将video.js 实例放在Vue原型上
复制代码

    <template>
    <div>
        <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
            <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks2" type="rtmp/flv">
        </video>
        <video id="example_video_2" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
        <source src="rtmp://video.zhiguaniot.com/test01/stream01?auth_key=1552979972-0-0-3502db2f66a4560c886f44c7f68e20d5" type="rtmp/flv">
        </video>
        <video id="example_video_3" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
        <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks2" type="rtmp/flv">
        </video>
        <video id="example_video_4" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
        <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks2" type="rtmp/flv">
        </video>
    </div>
</template>
复制代码

export default {
    name: 'video',
    data() {
        return {}
    },
    mounted() {
        this.playervideo('example_video_1');
        this.playervideo('example_video_2');
        this.playervideo('example_video_3');
        this.playervideo('example_video_4');
    },
    methods: {
        playervideo(id) {
            var player = this.$video(id, {}, function onPlayerReady() {
                this.play();
                this.on('ended', function() {
                    console.log('Awww...over so soon?!');
                });
            });
        }
    }
}

复制代码