@[toc] 注意：
|
1
2
3
4
|
"vue": "^2.6.11","video.js": "^7.10.2","videojs-contrib-hls": "^5.15.0","mux.js": "^5.7.0" |
一、安裝
|
1
2
3
|
yarn add video.jsyarn add videojs-contrib-hls // 這是播放hls流需要的插件yarn add mux.js // 在vue項目中，若不安裝它可能報錯 |
二、引入videojs
1.在src文件夾下新建 plugins文件夾，并新建video.js文件；
video.js文件的內容如下：
|
1
2
3
4
|
import "video.js/dist/video-js.css"; // 引入video.js的cssimport hls from "videojs-contrib-hls"; // 播放hls流需要的插件import Vue from "vue";Vue.use(hls); |
2.在main.js中引入剛剛的video.js文件
|
1
|
import "./plugins/video.js"; // 引入剛剛定義的video.js文件 |
三、在組件中測試并使用
1. 實現基本的自動播放
Test.vue文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<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現場直播，不能快退）的替換為它，看到快進快退的效果 nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" }; }, mounted() { this.initVideo(this.nowPlayVideoUrl); }, methods: { initVideo(nowPlayVideoUrl) { // 這些options屬性也可直接設置在video標簽上，見 muted let options = { autoplay: true, // 設置自動播放 controls: true, // 顯示播放的控件 sources: [ // 注意，如果是以option方式設置的src,是不能實現 換臺的 (即使監聽了nowPlayVideoUrl也沒實現) { src: nowPlayVideoUrl, type: "application/x-mpegURL" // 告訴videojs,這是一個hls流 } ] }; // videojs的第一個參數表示的是，文檔中video的id const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() { console.log("onPlayerReady 中的this指的是：", this); // 這里的this是指Player,是由Videojs創建出來的實例 console.log(myPlyer === this); // 這里返回的是true }); } }};</script><style lang="scss">#videoPlayer { width: 500px; height: 300px; margin: 50px auto;}</style> |
視頻播放效果如圖：
打印結果如圖：
2. 實現換臺
Test.vue文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<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"; // 引入Videojsexport default { data() { return { nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8", options: { autoplay: true, // 設置自動播放 muted: true, // 設置了它為true，才可實現自動播放,同時視頻也被靜音 （Chrome66及以上版本，禁止音視頻的自動播放） preload: "auto", // 預加載 controls: true // 顯示播放的控件 }, player:null }; }, mounted() { this.getVideo(this.nowPlayVideoUrl); }, methods: { getVideo(nowPlayVideoUrl) { this.player = Videojs("videoPlayer", this.options); //關鍵代碼， 動態設置src，才可實現換臺操作 this.player.src([ { src: nowPlayVideoUrl, type: "application/x-mpegURL" // 告訴videojs,這是一個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,該方法會重置videojs的內部狀態并移除dom } }};</script><style lang="scss">#videoPlayer { width: 500px; height: 300px; margin: 50px auto;}</style> |
視頻切換效果如圖：
四、踩坑小記
1. 視頻不能自動播放 或報錯 DOMException: play() failed
需用muted屬性解決
報錯信息：DOMException: play() failedbecause the user didn't interact with the document first.(用戶還沒有交互,不能調用play)
解決辦法：設置muted屬性為true
|
1
|
<video id="videoPlayer" class="video-js" muted></video> |
關于muted屬性：
- muted 屬性,設置或返回音頻是否應該被靜音（關閉聲音）;屬性的值是true和false;
- muted="false" 表示視頻不用靜音（視頻播放便有聲音），但設置 muted="fasle" 的情況下，視頻無法實現自動播放。
- video 標簽中 muted 的作用： 允許視頻自動播放；（Chrome66版本開始，禁止視頻和音頻的自動播放）
2. 換臺的時候，url已經成功更改，但視頻還是之前的
需得動態設置src才能實現
|
1
2
3
4
5
6
7
|
// 動態設置srcthis.player.src([ { src: nowPlayVideoUrl, type: "application/x-mpegURL" // 告訴videojs,這是一個hls流 } ]); |
3. 找不到mux.js模塊
報錯信息：* 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
|
1
|
yarn add mux.js |
五、 播放rtmp流
播放rtmp流的操作與播放hls流的操作幾乎相同，不同在于：
|
1
2
|
import "videojs-flash"; // 播放rtmp流需要的插件type: 'rtmp/flv', // 這個type值必寫, 告訴videojs這是一個rtmp流視頻 |
以上就是如何在vue中使用video.js 播放m3u8格式的視頻的詳細內容，更多關于vue 使用videojs 播放m3u8格式的視頻的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6923006396896116744
