Dplayer是一款上手简单,功能强大的HTML5视频播放器,我们可以使用它,快速在普通HTML、Vue、React中实现视频播放的功能需求。Dplayer同时也提供了目前各大视频站都在使用的弹幕功能,让我们的视频功能更加丰富有趣。下面小千分享如何使用Dplayer在Vue3中实现视频播放及弹幕功能。
一、安装
使用npm
npm i dplayer -S
使用yarn
yarn add dplayer
二、在Vue3组件中,准备一个ref容器
< div ref=“videoRef” class=“player” />
三、在setup中获取绑定ref
这里我们需要用到vue3提供的ref方法
< script lang=“ts”>import { defineComponent,ref } from 'vue’export default defineComponent({ setup () { const videoRef = ref() // 获取视频容器 //此处我们可以进行播放器的初始化 return { videoRef } }})
四、使用Dplayer做视频对象的初始化
当我们在setup中采用ref拿到视频容器节点之后,就可以调用Dplayer来实例化一个视频播放对象
< script lang=“ts”>import { defineComponent,ref } from 'vue’import Dplayer from 'dplayer’export default defineComponent({ setup () { const videoRef = r