vue-dplayer 視頻播放器實例代碼
更新時間：2019年11月08日 08:38:25 作者：asing1elife
今天小編就為大家分享一篇vue-dplayer 視頻播放器實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
官網(wǎng)
示例
如果默認 options 中沒有視頻鏈接，之后設(shè)置視頻鏈接時，直接通過 this.options.video.url = videoPath 是無效的
需要先獲取到播放器的實例 this.$refs.player.dp ，然后通過 switchVideo() 對 url 進行修改
<template>
<d-player ref="player" :options="options"></d-player>
</template>
<script type="text/ecmascript-6">
import dPlayer from 'vue-dplayer'
import 'vue-dplayer/dist/vue-dplayer.css'
export default {
name: 'in-video',
props: {
source: {
type: String,
default: ''
}
},
data () {
return {
player: null,
options: {
video: {
url: ''
},
contextmenu: [
{}
]
}
}
},
mounted() {
this.player = this.$refs.player.dp
},
created() {
this._setVideoUrl(this.source)
},
methods: {
// 設(shè)置視頻播放路徑
_setVideoUrl (url) {
this.player.switchVideo({
url: url
})
}
},
components: {
dPlayer
}
}
</script>
相關(guān)文章
vue項目實例中用query傳參如何實現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項目實例中用query傳參如何實現(xiàn)跳轉(zhuǎn)效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
下面小編就為大家分享一篇vue中實現(xiàn)移動端的scroll滾動方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設(shè)計和強大的生態(tài)系統(tǒng)成為了越來越多開發(fā)者選擇Vue的原因,在實際項目過程中一個高效的開發(fā)環(huán)境能夠大大提高開發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode搭建vue環(huán)境的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關(guān)于如何基于Vue-cli快速搭建項目的完整步驟，文中通過示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2018-11-11
這篇文章主要為大家詳細介紹了Vue自定義模態(tài)對話框彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要介紹了使用vue制作FullPage頁面滾動效果，詳細的介紹了FullPage頁面的思路和實現(xiàn)，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了vue集成openlayers問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue-element的select下拉框賦值實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家總結(jié)了vue2.0開發(fā)實踐的疑難,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue3中reactive和ref的實現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來和大家詳細講講,希望對大家有所幫助2023-10-10