這篇文章主要介紹了vue如何通過(guò)video.js解決m3u8視頻播放格式問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專業(yè)提供雅安移動(dòng)機(jī)房服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購(gòu)買(mǎi)雅安移動(dòng)機(jī)房服務(wù)，并享受7*24小時(shí)金牌售后服務(wù)。

第一種方法

1.在vue中安裝下面這些插件

cnpm install video.js --save
ccnp install videojs-contrib-hls --save

網(wǎng)上有說(shuō)video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后結(jié)果測(cè)試，根本不需要什么低版本的高版本的，7版本以上的沒(méi)有任何問(wèn)題。小編已經(jīng)親自試驗(yàn)過(guò)

2.頁(yè)面中使用

<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)上傳封面圖，就顯示，如果沒(méi)有上傳就顯示默認(rèn)的圖片，這個(gè)是根據(jù)自己的需求來(lái)解決

computed: {
  poster: function() {
   return this.posterSrc
    ? this.posterSrc
    : require("./../assets/images/coveImg.png");
  }
 },

2.2在methods中定義一個(gè)方法，getViewList用于請(qǐng)求數(shù)據(jù)，拿到視頻流

2.3下載之后在頁(yè)面中引入，如果引入video.js有問(wèn)題，就在html文件引入

<script src="//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,接下來(lái)說(shuō)第二種實(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è)文件

只需要寫(xiě)這么多，然后再mounted生命周期調(diào)用，但是這個(gè)沒(méi)有video.js樣式好看，都可以解決播放不了m3u8視頻的格式問(wèn)題。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何通過(guò)video.js解決m3u8視頻播放格式問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章標(biāo)題：vue如何通過(guò)video.js解決m3u8視頻播放格式問(wèn)題
鏈接URL：http://chinadenli.net/article12/ipgedc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、域名注冊(cè)、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)