如何在vue中使用video.js播放m3u8格式的視頻
更新時間：2021年02月01日 16:49:21 作者：下一秒
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻，幫助大家更好的理解和學習使用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項目中，若不安裝它可能報錯
二、引入videojs
1.在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);
2.在main.js中引入剛剛的video.js文件
import "./plugins/video.js"; // 引入剛剛定義的video.js文件
三、在組件中測試并使用
1. 實現(xiàn)基本的自動播放
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)場直播，不能快退）的替換為它，看到快進快退的效果
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,是不能實現(xiàn) 換臺的 (即使監(jiān)聽了nowPlayVideoUrl也沒實現(xiàn))
{
src: nowPlayVideoUrl,
type: "application/x-mpegURL" // 告訴videojs,這是一個hls流
}
]
};
// videojs的第一個參數(shù)表示的是，文檔中video的id
const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
console.log("onPlayerReady 中的this指的是：", this); // 這里的this是指Player,是由Videojs創(chuàng)建出來的實例
console.log(myPlyer === this); // 這里返回的是true
});
}
}
};
</script>
<style lang="scss">
#videoPlayer {
width: 500px;
height: 300px;
margin: 50px auto;
}
</style>
視頻播放效果如圖：
打印結果如圖：
2. 實現(xiàn)換臺
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, // 設置自動播放
muted: true, // 設置了它為true，才可實現(xiàn)自動播放,同時視頻也被靜音 （Chrome66及以上版本，禁止音視頻的自動播放）
preload: "auto", // 預加載
controls: true // 顯示播放的控件
},
player:null
};
},
mounted() {
this.getVideo(this.nowPlayVideoUrl);
},
methods: {
getVideo(nowPlayVideoUrl) {
this.player = Videojs("videoPlayer", this.options);
//關鍵代碼， 動態(tài)設置src，才可實現(xiàn)換臺操作
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的內部狀態(tài)并移除dom
}
}
};
</script>
<style lang="scss">
#videoPlayer {
width: 500px;
height: 300px;
margin: 50px auto;
}
</style>
視頻切換效果如圖：
四、踩坑小記
1. 視頻不能自動播放 或報錯 DOMException: play() failed
需用muted屬性解決
報錯信息：DOMException: play() failedbecause the user didn't interact with the document first.(用戶還沒有交互,不能調用play)
解決辦法：設置muted屬性為true
<video id="videoPlayer" class="video-js" muted></video>
關于muted屬性：
- muted 屬性,設置或返回音頻是否應該被靜音（關閉聲音）;屬性的值是true和false;
- muted="false" 表示視頻不用靜音（視頻播放便有聲音），但設置 muted="fasle" 的情況下，視頻無法實現(xiàn)自動播放。
- video 標簽中 muted 的作用： 允許視頻自動播放；（Chrome66版本開始，禁止視頻和音頻的自動播放）
2. 換臺的時候，url已經成功更改，但視頻還是之前的
需得動態(tài)設置src才能實現(xiàn)
// 動態(tài)設置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格式的視頻的詳細內容，更多關于vue 使用videojs 播放m3u8格式的視頻的資料請關注腳本之家其它相關文章！
相關文章
vue3中定義全局指令時,往往會碰到一個問題：事件無法解綁,為什么會這樣,因為通常在指令的mounted鉤子中綁定事件,事件處理函數(shù)也定義在mounted中,本文講給大家講講vue3中addEventListener的妙用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了如何把vuejs打包出來的文件整合到springboot里,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
vue中$nexttick,$set,$forceupdate的區(qū)別
本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要為大家詳細介紹了vue+elementui實現(xiàn)拖住滑塊拼圖驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
我們在vue項目里面用HTML標簽構建頁面時最終會被轉化成vnode,而h()是直接創(chuàng)建vnode,因此h()能以一種更靈活的方式在各種各樣情景下構建組件的渲染邏輯,并且能帶來性能方式的提升,本文介紹如何使用和列出具體的應用場景,需要的朋友可以參考下2024-08-08
uni-app自定義導航欄按鈕|uniapp仿微信頂部導航條功能
這篇文章主要介紹了uni-app自定義導航欄按鈕|uniapp仿微信頂部導航條,需要的朋友可以參考下2019-11-11
VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決
這篇文章主要介紹了VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache
這篇文章主要介紹了使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了Vuex實現(xiàn)數(shù)據(jù)共享的方法,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了vue組件父與子通信詳解，實現(xiàn)登錄窗口，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11