vue3使用dplayer视频播放器

1.下载对应依赖

npm i dplayer -S
npm i hls.js -s

2.封装对应组件


<template><div ref="videoRef"></div>
</template><script setup>
import DPlayer from 'dplayer'
import Hls from 'hls.js';
import { ref, reactive, onBeforeUnmount, onMounted } from 'vue'const videoRef = ref()
const state = reactive({instance: null
})const props = defineProps({// 是否自动播放autoplay: {type: Boolean,default: false},// 主题色theme: {type: String,default: '#0093ff'},// 视频是否循环播放loop: {type: Boolean,default: true},// 语言(可选值: 'en', 'zh-cn', 'zh-tw')lang: {type: String,default: 'zh-cn'},// 是否开启截图(如果开启，视频和视频封面需要允许跨域)screenshot: {type: Boolean,default: false},// 是否开启热键hotkey: {type: Boolean,default: true},// 视频是否预加载(可选值: 'none', 'metadata', 'auto')preload: {type: String,default: 'auto'},// 默认音量volume: {type: Number,default: 0.7},// 可选的播放速率，可以设置成自定义的数组playbackSpeed: {type: Array,default: [0.5, 0.75, 1, 1.25, 1.5, 2]},// 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置logo: {type: String,default: 'http://jiuaibuni.top/wp-content/uploads/2020/12/logo.png'},// 视频信息video: {type: Object,default: {url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8', //视频地址type: 'customHls',customType: {customHls: function (video, player) {const hls = new Hls(); //实例化Hls  用于解析m3u8hls.loadSource(video.src);hls.attachMedia(video);}}},},// 外挂字幕subtitle: {type: Object,default: {}},// 显示弹幕danmaku: {type: Object,default: {}},// 自定义右键菜单contextmenu: {type: Array,default: []},// 自定义进度条提示点highlight: {type: Array,default: []},// 阻止多个播放器同时播放，当前播放器播放时暂停其他播放器mutex: {type: Boolean,default: true}
})
onMounted(() => {let player = {container: videoRef.value,autoplay: props.autoplay,theme: props.theme,loop: props.loop,lang: props.lang,screenshot: props.screenshot,hotkey: props.hotkey,preload: props.preload,volume: props.volume,playbackSpeed: props.playbackSpeed,logo: props.logo,video: props.video,contextmenu: props.contextmenu,highlight: props.highlight,mutex: props.mutex,}if (props.subtitle.url) {player.subtitle = props.subtitle}if (props.danmaku) {player.danmaku = props.danmaku}console.log(player);state.instance = new DPlayer(player)
})
// 销毁
onBeforeUnmount(() => {state.instance.destroy()
})</script><style lang='scss' scoped>
</style>

https://dplayer.diygod.dev/zh/guide.html#special-thanks 官方文档地址

3.调用

<template><dplayer :video="dplayerObj.video" :danmaku="dplayerObj.danmaku" :contextmenu="dplayerObj.contextmenu":highlight="dplayerObj.highlight" />
</template>
<script setup>
import dplayer from '@/components/Dplayer/';
import Hls from 'hls.js';
import { ref, reactive } from 'vue'
const dplayerObj = reactive({video: {url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8', //视频地址type: 'customHls',customType: {customHls: function (video, player) {const hls = new Hls(); //实例化Hls  用于解析m3u8hls.loadSource(video.src);hls.attachMedia(video);}}},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,speedRate: 0.5,},contextmenu: [{text: 'custom1',link: 'https://github.com/DIYgod/DPlayer',},{text: 'custom2',click: (player) => {console.log(player);},},],highlight: [{time: 20,text: '这是第 20 秒',},{time: 120,text: '这是 2 分钟',},],
})
</script>

4.调用弹幕api跨域问题

首先去dplayer官网生态里把弹幕后台下载下来

然后阅读B站up的项目启动文章

注意get文件的返回字段data不用改成danmaku

vue3使用dplayer视频播放器相关推荐

vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
DPlayer视频播放器使用方法介绍
最近在项目开发中需要在Web页面中嵌入视频播放器,并且通过监听一些事件来记录访问者对于视频的一些操作,在此记录使用方法,方便查询使用 (查看演示 http://www.aikannet.com) 1. ...
DPlayer视频播放器使用方法
最近在项目开发中需要在Web页面中嵌入视频播放器,并且通过监听一些事件来记录访问者对于视频的一些操作,在此记录使用方法,方便查询使用 1.在页面中加载库文件<link rel="sty ...
vue中安装和使用Dplayer视频播放器
1.下载 npm下载 npm install dplayer - s npm i hls.js -s yarn下载 yarn add dplayer yarn add hls.js 2.使用 < ...
vue3 集成西瓜视频播放器xgplayer
西瓜视频播放器官网地址:https://v2.h5player.bytedance.com/ 第一步:安装最新稳定版 $ npm install xgplayer vue页面使用 <templa ...
【Dplayer视频播放器】一款好用的视频播放器
使用安装 npm install dplayer --save 使用 <div class="card"><div id="dplayer" ...
DPlayer – H5视频播放器使用方法介绍
DPlayer 是一个支持弹幕的 HTML5 视频播放器.支持 Bilibili 视频和 danmaku,支持HLS,FLV,MPEG DASH,WebTorrent以及其他视频格式,支持截屏.热键. ...
springboot + vue3实现视频播放Demo（video.js Vue3-video-play视频播放器）
文章目录学习链接前言 ffmpeg 安装ffmpeg 配置环境变量分割视频文件后台配置 WebConfig 前端代码 video.js示例安装依赖视频播放组件效果 Vue3-video- ...

vue3使用dplayer视频播放器

1.下载对应依赖

2.封装对应组件

3.调用

4.调用弹幕api跨域问题

vue3使用dplayer视频播放器相关推荐

最新文章

热门文章