vue3：Dplayer 使用

城南已开979

已于 2024-02-28 11:51:42 修改

阅读量2.6k

点赞数 22

分类专栏：视频播放文章标签： vue.js 前端音视频

于 2024-01-13 11:30:42 首次发布

本文链接：https://blog.csdn.net/weixin_66948502/article/details/135567409

版权

视频播放专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Dplayer是一款上手简单，功能强大的HTML5视频播放器，我们可以使用它，快速在普通HTML、Vue、React中实现视频播放的功能需求。Dplayer同时也提供了目前各大视频站都在使用的弹幕功能，让我们的视频功能更加丰富有趣。下面小千分享如何使用Dplayer在Vue3中实现视频播放及弹幕功能。

1.安装

使用npm

npm i dplayer -S

使用yarn

yarn add dplayer

2.vue3使用

import Hls from 'hls.js'  //用于播放hlv格式
import Flv from 'flv.js'  //用于播放m3u8格式
import DPlayer from 'dplayer'
/*
npm i dplayer -S // 视频播放器插件
npm i hls.js -S  // 播放hls流插件
npm i flv.js -S  // 播放flv流插件
*/


<div id="dplayer" class="dplayer video-box"></div>


const loadVideo=()=>{
   const dp = new DPlayer({
        container: document.getElementById('player'), //播放器容器元素
        autoplay: false, //是否自动播放
        live: false, //是否直播
        theme: '#b7daff', //主题色 底部进度条相关颜色
        loop: false, //是否循环播放
        lang: 'zh-cn', //语言
        screenshot: true, //开启截图，如果开启，视频和视频封面需要允许跨域
        hotkey: true, //开启热键，支持快进、快退、音量控制、播放暂停
        preload: 'auto';, //视频预加载，可选值: 'none', 'metadata', 'auto'
        volume: 0, //初始化音量
        playbackSpeed: [0.5, 1, 2, 4, 8], //播放速度
        mutex: false, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        preventClickToggle: false, //阻止点击播放器时候自动切换播放/暂停
        logo: 'logo.png', //在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
        video: {
          pic: '', // 视频封面
          url: '', //视频链接
          thumbnails:'',//视频缩略图，可以使用 DPlayer-thumbnails生成
          type: 'auto', //可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型,
          customType: {
            //自定义播放类型文件《type需要设置为'customHls'》
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            },
            //自定义播放类型文件《type需要设置为'customFlv'》
            customFlv: function (video, player) {
              const flvPlayer = Flv.createPlayer({
                type: 'flv',
                url: video.src,
              })
              flvPlayer.attachMediaElement(video)
              flvPlayer.load()
            },
          },
        },
      })
      //考虑隐私问题，初始化时把音量设为0,才可自动播放
      //dp.volume(percentage: number, nostorage: boolean, nonotice: boolean): 设置视频音量
      dp.volume(0, true, true) 
      //视频组件加载完成后自动播放
      dp.on('loadedmetadata', function () {
        dp.play()
      })
      //视频流出问题时触发
      dp.on('error', function () {
        if (document.getElementById('player')) {
          //当前时间＋1
          let time = Number(Math.round(dp.video.currentTime + 1))
          //重新加载视频
          loadVideo()
          //跳转到更新后的时间
          dp.seek(time)
        }
      })
}
//由于不能通过设置参数去禁用底部操作按钮只能靠css实现
<style lang="scss" scoped>
.video-box {
  width: 100%;
  height: 100%;
}
// 禁用视频右键菜单
:deep(.dplayer-menu,
.dplayer-mask) {
  display: none !important;
}
// //隐藏底部操作栏
// :deep(.dplayer-controller) {
//   display: none;
// }
// //隐藏底部操作栏动画
// :deep(.dplayer-controller-mask) {
//   display: none;
// }
</style>

3.html使用

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="dist/DPlayer.min.js"></script>


