vue-dplayer 视频播放组件介绍

目录

前言

安装

使用

1. main.js中全局引入

2. vue 页面引入

3. 属性配置

---

前言

年后开工第一帖，新的一年更要加油鸭~

最近在整理视频播放组件的资料，发现dplayer组件，除了完备视频播放功能之外，还有好多附件的小功能，是一个宝藏组件，大概是我自己工作内容的局限性，我也是第一次用到，记录一下~

先放一张图，感受下dplayer组件的强大吧

安装

npm install vue-dplayer -S

使用

1. main.js中全局引入

// main.js
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/vue-dplayer.css'
 
Vue.use(VueDPlayer);

2. vue 页面引入

3. 属性配置

// 针对部分options属性进行配置
dplayerOptions: {
        theme: '#b7daff',  // 风格颜色，例如播放条，音量条的颜色
        loop: false,  // 是否自动循环
        lang: 'zh-cn',  // 语言，'en', 'zh-cn', 'zh-tw'
        screenshot: true,  // 是否允许截图（按钮），点击可以自动将截图下载到本地
        hotkey: true,  // 是否支持热键，调节音量，播放，暂停等
        preload: 'auto',  // 自动预加载
        volume: 0.7,  // 初始化音量
        logo: require('@/assets/logo.png'),  // 在视频左脚上打一个logo
        video: {
          url: 'http://47.105.206.28/videos/wangkun.mp4', // 播放视频的路径
          quality: [  // 设置多个质量的视频
            {
              name: 'HD',
              url: 'http://47.105.206.28/videos/wangkun.mp4',
              type: 'auto',  // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
            },
            {
              name: 'SD',
              url: 'http://47.105.206.28/videos/wangkun.mp4',
              type: 'auto',
            }
          ],
          defaultQuality: 0,  // 默认是HD
          pic: "https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png",  // 视频封面图片
          thumbnails: require('@/assets/thumbnails.jpg')  // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
        },
        subtitle: {
          url: 'http://www.baidu.com',
          fontSize: '20px',
          bottom: '50%',
        },
        danmaku: {   // 弹幕
          id: '9E2E3368B56CDBB4',
          api: 'https://api.prprpr.me/dplayer/',
          token: 'tokendemo',
          maximum: 1000,
          addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
          user: 'DIYgod',
          bottom: '15%',
          unlimited: true
        },
        contextmenu: [  // 右键菜单
          {
            text: 'custom1',
            link: 'https://www.bilibili.com'
          },
          {
            text: 'custom2',
            click: (player) => {
              console.log(player);
            }
          }
        ],
        highlight: [  // 进度条时间点高亮
          {
            text: '10M',
            time: 600,
          },
          {
            text: '20M',
            time: 1200,
          },
        ],
      }

除了上述代码段介绍的部分内容DPlayerGuide | DPlayer有更详细的介绍，大家可以自行按需使用即可，下面贴一张options的介绍截图叭

 4. 事件配置

Guide | DPlayer事件绑定分为Video events和Play events，我也没逐个研究的，应该可以满足绝大部分场景了，放一下目录感受一下，放个链接，按需使用叭

• Video events

1. abort
2. canplay
3. canplaythrough
4. durationchange
5. emptied
6. ended
7. error
8. loadeddata
9. loadedmetadata
10. loadstart
11. mozaudioavailable
12. pause
13. play
14. playing
15. progress
16. ratechange
17. seeked
18. seeking
19. stalled
20. suspend
21. timeupdate
22. volumechange
23. waiting

• Player events

1. screenshot
2. thumbnails_show
3. thumbnails_hide
4. danmaku_show
5. danmaku_hide
6. danmaku_clear
7. danmaku_loaded
8. danmaku_send
9. danmaku_opacity
10. contextmenu_show
11. contextmenu_hide
12. notice_show
13. notice_hide
14. quality_start
15. quality_end
16. destroy
17. resize
18. fullscreen
19. fullscreen_cancel
20. webfullscreen
21. webfullscreen_cancel
22. subtitle_show
23. subtitle_hide
24. subtitle_change

放一张效果图吧，配合前言截图

最后，总之感觉比较厉害了，初步认识，一起学习