video组件相关

[AlexZ33]

video.js

video.js 播放 rtsp、hls

HLS

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

RTSP

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

RTMP

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

[AlexZ33]

安装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?!');
                });
            });
        }
    }
}

[AlexZ33]

• surmon-china/vue-video-player

[AlexZ33]

video.js--很赞的H5视频播放库 video.js使用技巧

[AlexZ33]

support m3u8

streamroot/videojs-hlsjs-plugin 注意：HLS 在 PC 端仅支持safari浏览器，类似chrome浏览器使用HTML5 video标签无法播放 m3u8 格式，可直接采用网上一些比较成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

[AlexZ33]

I found two of the most powerful hls library for video js

1.videojs-http-streaming

This library has been generated from videojs-contrib-hls Based on the following description

Notice: this project will be deprecated and is succeeded by videojs-http-streaming. VHS supports HLS and DASH and is built into video.js 7, see the video.js 7 blog post

The short description of videojs-http-streaming library is as follows

Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not natively supported. Included in video.js 7 by default!.

Github link: https://github.com/yanwsh/videojs-panorama

2.videojs-hlsjs-plugin

The short description of this library is as follows

Adds HLS playback support to video.js 5.0+ using hls.js library.

The library's strength in using it from the hls.js library

videojs-hlsjs-plugin github link : https://github.com/streamroot/videojs-hlsjs-plugin

hls.js github link : https://github.com/video-dev/hls.js/

conclusion

I used projects from both of these libraries and my experience in using them is that videojs-hlsjs-plugin library is due to using a powerful hls.js library can be a great option for large projects.