筆者最近因爲在接手公司的流媒體系統業務, 涉及到直播和點播的功能, 一開始確實是抓耳撓腮, 看了網上很多帖子都不太靠譜, 而過去的很多帖子都過於老舊, 比如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
同時videojs官方在新版本中將核心庫和輔助庫已經剝離開來, 就跟react和react-dom, react-native關係一樣, 所以我們要播放rtmp流和hls流需要另外安裝它的兩個插件videojs-flash
和videojs-contrib-hls
1. 使用npm: npm install videojs-flash videojs-contrib-hls -S
2. 使用yarn: yarn add videojs-flash videojs-contrib-hls -S
我們打開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文件中
<template>
<div class='instance'>
<video id='#video' />
</div>
</template>
<script>
export default {
mounted() {
this.initVideoPlayer()
},
data() {
return {
// 要進行播放的rtmp地址
nowPlayVideoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1'
}
},
methods: {
// 初始化播放器方法
initVideoPlayer() {
// 第一個選中的要播放的video標籤, 記得是video標籤,
const currentInstance = this.$video(document.querySelector('#video'), {
autoplay: true, // 是否自動播放
controls: true, // 是否顯示控件
})
currentInstance.src({
src: this.nowPlayVideoUrl,
type: 'rtmp/flv', // 這個type值必寫, 告訴videojs這是一個rtmp流視頻
})
}
}
},
}
</script>
<style>
#video {
width: 300px;
height: 500px
}
</style>
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值
})
}
}
//...
至此應該就完成了rtmp或者hls的播放