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

复制代码

你可能感兴趣的:(video.js 播放 rtsp、hls)