vue引用DPlayer播放器

先安装DPlayer

npm install dplayer --save

写一个dplayer组件方便使用

// dplayer.vue<template><div><div id="dplayer" :style="dplayerData.style"></div></div>
</template><script>
import DPlayer from 'dplayer'
export default {name: 'dplayer',props: {dplayerData: Object,},data() {return {}},mounted() {this.dp = new DPlayer({container: document.getElementById('dplayer'),theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色// loop: false, // 是否自动循环lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'hotkey: true, // 是否支持热键，调节音量，播放，暂停等preload: 'auto', // 自动预加载mutex: true,video: {url: '', // 播放视频的路径defaultQuality: 0, // 默认是HDpic: '', // 视频封面图片},})},created() {},methods: {// 切换视频源事件switchVideo(item) {this.dp.switchVideo({url: item.video,pic: item.imgUrl,})},// 暂停事件pause() {this.dp.pause()},},
}
</script><style lang="scss" scoped></style>

其他详细控件事件请看官方文档：指南 | DPlayer

需要播放视频页面引用dplayer.vue组件

<template><div><dplayer ref="dplayer" :dplayerData="dplayerData"></dplayer></div>
</template><script>
import dplayer from '@/components/dplayer'
export default {components: {dplayer,},data() {return {dplayerData: {style:'width:100%;height:672px;position: absolute;bottom: 0;right: 0;',},info: { video: '视频链接', pic: '封面图链接' },}},created() {setTimeout(() => {this.switchVideo()}, 500)},methods: {switchVideo() {this.$refs.dplayer.switchVideo(this.info)},},
}
</script><style lang="scss" scoped></style>

就可以啦！

20220815补充：

dplayer有一个网页全屏(webfullscreen)的按钮(如下图)，跟全屏作用差不多，但是！！！一旦按了这个按钮，点击浏览器的返回按钮，返回页面滚动条会消失，导致页面不能滑动，所以为了避免这一现象，可以东巴网页全屏这个按钮给隐藏掉，官方文档没有给按钮绑定消失事件，所以可以从css去给它隐藏掉，如下：

/deep/ .dplayer-full {

.dplayer-full-in-icon {

display: none !important;

}

}

这样就能完美解决啦

vue引用DPlayer播放器相关推荐

vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
DPlayer播放器本地化P2P解析加速版源码
介绍: dplayer播放器本地化P2P加速版源码,提升P2P加速.共享.记忆播放.拖动快进等功能完整优化版 DPlayer适用于于各种CMS,这个快绝版了,有能力自己修改吧. PC端自动P2P加速, ...
使用腾讯云轻量应用服务器搭建dplayer播放器弹幕服务器
说明 Dplayer播放器就不过多介绍了,不知道的可以查看官方项目地址:点击查看,算是目前国内比较火的视频播放器,貌似很多人喜欢用弹幕功能,而官方提供的弹幕api已经挂了,所以我们想使用的话,要么使用 ...
苹果cms8整合dplayer播放器
一.准备工作已上传CMS8网站模板到空间并能正常打开网站页面二.整合dplayer播放器 1.新建txt文档,将以下代码复制到txt文档中,并将txt文档命名为dplayer.php <ht ...
DPlayer播放器
DPlayer播放器前言今天花了点时间看了一下DPlayer播放器,DPlayer播放器支持弹幕,音量调节,后期的弹幕设置以及放大缩小屏幕等操作,好的一点是比上次那个flv的demo好一点,总感觉 ...
Flutter3引用原生播放器-IOS(Swift)篇
前言由于Flutter项目中需要使用到播放器功能,因此对flutter中各种播放器解决方案进行了一番研究和比对,最后决定还是自己通过Plugin的方法去引用原生播放器符合自己的需求,本篇文章会对各种 ...
Flutter3引用原生播放器-Android篇
接上篇:Flutter3引用原生播放器-IOS(Swift)篇安卓端原生播放器的接入思路与ios基本一致,所以本篇就不废话了,直接上代码: 创建插件VideoViewPlugin实现FlutterP ...
Dplayer播放器插件整合前置广告、暂停广告3.0版本
介绍 1.整合的苹果cmsV10程序,其他程序无效 2.使用的Dplayer播放器,广告设置效果仅支持PC端 3.安卓手机支持显示前置广告,不支持显示暂停广告 4.苹果手机自测,不保证手机端支持前置和 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...

vue引用DPlayer播放器

vue引用DPlayer播放器相关推荐

最新文章

热门文章