vue-dplayer 视频播放组件介绍

最新推荐文章于 2024-04-26 16:47:03 发布

小菜花29

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1w

点赞数 11

文章标签： vue.js 音视频前端

本文链接：https://blog.csdn.net/jinse29/article/details/122880473

版权

前言

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

最近在整理视频播放组件的资料，发现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 页面引入

<d-player ref="player" :options="dplayerOptions"></d-player>

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