var dp = new DPlayer({
    element: document.getElementById('player1'),                       
        // 可选，player元素
    autoplay: false,                                                   
        // 可选，自动播放视频，不支持移动浏览器
    theme: '#FADFA3',                                                  
        // 可选，主题颜色，默认: #b7daff
    loop: true,                                                        
        // 可选，循环播放音乐，默认：true
    lang: 'zh',                                                        
        // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator language
    screenshot: true,                                                  
        // 可选，启用截图功能，默认值：false，
        // 注意：如果设置为 true，视频和视频截图必须启用跨域
    hotkey: true,                                                      
        // 可选，绑定热键，包括左右键和空格，默认值：true
    preload: 'auto',                                                  
         // 可选，预加载的方式可以是'none''metadata''auto'，默认值：'auto'
    video: {                                                           
        // 必需，视频信息
        url: '若能绽放光芒.mp4',                                         
            // 必填，视频网址
        pic: '若能绽放光芒.png'                                          
            // 可选，视频截图
    },
    danmaku: {                                                         
        // 可选，显示弹幕，忽略此选项以隐藏弹幕
        id: '9E2E3368B56CDBB4',                                        
            // 必需，弹幕 id，注意：它必须是唯一的，不能在你的新播放器中
               使用这些： `https://api.prprpr.me/dplayer/list`
        api: 'https://api.prprpr.me/dplayer/',                             
            // 必需，弹幕 api
        token: 'tokendemo',                                            
            // 可选，api 的弹幕令牌
        maximum: 1000,                                                 
            // 可选，最大数量的弹幕
        addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142']   
            // 可选的，额外的弹幕，参见：`Bilibili弹幕支持`
    }
});

事件绑定

dp.on（event, handler）事件：

play: DPlayer 开始播放时触发 
pause: DPlayer 暂停时触发 
canplay: 在有足够的数据可以播放时触发 
playing: DPlayer 播放时定期触发 
ended: DPlayer 结束时触发 error: 发生错误时触发

HLS支持（实时视频，M3U8格式）

它需要 hls.js 库，并且应该在 DPlayer.min.js 之前加载。实时弹幕尚不支持。

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/hls.min.js"></script>
<script src="dist/DPlayer.min.js"></script>
 
<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.m3u8'
// ...
}
});
</script>

FLV支持

它需要 flv.js 库，并且应该在 DPlayer.min.js 之前加载。

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/flv.min.js"></script>
<script src="dist/DPlayer.min.js"></script>
 
<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.flv'
// ...
}
});
</script>

使用bundler模块使用模块管理器:

var DPlayer = require('DPlayer'); 
var dp = new DPlayer(option);

参数

名称	默认值	描述
container	document.querySelector('.dplayer')	播放器容器元素
live	false	开启直播模式
autoplay	false	视频自动播放
theme	'#b7daff'	主题色
loop	false	视频循环播放
lang	navigator.language.toLowerCase()	可选值: 'en', 'zh-cn', 'zh-tw'
screenshot	false	开启截图，如果开启，视频和视频封面需要开启跨域
hotkey	true	开启热键
preload	'auto'	预加载，可选值: 'none', 'metadata', 'auto'
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
logo	-	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
apiBackend	-	自定义获取和发送弹幕行为，详情
video	-	视频信息
video.url	-	视频链接
video.pic	-	视频封面
video.thumbnails	-	视频缩略图，可以使用 DPlayer-thumbnails 生成
video.type	'auto'	可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型
video.customType	-	自定义类型
subtitle	-	外挂字幕
subtitle.url	required	字幕链接
subtitle.type	'webvtt'	字幕类型，可选值: 'webvtt', 'ass'，目前只支持 webvtt
subtitle.fontSize	'20px'	字幕字号
subtitle.bottom	'40px'	字幕距离播放器底部的距离，取值形如: '10px' '10%'
subtitle.color	'#fff'	字幕颜色
danmaku	-	显示弹幕
danmaku.id	required	弹幕池id，必须唯一
danmaku.api	required	-
danmaku.token	-	弹幕后端验证 token
danmaku.maximum	-	弹幕最大数量
danmaku.addition	-	额外外挂弹幕
danmaku.user	'DIYgod'	弹幕用户名
danmaku.bottom	-	弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'
danmaku.unlimited	false	海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
contextmenu	[]	自定义右键菜单
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器

其他类似工具: DPlayer, videos.js, ckplayer, vue-DPlayer, vue-video-player

DPlayer 网址

Dplayer-Github项目地址

城南已开979

关注

22
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
vue3：Dplayer 使用

Dplayer是一款上手简单，功能强大的HTML5视频播放器，我们可以使用它，快速在普通HTML、Vue、React中实现视频播放的功能需求。Dplayer同时也提供了目前各大视频站都在使用的弹幕功能，让我们的视频功能更加丰富有趣。下面小千分享如何使用Dplayer在Vue3中实现视频播放及弹幕功能。
复制链接

扫一扫