vue-dplayer 視頻播放器實例代碼
官網(wǎng)
示例
如果默認(rèn) options 中沒有視頻鏈接,之后設(shè)置視頻鏈接時,直接通過 this.options.video.url = videoPath 是無效的
需要先獲取到播放器的實例 this.$refs.player.dp ,然后通過 switchVideo() 對 url 進(jìn)行修改
<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 + echarts實現(xiàn)中國省份地圖點擊聯(lián)動
這篇文章主要介紹了vue + echarts實現(xiàn)中國地圖省份點擊聯(lián)動,需要的朋友可以參考下2022-04-04詳解關(guān)于element級聯(lián)選擇器數(shù)據(jù)回顯問題
這篇文章主要介紹了詳解關(guān)于element級聯(lián)選擇器數(shù)據(jù)回顯問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法
這篇文章主要介紹了vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03VUE+Express+MongoDB前后端分離實現(xiàn)一個便簽墻
這篇文章主要介紹了VUE+Express+MongoDB前后端分離實現(xiàn)一個便簽墻,需要的朋友可以參考下2021-04-04vue基于element-ui的三級CheckBox復(fù)選框功能的實現(xiàn)代碼
最近vue項目需要用到三級CheckBox復(fù)選框,需要實現(xiàn)全選反選不確定三種狀態(tài)。這篇文章主要介紹了vue基于element-ui的三級CheckBox復(fù)選框功能的實現(xiàn)方法,需要的朋友可以參考下2018-10-10vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)實例教程(setup)
在前端開發(fā)中往往會遇到頁面需要實時刷新數(shù)據(jù)的情況,給用戶最新的數(shù)據(jù)展示,這篇文章主要給大家介紹了關(guān)于vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)(setup)的相關(guān)資料,需要的朋友可以參考下2022-09-09