vue通過video.js解決m3u8視頻播放格式的方法
前言
今天被這個(gè)關(guān)于m3u8視頻播放不了搞了一下午，這個(gè)項(xiàng)目所有的視頻流都是m3u8格式的，后臺(tái)給我們返回的都是m3u8格式的視頻流，解決了好長(zhǎng)時(shí)間，看了好多博客，只有這個(gè)博客給我點(diǎn)啟發(fā)，去解決這個(gè)問題，請(qǐng)查看。會(huì)使用兩種方法來解決這個(gè)問題
第一種方法
1.在vue中安裝下面這些插件
cnpm install video.js --save ccnp install videojs-contrib-hls --save
網(wǎng)上有說video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后結(jié)果測(cè)試，根本不需要什么低版本的高版本的，7版本以上的沒有任何問題。小編已經(jīng)親自試驗(yàn)過
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ì)算屬性判斷了一下，，如果后臺(tái)上傳封面圖，就顯示，如果沒有上傳就顯示默認(rèn)的圖片，這個(gè)是根據(jù)自己的需求來解決
computed: {
poster: function() {
return this.posterSrc
? this.posterSrc
: require("./../assets/images/coveImg.png");
}
},
2.2在methods中定義一個(gè)方法，getViewList用于請(qǐng)求數(shù)據(jù)，拿到視頻流
2.3下載之后在頁面中引入，如果引入video.js有問題，就在html文件引入
<script src="http://vjs.zencdn.net/7.3.0/video.min.js"></script>
這樣就可以了
2.3video.js配置項(xiàng)
getVideo() {
this.myVideo = videojs("myVideo", {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
hls: {
withCredentials: true
}
});
}
最重要的一點(diǎn)，標(biāo)紅的，一定一定要使用，下載了安裝包，一定要在這個(gè)使用，才能失效。不然播放不了m3u8視頻格式
mounted() {
this.$nextTick(() => {
this.getVideo();
});
this.getViewList();
},
定義的兩個(gè)方法，放在mounted
第二種方法
上面是實(shí)現(xiàn)播放m3u8,接下來說第二種實(shí)現(xiàn)方法
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
地址請(qǐng)看 https://www.npmjs.com/package/hls.js/v/canary
引入上面那個(gè)文件
只需要寫這么多，然后再mounted生命周期調(diào)用，但是這個(gè)沒有video.js樣式好看，都可以解決播放不了m3u8視頻的格式問題。
以上都是來解決m3u8視頻播放不了的問題，
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)
這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
今天小編就為大家分享一篇關(guān)于實(shí)例講解v-if和v-show的區(qū)別，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
VUE使用axios調(diào)用后臺(tái)API接口的方法
這篇文章主要介紹了VUE使用axios調(diào)用后臺(tái)API接口的方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08
vue中對(duì)接Graphql接口的實(shí)現(xiàn)示例
本文主要介紹了vue中對(duì)接Graphql接口的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue3使用vuedraggable和grid實(shí)現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實(shí)現(xiàn)自定義拖拽布局方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js中window.onresize的超詳細(xì)使用方法
這篇文章主要給大家介紹了關(guān)于vue.js中window.onresize的超詳細(xì)使用方法,window.onresize 是直接給window的onresize屬性綁定事件,只能有一個(gè),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue-element中el-input輸入卡頓問題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vueScroll實(shí)現(xiàn)移動(dòng)端下拉刷新、上拉加載
這篇文章主要介紹了vueScroll實(shí)現(xiàn)移動(dòng)端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue項(xiàng)目中token驗(yàn)證登錄(前端部分)
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目中token驗(yàn)證登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08