vue-dplayer 視頻播放器實例代碼
更新時間：2019年11月08日 08:38:25 作者：asing1elife
今天小編就為大家分享一篇vue-dplayer 視頻播放器實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
官網
示例
如果默認 options 中沒有視頻鏈接，之后設置視頻鏈接時，直接通過 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: {
// 設置視頻播放路徑
_setVideoUrl (url) {
this.player.switchVideo({
url: url
})
}
},
components: {
dPlayer
}
}
</script>
相關文章
這篇文章主要為大家介紹了 Tree組件搜索過濾功能實現干貨詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue + echarts實現中國地圖省份點擊聯動,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了詳解關于element級聯選擇器數據回顯問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue實現lodop打印功能的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
vue使用el-upload上傳文件及Feign服務間傳遞文件的方法
這篇文章主要介紹了vue使用el-upload上傳文件及Feign服務間傳遞文件的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了Vue一個案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項目中使用遞歸組件，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
VUE+Express+MongoDB前后端分離實現一個便簽墻
這篇文章主要介紹了VUE+Express+MongoDB前后端分離實現一個便簽墻,需要的朋友可以參考下2021-04-04
vue基于element-ui的三級CheckBox復選框功能的實現代碼
最近vue項目需要用到三級CheckBox復選框，需要實現全選反選不確定三種狀態(tài)。這篇文章主要介紹了vue基于element-ui的三級CheckBox復選框功能的實現方法,需要的朋友可以參考下2018-10-10
vue3使用vuex實現頁面實時更新數據實例教程(setup)
在前端開發(fā)中往往會遇到頁面需要實時刷新數據的情況,給用戶最新的數據展示,這篇文章主要給大家介紹了關于vue3使用vuex實現頁面實時更新數據(setup)的相關資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vxe-table如何在單元格中渲染簡單的餅圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09