vue引用DPlayer播放器-Toy模板网

这篇具有很好参考价值的文章主要介绍了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, // 默认是HD
				pic: '', // 视频封面图片
			},
		})
	},
	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,JS,vue.js,javascript,音视频文章来源地址https://www.toymoban.com/news/detail-518553.html