vue3使用videojs播放m3u8格式視頻教程
vue3使用videojs 播放m3u8格式視頻
videojs是一個播放視頻的js庫，可以通過videojs結合videojs-contrib-hls實播放m3u8格式視頻。流媒體傳輸協(xié)議(hls)定義了用來控制播放的m3u8文件
m3u8是一個文本文件(播放列表文件)，里面的內容就是被播放的音視頻文件路徑或網(wǎng)址。存放了視頻的基本信息和分段視頻的索引地址。就是按順序下載播放索引列表的視頻，從而完成一部完整視頻的播放。
先在項目中安裝videojs。
npm install --save video.js npm install --save videojs-contrib-hls
下載成功后在項目的package.json文件中，有這兩行代碼。
在需要播放視頻的頁面中引入videojs
import 'video.js/dist/video-js.css'; import videojs from 'video.js';
在vue頁面中加入video標簽。
class="video-js vjs-default-skin"是videojs自帶的樣式需要加上，否則視頻樣式會有問題，style="width: 100%;height: 100%; object-fit: fill" 這行代碼是為了使視頻占滿div容器。
<div class="vedio">
<video id="valveVideogj" class="video-js vjs-default-skin" autoplay
style="width: 100%;height: 100%; object-fit: fill"></video>
</div>在onMounted節(jié)點初始化播放器。
videojs函數(shù)有三個參數(shù)，分別為video標簽id(id必須要唯一)，要實例化的videojs配置，以及回調函數(shù)。options(rtsp)函數(shù)，rtsp為視頻地址。http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8(網(wǎng)上找的m3u8格式視頻)
function options(src) {
return {
autoplay: true, // true,瀏覽器準備好時開始播放。
muted: true, // 默認情況下將會消除音頻。
loop: true, // 導致視頻一結束就重新開始。
controls: false, //取消視頻中的進度條
preload: 'auto', // auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
language: 'zh-CN', //漢化
fluid: true, // 當true時，將按比例縮放以適應其容器。
sources: [{
type: 'application/x-mpegURL',
src //視頻播放地址
}],
notSupportedMessage: '此視頻暫無法播放，請稍后再試', // 無法播放媒體源時顯示的默認信息。
textTrackDisplay: false,
}
}
let player;
onMounted(() => {
try {
player = videojs("valveVideo", options(rtsp), () => {
player.play();
});
} catch (error) {
console.log(error);
}
}) 播放效果圖
視頻的大小可以通過改變外層div容器的大小來改變。
.vedio {
width: 632.89px;
height: 356px;
background: #000;
padding: 3px;
border: 1px solid #707070;
margin: 30px 30px 0 30px;
}ps
從其他頁面返回到該頁面會碰到video.es.js:228 videojs: warn: player "valvevideogj" is already initialised. options will not be applied.錯誤
則是因為播放器已經(jīng)初始化過了，不能重復調用video標簽作用于同一個video id，需要離開頁面是銷毀video，再重新初始化。
onUnmounted(() => {
//離開頁面時銷毀video
player.dispose()
})總結
到此這篇關于vue3使用videojs播放m3u8格式視頻的文章就介紹到這了,更多相關videojs播放m3u8視頻內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了實現(xiàn)一個Vue自定義指令懶加載的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術之一,雖然Vue.js的一些基礎概念和語法比較易學,但深入挖掘Vue.js的核心概念和功能需要更多的實踐,下面這篇文章主要給大家介紹了關于Vue3封裝組件(帶回調事件)的相關資料,需要的朋友可以參考下2023-06-06
vuex2中使用mapGetters/mapActions報錯的解決方法
這篇文章主要介紹了vuex2中使用mapGetters/mapActions報錯解決方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
vuejs是當下很火的一個JavaScript MVVM庫，它是以數(shù)據(jù)驅動和組件化的思想構建的。今天給大家分享一篇教程關于Vue.js 60分鐘快速入門教程，一起看看吧2017-03-03
這篇文章主要介紹了Vue中如何處理token過期問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
echarts實現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實現(xiàn)獲取datazoom的起始值(包括x軸和y軸)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Axios 是一個基于 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中,這篇文章給大家介紹了Vue使用Axios添加自定義請求頭的多種方式,并通過代碼講解的非常詳細,需要的朋友可以參考下2025-05-05
本文主要介紹了vue實現(xiàn)接口封裝的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-11-11
Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue中動態(tài)設置class類名和style樣式的操作指南
在Vue中,動態(tài)設置class類名和style樣式是非常常見的需求,主要通過v-bind指令（簡寫為:）實現(xiàn),兩者都支持對象語法、數(shù)組語法和計算屬性,但具體用法略有差異,以下是詳細說明和示例,需要的朋友可以參考下2025-09-09