项目经验和踩坑 - Vue中使用videojs做rtmp和hls直播流

笔者最近因为在接手公司的流媒体系统业务, 涉及到直播和点播的功能, 一开始确实是抓耳挠腮, 看了网上很多帖子都不太靠谱, 而过去的很多帖子都过于老旧, 比如videojs都更新了7.7.5版本了, 而很多blog还在用5的版本, 在阅读了一段时间的官方文档以后, 对在Vue中使用videojs也有了一定的理解, 现在分享出来, 希望可以帮助到大家
 videojs官网: https://videojs.com/getting-started

这里只考虑videojs6版本以上的写法, 因为我看5版本有的博主已经写得很好了, 现在目前主流的直播都是使用的rtmp视频流或者hls视频流, 两种视频流各有优势, 看公司需求, 所以笔者会写写在Vue中如何通过videojs播放这两种视频流

 

环境

1. vue: "2.6.11"
2. @vue/cli: "4.2.3"

要想使用videojs我们势必是需要安装videojs的, 而且在生产环境中我们也需要依赖它, 所以如下

1. 使用npm:  npm install video.js -S

2. 使用yarn: yarn add video.js -S

 笔者这里的videojs目前版本: 7.7.5

我们打开Vue工程中的主入口main.js进行引入

// src/main.js => 主入口文件

import Vue from 'vue';
...

// 引入videojs
import Video from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = video; // 在原型上注册以便在任何地方都可以使用

rtmp

准备工作都干完以后, 首先是播放rtmp流

同样我们需要在主入口文件main.js中引入

// src/main.js => 主入口文件

import Vue from 'vue';
...

// 引入videojs
import Video from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = video; 
import 'videojs-flash'; // 要播放rtmp流, 就必须引入这哥们

// 笔者这里随意新建一个.vue文件, 你可以找到需要用到videojs的vue文件中

hls

有了上面的积累, hls视频就更加的简单了, 我们一样要在主入口main.js中引入hls

// src/main.js => 主入口文件

import Vue from 'vue';
...

// 引入videojs
import Video from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = video; 
import 'videojs-flash'; // 要播放rtmp流, 就必须引入这哥们
import hls from 'videojs-contrib-hls';
Vue.use(hls); // 要播放hls流, 这哥们就要上场

而在Vue文件中其他东西都可以不用修改, 而只用修改src和type属性就好

// ...跟之前一样
data() {
    return {
        // 要播放的hls流
         nowPlayVideoUrl: 'http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8'
    }
},

methods: {
     initVideoPlayer() {
        //...跟之前一样
           currentInstance.src({
                src: this.nowPlayVideoUrl,
                type: 'application/x-mpegURL', // 修改这个type值
            })
        }
}

//...

转自：
版权声明：本文为CSDN博主「Pride_Glory(大艺术家付宏)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44238796/article/details/105808404

如有侵权通知就删。