在vue中使用dplayer播放hls m3u8格式视频_vue dplayer

Dplayer 官方文档地址

Dplayer官方地址

虽然在vue中有vue-dplayer但却没有对hls进行很好的支持 所以建议还是使用Dplayer

npm i dplayer
npm i hls.js
1
2

在组件中引入

播放m3u8格式的视频需要框选部分 – 建议查看官方文档MSE支持

切换视频

切换视频需要用到switchVideo() api

方便大家复制 部分片段

this.Dp = new Dplayer({
                element:this.$refs.player,
                mutex:false,
                loop:true,
                lang:'zh-cn',
                autoplay:true,
                preload:'none',
                video:{
                    url:'',
                    type: 'customHls',
                    customType: {
                    customHls: function (video, player) {
                        console.log('video',video,player);
                    const hls = new HLS();
                    hls.loadSource(video.src);
                    hls.attachMedia(video);
                    },
                },
                }
            })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20