vue通過video.js解決m3u8視頻播放格式的方法
前言
今天被這個關(guān)于m3u8視頻播放不了搞了一下午，這個項目所有的視頻流都是m3u8格式的，后臺給我們返回的都是m3u8格式的視頻流，解決了好長時間，看了好多博客，只有這個博客給我點啟發(fā)，去解決這個問題，請查看。會使用兩種方法來解決這個問題
第一種方法
1.在vue中安裝下面這些插件
cnpm install video.js --save ccnp install videojs-contrib-hls --save
網(wǎng)上有說video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后結(jié)果測試，根本不需要什么低版本的高版本的，7版本以上的沒有任何問題。小編已經(jīng)親自試驗過
2.頁面中使用
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" style='width: 100%;height: auto' :poster="poster" > </video>
2.1 poster設(shè)置封面圖，我在計算屬性判斷了一下，，如果后臺上傳封面圖，就顯示，如果沒有上傳就顯示默認的圖片，這個是根據(jù)自己的需求來解決
computed: {
poster: function() {
return this.posterSrc
? this.posterSrc
: require("./../assets/images/coveImg.png");
}
},
2.2在methods中定義一個方法，getViewList用于請求數(shù)據(jù)，拿到視頻流
2.3下載之后在頁面中引入，如果引入video.js有問題，就在html文件引入
<script src="http://vjs.zencdn.net/7.3.0/video.min.js"></script>
這樣就可以了
2.3video.js配置項
getVideo() {
this.myVideo = videojs("myVideo", {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
hls: {
withCredentials: true
}
});
}
最重要的一點，標紅的，一定一定要使用，下載了安裝包，一定要在這個使用，才能失效。不然播放不了m3u8視頻格式
mounted() {
this.$nextTick(() => {
this.getVideo();
});
this.getViewList();
},
定義的兩個方法，放在mounted
第二種方法
上面是實現(xiàn)播放m3u8,接下來說第二種實現(xiàn)方法
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
地址請看 https://www.npmjs.com/package/hls.js/v/canary
引入上面那個文件
只需要寫這么多，然后再mounted生命周期調(diào)用，但是這個沒有video.js樣式好看，都可以解決播放不了m3u8視頻的格式問題。
以上都是來解決m3u8視頻播放不了的問題，
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
相關(guān)文章
Vue學(xué)習(xí)筆記進階篇之vue-router安裝及使用方法
本篇文章主要介紹了Vue學(xué)習(xí)筆記進階篇之vue-router安裝及使用方法，具有一定的參考價值，有興趣的可以了解一下2017-07-07
Vue2集成ElementUI實現(xiàn)左側(cè)菜單導(dǎo)航功能
本文主要記錄兩個菜單的生成方式,通過在前端router/index.js中直接進行配置,后端返回菜單數(shù)據(jù)進行對應(yīng),可以通過后端返回的菜單數(shù)據(jù)控制權(quán)限,另一種是部門靜態(tài)導(dǎo)航,然后再拼接動態(tài)導(dǎo)航,生成完成頁面導(dǎo)航,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了Vue中父子組件通訊——todolist組件功能開發(fā)的相關(guān)知識,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
在Vue中實現(xiàn)網(wǎng)頁截圖與截屏功能詳解
在Web開發(fā)中，有時候需要對網(wǎng)頁進行截圖或截屏，Vue作為一個流行的JavaScript框架，提供了一些工具和庫，可以方便地實現(xiàn)網(wǎng)頁截圖和截屏功能，本文將介紹如何在Vue中進行網(wǎng)頁截圖和截屏,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了vue基于better-scroll仿京東分類列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了JavaScript優(yōu)選七個用于vue開發(fā)庫，借助開源庫加速Vue項目的開發(fā)進度是現(xiàn)代前端開發(fā)比較常見的方式，平常收集一些JavaScript庫介紹，在遇到需要的時候可以信手拈來2023-02-02
vue+css如何實現(xiàn)圓環(huán)漸變儀表盤
這篇文章主要介紹了vue+css如何實現(xiàn)圓環(huán)漸變儀表盤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vant steps流程圖的圖標使用slot自定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Pinia是一個專為Vue3設(shè)計的現(xiàn)代化狀態(tài)管理庫,本文主要介紹了vue3項目使用pinia狀態(tài)管理器的使用,具有一定的參考價值,感興趣的可以了解一下2024-05-05
這篇文章主要介紹了el-menu彈出菜單樣式不生效的問題及解決方法,修改彈出框元素不在 el-menu 樣式中,我們需要在 el-menu–popup 中修改樣式,具體操作代碼跟隨小編一起看看吧2024-07-07