如何在vue中使用video.js播放m3u8格式的視頻
更新時(shí)間：2021年02月01日 16:49:21 作者：下一秒
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
@[toc] 注意：
"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項(xiàng)目中，若不安裝它可能報(bào)錯(cuò)
二、引入videojs
1.在src文件夾下新建 plugins文件夾，并新建video.js文件；
video.js文件的內(nèi)容如下：
import "video.js/dist/video-js.css"; // 引入video.js的css import hls from "videojs-contrib-hls"; // 播放hls流需要的插件 import Vue from "vue"; Vue.use(hls);
2.在main.js中引入剛剛的video.js文件
import "./plugins/video.js"; // 引入剛剛定義的video.js文件
三、在組件中測(cè)試并使用
1. 實(shí)現(xiàn)基本的自動(dòng)播放
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現(xiàn)場(chǎng)直播，不能快退）的替換為它，看到快進(jìn)快退的效果
nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
};
},
mounted() {
this.initVideo(this.nowPlayVideoUrl);
},
methods: {
initVideo(nowPlayVideoUrl) {
// 這些options屬性也可直接設(shè)置在video標(biāo)簽上，見 muted
let options = {
autoplay: true, // 設(shè)置自動(dòng)播放
controls: true, // 顯示播放的控件
sources: [
// 注意，如果是以option方式設(shè)置的src,是不能實(shí)現(xiàn) 換臺(tái)的 (即使監(jiān)聽了nowPlayVideoUrl也沒實(shí)現(xiàn))
{
src: nowPlayVideoUrl,
type: "application/x-mpegURL" // 告訴videojs,這是一個(gè)hls流
}
]
};
// videojs的第一個(gè)參數(shù)表示的是，文檔中video的id
const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
console.log("onPlayerReady 中的this指的是：", this); // 這里的this是指Player,是由Videojs創(chuàng)建出來的實(shí)例
console.log(myPlyer === this); // 這里返回的是true
});
}
}
};
</script>
<style lang="scss">
#videoPlayer {
width: 500px;
height: 300px;
margin: 50px auto;
}
</style>
視頻播放效果如圖：
打印結(jié)果如圖：
2. 實(shí)現(xiàn)換臺(tái)
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: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
options: {
autoplay: true, // 設(shè)置自動(dòng)播放
muted: true, // 設(shè)置了它為true，才可實(shí)現(xiàn)自動(dòng)播放,同時(shí)視頻也被靜音 （Chrome66及以上版本，禁止音視頻的自動(dòng)播放）
preload: "auto", // 預(yù)加載
controls: true // 顯示播放的控件
},
player:null
};
},
mounted() {
this.getVideo(this.nowPlayVideoUrl);
},
methods: {
getVideo(nowPlayVideoUrl) {
this.player = Videojs("videoPlayer", this.options);
//關(guān)鍵代碼， 動(dòng)態(tài)設(shè)置src，才可實(shí)現(xiàn)換臺(tái)操作
this.player.src([
{
src: nowPlayVideoUrl,
type: "application/x-mpegURL" // 告訴videojs,這是一個(gè)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,該方法會(huì)重置videojs的內(nèi)部狀態(tài)并移除dom
}
}
};
</script>
<style lang="scss">
#videoPlayer {
width: 500px;
height: 300px;
margin: 50px auto;
}
</style>
視頻切換效果如圖：
四、踩坑小記
1. 視頻不能自動(dòng)播放 或報(bào)錯(cuò) DOMException: play() failed
需用muted屬性解決
報(bào)錯(cuò)信息：DOMException: play() failedbecause the user didn't interact with the document first.(用戶還沒有交互,不能調(diào)用play)
解決辦法：設(shè)置muted屬性為true
<video id="videoPlayer" class="video-js" muted></video>
關(guān)于muted屬性：
- muted 屬性,設(shè)置或返回音頻是否應(yīng)該被靜音（關(guān)閉聲音）;屬性的值是true和false;
- muted="false" 表示視頻不用靜音（視頻播放便有聲音），但設(shè)置 muted="fasle" 的情況下，視頻無法實(shí)現(xiàn)自動(dòng)播放。
- video 標(biāo)簽中 muted 的作用： 允許視頻自動(dòng)播放；（Chrome66版本開始，禁止視頻和音頻的自動(dòng)播放）
2. 換臺(tái)的時(shí)候，url已經(jīng)成功更改，但視頻還是之前的
需得動(dòng)態(tài)設(shè)置src才能實(shí)現(xiàn)
// 動(dòng)態(tài)設(shè)置src
this.player.src([
{
src: nowPlayVideoUrl,
type: "application/x-mpegURL" // 告訴videojs,這是一個(gè)hls流
}
]);
3. 找不到mux.js模塊
報(bào)錯(cuò)信息：* 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', // 這個(gè)type值必寫, 告訴videojs這是一個(gè)rtmp流視頻
以上就是如何在vue中使用video.js 播放m3u8格式的視頻的詳細(xì)內(nèi)容，更多關(guān)于vue 使用videojs 播放m3u8格式的視頻的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue封裝全局過濾器的方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
vue中@click綁定事件點(diǎn)擊不生效的原因及解決方案
根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件，這篇文章主要介紹了vue中@click綁定事件點(diǎn)擊不生效的解決方案,需要的朋友可以參考下2022-12-12
詳解elementui之el-image-viewer(圖片查看器)
這篇文章主要介紹了詳解elementui之el-image-viewer(圖片查看器)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
解決Vue3?echarts?v-show無法重新渲染的問題
這篇文章主要介紹了Vue3?echarts?v-show無法重新渲染的問題,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本文給大家總結(jié)了vue-cli常用設(shè)置,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
Vue中的 nextTick 涉及到Vue中DOM的異步更新，感覺很有意思，特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識(shí)，很多不太理解，暫且根據(jù)自己的一些感悟介紹下 nextTick2019-05-05
這篇文章主要介紹了Vue項(xiàng)目配置在局域網(wǎng)下訪問方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
今天小編就為大家分享一篇淺談在vue中使用mint-ui swipe遇到的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3利用store實(shí)現(xiàn)記錄滾動(dòng)位置的示例
這篇文章主要介紹了vue3利用store實(shí)現(xiàn)記錄滾動(dòng)位置的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04