如何在vue中使用video.js播放m3u8格式的視頻
@[toc] 注意:
"vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0"
一、安裝
yarn add video.js yarn add videojs-contrib-hls // 這是播放hls流需要的插件 yarn add mux.js // 在vue項(xiàng)目中,若不安裝它可能報(bào)錯(cuò)
二、引入videojs
1.在src文件夾下新建 plugins文件夾,并新建video.js文件;
video.js文件的內(nèi)容如下:
import "video.js/dist/video-js.css"; // 引入video.js的css import hls from "videojs-contrib-hls"; // 播放hls流需要的插件 import Vue from "vue"; Vue.use(hls);
2.在main.js中引入剛剛的video.js文件
import "./plugins/video.js"; // 引入剛剛定義的video.js文件
三、在組件中測試并使用
1. 實(shí)現(xiàn)基本的自動(dòng)播放
Test.vue文件
<template> <div class="test-videojs"> <video id="videoPlayer" class="video-js" muted></video> </div> </template> <script> import Videojs from "video.js"; // 引入Videojs export default { data() { return { // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 是一段視頻,可將cctv1 (是live現(xiàn)場直播,不能快退)的替換為它,看到快進(jìn)快退的效果 nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" }; }, mounted() { this.initVideo(this.nowPlayVideoUrl); }, methods: { initVideo(nowPlayVideoUrl) { // 這些options屬性也可直接設(shè)置在video標(biāo)簽上,見 muted let options = { autoplay: true, // 設(shè)置自動(dòng)播放 controls: true, // 顯示播放的控件 sources: [ // 注意,如果是以option方式設(shè)置的src,是不能實(shí)現(xiàn) 換臺(tái)的 (即使監(jiān)聽了nowPlayVideoUrl也沒實(shí)現(xiàn)) { src: nowPlayVideoUrl, type: "application/x-mpegURL" // 告訴videojs,這是一個(gè)hls流 } ] }; // videojs的第一個(gè)參數(shù)表示的是,文檔中video的id const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() { console.log("onPlayerReady 中的this指的是:", this); // 這里的this是指Player,是由Videojs創(chuàng)建出來的實(shí)例 console.log(myPlyer === this); // 這里返回的是true }); } } }; </script> <style lang="scss"> #videoPlayer { width: 500px; height: 300px; margin: 50px auto; } </style>
視頻播放效果如圖:
打印結(jié)果如圖:
2. 實(shí)現(xiàn)換臺(tái)
Test.vue文件
<template> <div class="test-videojs"> <video id="videoPlayer" class="video-js"></video> <el-button type="danger" @click="changeSource">切換到CCTV3</el-button> </div> </template> <script> import Videojs from "video.js"; // 引入Videojs export default { data() { return { nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8", options: { autoplay: true, // 設(shè)置自動(dòng)播放 muted: true, // 設(shè)置了它為true,才可實(shí)現(xiàn)自動(dòng)播放,同時(shí)視頻也被靜音 (Chrome66及以上版本,禁止音視頻的自動(dòng)播放) preload: "auto", // 預(yù)加載 controls: true // 顯示播放的控件 }, player:null }; }, mounted() { this.getVideo(this.nowPlayVideoUrl); }, methods: { getVideo(nowPlayVideoUrl) { this.player = Videojs("videoPlayer", this.options); //關(guān)鍵代碼, 動(dòng)態(tài)設(shè)置src,才可實(shí)現(xiàn)換臺(tái)操作 this.player.src([ { src: nowPlayVideoUrl, type: "application/x-mpegURL" // 告訴videojs,這是一個(gè)hls流 } ]); }, changeSource() { this.nowPlayVideoUrl = "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8"; console.log(this.nowPlayVideoUrl, "改變了"); } }, watch: { nowPlayVideoUrl(newVal, old) { this.getVideo(newVal); } }, beforeDestroy() { if (this.player) { this.player.dispose(); // Removing Players,該方法會(huì)重置videojs的內(nèi)部狀態(tài)并移除dom } } }; </script> <style lang="scss"> #videoPlayer { width: 500px; height: 300px; margin: 50px auto; } </style>
視頻切換效果如圖:
四、踩坑小記
1. 視頻不能自動(dòng)播放 或報(bào)錯(cuò) DOMException: play() failed
需用muted屬性解決
報(bào)錯(cuò)信息:DOMException: play() failedbecause the user didn't interact with the document first.(用戶還沒有交互,不能調(diào)用play)
解決辦法:設(shè)置muted屬性為true
<video id="videoPlayer" class="video-js" muted></video>
關(guān)于muted屬性:
- muted 屬性,設(shè)置或返回音頻是否應(yīng)該被靜音(關(guān)閉聲音);屬性的值是true和false;
- muted="false" 表示視頻不用靜音(視頻播放便有聲音),但設(shè)置 muted="fasle" 的情況下,視頻無法實(shí)現(xiàn)自動(dòng)播放。
- video 標(biāo)簽中 muted 的作用: 允許視頻自動(dòng)播放;(Chrome66版本開始,禁止視頻和音頻的自動(dòng)播放)
2. 換臺(tái)的時(shí)候,url已經(jīng)成功更改,但視頻還是之前的
需得動(dòng)態(tài)設(shè)置src才能實(shí)現(xiàn)
// 動(dòng)態(tài)設(shè)置src this.player.src([ { src: nowPlayVideoUrl, type: "application/x-mpegURL" // 告訴videojs,這是一個(gè)hls流 } ]);
3. 找不到mux.js模塊
報(bào)錯(cuò)信息:* mux.js/lib/tools/parse-sidx in ./node_modules/video.js/dist/video.es.js To install it, you can run: npm install --save mux.js/lib/tools/parse-sidx
解決辦法:安裝mux.js
yarn add mux.js
五、 播放rtmp流
播放rtmp流的操作與播放hls流的操作幾乎相同,不同在于:
import "videojs-flash"; // 播放rtmp流需要的插件 type: 'rtmp/flv', // 這個(gè)type值必寫, 告訴videojs這是一個(gè)rtmp流視頻
以上就是如何在vue中使用video.js 播放m3u8格式的視頻的詳細(xì)內(nèi)容,更多關(guān)于vue 使用videojs 播放m3u8格式的視頻的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue中$nexttick,$set,$forceupdate的區(qū)別
本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue多功能渲染函數(shù)h()的使用和多種應(yīng)用場景
我們在vue項(xiàng)目里面用HTML標(biāo)簽構(gòu)建頁面時(shí)最終會(huì)被轉(zhuǎn)化成vnode,而h()是直接創(chuàng)建vnode,因此h()能以一種更靈活的方式在各種各樣情景下構(gòu)建組件的渲染邏輯,并且能帶來性能方式的提升,本文介紹如何使用和列出具體的應(yīng)用場景,需要的朋友可以參考下2024-08-08uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條功能
這篇文章主要介紹了uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條,需要的朋友可以參考下2019-11-11VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語法錯(cuò)誤的解決
這篇文章主要介紹了VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語法錯(cuò)誤的解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache
這篇文章主要介紹了使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法,需要的朋友可以參考下2019-12-12