這篇文章主要介紹了vue如何通過video.js解決m3u8視頻播放格式問題,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)專業(yè)提供雅安移動機房服務(wù),為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案,用戶可自行在線購買雅安移動機房服務(wù),并享受7*24小時金牌售后服務(wù)。
第一種方法
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="//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視頻的格式問題。
感謝你能夠認真閱讀完這篇文章,希望小編分享的“vue如何通過video.js解決m3u8視頻播放格式問題”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!
文章標題:vue如何通過video.js解決m3u8視頻播放格式問題
鏈接URL:http://muchs.cn/article12/ipgedc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、域名注冊、網(wǎng)站維護、網(wǎng)站設(shè)計、軟件開發(fā)、動態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)