先安裝DPlayer

npm install dplayer --save

寫一個(gè)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', // 風(fēng)格顏色，例如播放條，音量條的顏色
			// loop: false, // 是否自動(dòng)循環(huán)
			lang: 'zh-cn', // 語(yǔ)言，'en', 'zh-cn', 'zh-tw'
			hotkey: true, // 是否支持熱鍵，調(diào)節(jié)音量，播放，暫停等
			preload: 'auto', // 自動(dòng)預(yù)加載
			mutex: true,
			video: {
				url: '', // 播放視頻的路徑
				defaultQuality: 0, // 默認(rèn)是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>

其他詳細(xì)控件事件請(qǐng)看官方文檔：指南 | DPlayer

需要播放視頻頁(yè)面引用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補(bǔ)充：

dplayer有一個(gè)網(wǎng)頁(yè)全屏(webfullscreen)的按鈕(如下圖)，跟全屏作用差不多，但是！?。?一旦按了這個(gè)按鈕，點(diǎn)擊瀏覽器的返回按鈕，返回頁(yè)面滾動(dòng)條會(huì)消失，導(dǎo)致頁(yè)面不能滑動(dòng)，所以為了避免這一現(xiàn)象，可以東巴網(wǎng)頁(yè)全屏這個(gè)按鈕給隱藏掉，官方文檔沒有給按鈕綁定消失事件，所以可以從css去給它隱藏掉，如下：

/deep/ .dplayer-full {

? .dplayer-full-in-icon {

? ? display: none !important;

? }

}

這樣就能完美解決啦

文章來源地址http://www.zghlxwxcb.cn/news/detail-518553.html

到了這里，關(guān)于vue引用DPlayer播放器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！