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
}
});
}
最重要的一點，標(biāo)紅的，一定一定要使用，下載了安裝包，一定要在這個使用，才能失效。不然播放不了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如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點后兩位,并且不能輸入減號
這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點后兩位,并且不能輸入減號問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
今天小編就為大家分享一篇關(guān)于實例講解v-if和v-show的區(qū)別，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了VUE使用axios調(diào)用后臺API接口的方法，文中講解非常細致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08
本文主要介紹了vue中對接Graphql接口的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js中window.onresize的超詳細使用方法
這篇文章主要給大家介紹了關(guān)于vue.js中window.onresize的超詳細使用方法,window.onresize 是直接給window的onresize屬性綁定事件,只能有一個,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue-element中el-input輸入卡頓問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vueScroll實現(xiàn)移動端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細介紹了Vue項目中token驗證登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08