nuxt中使用dplayer播放m3u8视频

发布: 2018-10-26 14:31:39标签: vue

nuxt中使用dplayer播放m3u8视频

dplayer是一个很强大的h5视频播放库，有很多直接可以使用的api，支持播放弹幕、字母、流畅度切换等等。中文文档地址：http://dplayer.js.org/#/zh-Hans/?id=%E5%85%A5%E9%97%A8

简单记录nuxt使用dplayer的注意事项

安装

01yarn add dplayer
02
03yarn add hls.js # 播放m3u8需要另外安装这个

复制代码

引入样式

01import 'dplayer/dist/DPlayer.min.css'

复制代码

使用dplayer（服务端渲染需要mounted中引入插件）

01// nuxt服务端不可以直接使用dplayer，可以在mounted的钩子中使用。（mounted只会在客户端触发）
02export default {
03    mounted() {
04        window.Hls = require('hls.js');
05        this.DPlayer = require('dplayer')
06        this.init()
07    },
08    methods: {
09        init() {
10            const dp = new DPlayer({
11                container: this.$refs.dplayer,
12                logo: 'logo.png',
13                 // screenshot: true, // 截图   
14                video: {
15                    // url: 'demo.mp4', // 单清晰度视屏播放
16                    quality: [{ // 多清晰度
17                        name: 'HD',
18                        url: 'demo.m3u8',
19                        type: 'hls'
20                    }, {
21                        name: 'SD',
22                        url: 'demo.mp4',
23                        type: 'normal'
24                    }],
25                    defaultQuality: 0,
26                    pic: 'demo.png',
27                    thumbnails: 'thumbnails.jpg'
28                }
29            });
30        }
31    }
32
33}
34

复制代码

未处理问题

新版谷歌浏览器，封面闪烁后自动显示视频内容，后来设置了图片作为封面，点击主动隐藏图片触发播放