vue-dplayer 视频播放组件介绍

目录

前言

安装

使用

1. main.js中全局引入

2. vue 页面引入

3. 属性配置


前言

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

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

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

vue-dplayer 视频播放组件介绍_第1张图片

安装

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的介绍截图叭

vue-dplayer 视频播放组件介绍_第2张图片

 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

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

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

你可能感兴趣的:(vue.js,音视频,前端)