文章目錄
-
- 一、安裝
- 二、引入videojs
- 三、在元件中測試并使用
-
- 1. `實作基本的自動播放`
- 2. `實作換台`&&倍速播放
- 四、踩坑小記
- 1. 視訊不能自動播放 或報錯 `DOMException: play() failed`
- 2. 換台的時候,url已經成功更改,但視訊還是之前的
- 3. 找不到mux.js子產品
- 五、 播放rtmp流
- 題外話
-
- html檔案内,直接引入videojs的js和css檔案,即可實作上述功能
注意
:
"vue": "^2.6.11",
"video.js": "^7.10.2",
"videojs-contrib-hls": "^5.15.0",
"mux.js": "^5.7.0"
一、安裝
yarn add video.js
yarn add videojs-contrib-hls // 這是播放hls流需要的插件
yarn add mux.js // 在vue項目中,若不安裝它可能報錯
二、引入videojs
- 在src檔案夾下建立 plugins檔案夾,并
;建立video.js檔案
video.js檔案的内容如下:
import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
import Vue from "vue";
Vue.use(hls);
- 在main.js中引入剛剛的video.js檔案
三、在元件中測試并使用
1. 實作基本的自動播放
實作基本的自動播放
Test.vue
檔案
<template>
<div class="test-videojs">
<video id="videoPlayer" class="video-js" muted></video>
</div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs
export default {
data() {
return {
// https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 是一段視訊,可将cctv1 (是live現場直播,不能快退)的替換為它,看到快進快退的效果
nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
};
},
mounted() {
this.initVideo(this.nowPlayVideoUrl);
},
methods: {
initVideo(nowPlayVideoUrl) {
// 這些options屬性也可直接設定在video标簽上,見 muted
let options = {
autoplay: true, // 設定自動播放
controls: true, // 顯示播放的控件
sources: [
// 注意,如果是以option方式設定的src,是不能實作 換台的 (即使監聽了nowPlayVideoUrl也沒實作)
{
src: nowPlayVideoUrl,
type: "application/x-mpegURL" // 告訴videojs,這是一個hls流
}
]
};
// videojs的第一個參數表示的是,文檔中video的id
const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
console.log("onPlayerReady 中的this指的是:", this); // 這裡的this是指Player,是由Videojs建立出來的執行個體
console.log(myPlyer === this); // 這裡傳回的是true
});
}
}
};
</script>
<style lang="scss">
#videoPlayer {
width: 500px;
height: 300px;
margin: 50px auto;
}
</style>
視訊播放效果如圖:
列印結果如圖:
2. 實作換台
&&倍速播放
實作換台
(2021-03-24更新 ,
playbackRates: [0.5, 1, 1.25, 1.5, 2, 3]
, 加上這個屬性,可實作倍速播放)
Test.vue
檔案
<template>
<div class="test-videojs">
<video id="videoPlayer" class="video-js"></video>
<el-button type="danger" @click="changeSource">切換到CCTV3</el-button>
</div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs
export default {
data() {
return {
nowPlayVideoUrl: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
options: {
autoplay: true, // 設定自動播放
muted: true, // 設定了它為true,才可實作自動播放,同時視訊也被靜音 (Chrome66及以上版本,禁止音視訊的自動播放)
preload: "auto", // 預加載
controls: true, // 顯示播放的控件
playbackRates: [0.5, 1, 1.25, 1.5, 2, 3] // 加上這個屬性,可實作倍速播放
},
player:null
};
},
mounted() {
this.getVideo(this.nowPlayVideoUrl);
},
methods: {
getVideo(nowPlayVideoUrl) {
this.player = Videojs("videoPlayer", this.options);
//關鍵代碼, 動态設定src,才可實作換台操作
this.player.src([
{
src: nowPlayVideoUrl,
type: "application/x-mpegURL" // 告訴videojs,這是一個hls流
}
]);
},
changeSource() {
this.nowPlayVideoUrl = "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8";
console.log(this.nowPlayVideoUrl, "改變了");
}
},
watch: {
nowPlayVideoUrl(newVal, old) {
this.getVideo(newVal);
}
},
beforeDestroy() {
if (this.player) {
this.player.dispose(); // Removing Players,該方法會重置videojs的内部狀态并移除dom
}
}
};
</script>
<style lang="scss">
#videoPlayer {
width: 500px;
height: 300px;
margin: 50px auto;
}
</style>
視訊切換效果如圖:
四、踩坑小記
1. 視訊不能自動播放 或報錯 DOMException: play() failed
DOMException: play() failed
需用muted屬性解決
報錯資訊:
DOMException: play() failedbecause the user didn’t interact with the document first.(使用者還沒有互動,不能調用play)
解決辦法:設定muted屬性為true
關于
muted
屬性:
-
屬性,設定或傳回音頻是否應該被靜音(關閉聲音);屬性的值是muted
和true
;false
-
表示視訊不用靜音(視訊播放便有聲音),但設定muted="false"
的情況下,視訊無法實作自動播放。muted="fasle"
-
标簽中video
的作用: 允許視訊自動播放;(Chrome66版本開始,禁止視訊和音頻的自動播放)muted
2. 換台的時候,url已經成功更改,但視訊還是之前的
需得動态設定src才能實作
// 動态設定src
this.player.src([
{
src: nowPlayVideoUrl,
type: "application/x-mpegURL" // 告訴videojs,這是一個hls流
}
]);
3. 找不到mux.js子產品
報錯資訊:
* mux.js/lib/tools/parse-sidx in ./node_modules/video.js/dist/video.es.js To install it, you can run: npm install --save mux.js/lib/tools/parse-sidx
解決辦法:安裝mux.js
yarn add mux.js
五、 播放rtmp流
播放
rtmp流
的操作與播放
hls流
的操作幾乎相同,不同在于:
import "videojs-flash"; // 播放rtmp流需要的插件
type: 'rtmp/flv', // 這個type值必寫, 告訴videojs這是一個rtmp流視訊
參考:
- Vue Video.js播放m3u8視訊流格式
- video.js
題外話
html檔案内,直接引入videojs的js和css檔案,即可實作上述功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://unpkg.com/[email protected]/dist/video-js.min.css"
rel="stylesheet"
/>
<title>視訊線上播放</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.video-container {
display: flex; /* 1.設定為彈性盒子 */
align-items: center; /* 2.讓子項盒子縱向 居中排列 */
justify-content: center; /* 3.讓子項盒子橫向 居中排列 */
height: 100vh;
background: rgb(255, 247, 247);
}
.video-player {
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div class="video-container">
<!-- 一定要記得 在這裡加上類名 video-js -->
<video id="videoPlayer" class="video-js video-player">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to
a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
</div>
<script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>
<script>
const nowPlayVideoUrl =
'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
const options = {
autoplay: true, // 設定自動播放
muted: true, // 設定了它為true,才可實作自動播放,同時視訊也被靜音 (Chrome66及以上版本,禁止音視訊的自動播放)
preload: 'auto', // 預加載
controls: true, // 顯示播放的控件
playbackRates: [0.5, 1, 1.25, 1.5, 2, 3] // 倍速播放
};
let player = null;
function getVideo(nowPlayVideoUrl) {
player = videojs('#videoPlayer', options, function onPlayerReady() {
// In this context, `this` is the player that was created by Video.js.
videojs.log('Your player is ready!', this);
//關鍵代碼, 動态設定src,才可實作換台操作
this.src([
{
src: nowPlayVideoUrl,
type: 'application/x-mpegURL' // 告訴videojs,這是一個hls流
}
]);
this.play();
});
}
getVideo(nowPlayVideoUrl);
window.addEventListener('unload', function () {
player.dispose(); // Removing Players,該方法會重置videojs的内部狀态并移除dom
});
</script>
</body>
</html>