最近公司的產品上線，一些高級功能在基礎版本中不對用戶開發(fā)，通過視頻的形式展示。

產品開發(fā)用的是 vue, 經同事介紹使用了vue-video-player視頻播放插件，通過 demo案例很快實現(xiàn)了視頻播放效果

class="vjs-custom-skin"

ref="videoPlayer1"

:options="playerOptions"

:playsinline="true"

:events="events"

@play="onPlayerPlay($event)"

@pause="onPlayerPause($event)"

@ended="onPlayerEnded($event)"

@loadeddata="onPlayerLoadeddata($event)"

@waiting="onPlayerWaiting($event)"

@playing="onPlayerPlaying($event)"

@timeupdate="onPlayerTimeupdate($event)"

@canplay="onPlayerCanplay($event)"

@canplaythrough="onPlayerCanplaythrough($event)"

@ready="playerReadied"

@statechanged="playerStateChanged($event)">

老板看了之后說: '不需要全屏切換,不需要讓用戶看的那么仔細',

通過配置項 controlBar: {fullscreenToggle: false},關閉全屏切換后，由于視頻標清、展示區(qū)域大小 483px X 303px,根本看不清視頻里內容，老板又說："實現(xiàn)全屏不鋪滿整個屏幕，而是通過固定大小的彈出層展示"

首先想到的是： 開啟全屏切換，監(jiān)聽全屏切換的事件，在事件中強制退出全屏，顯示固定大小的彈出層

...

:events="events"

@fullscreenchange="onPlayerFullScreenchange($event)"

...

>

// 需要在 events 中指定全屏切換事件，不然無法監(jiān)聽

data () {

return {

videoDialogVisible: false, // 控制彈出層

events: ['fullscreenchange']

}

},

methods: {

...

onPlayerFullScreenchange (player) {

player.exitFullscreen() //強制退出全屏，恢復正常大小

this.videoDialogVisible = true

}

...

}

這種辦法，雖然能實現(xiàn)，但在強制退出全屏那一下，整個頁面會跳一下，碰到網(wǎng)速慢，或電腦卡的情況，效果更差...

沒辦法，繼續(xù)想辦法，在該插件 GitHub 庫中，有網(wǎng)友提過相關 issues , 通過 注冊一個自定義按鈕組件，添加到播放器的 controlBar中,替換默認的全屏切換按鈕

import * as videojs from 'video.js'

export default {

...

methods: {

...

createMyButton () {

let Button = videojs.getComponent('Button')

let myButton = videojs.extend(Button, {

constructor: function (player, options) {

Button.apply(this, arguments)

this.addClass('fullscreen-enter')

},

handleClick: () => {

// 綁定點擊事件

},

buildCSSClass: function () {

return 'vjs-icon-custombutton vjs-control vjs-button'

}

})

//注冊

videojs.registerComponent('myButton', myButton)

this.$nextTick(() => {

// 添加到controlBar中

this.$refs.videoPlayer1.player.getChild('controlBar').addChild('myButton')

})

}

...

}

}

// 在 style 中指定自定義按鈕樣式

.video-js{

.vjs-control-bar{

.vjs-icon-custombutton {

font-family: VideoJS;

font-weight: normal;

font-style: normal; }

.vjs-icon-custombutton:before {

content: "\f108";

font-size: 1.8em;

line-height: 1.67;

}

}

}

}

自定義的按鈕圖標用的還是默認的全屏圖標，接著得實現(xiàn)按鈕的點擊事件

頁面和彈出層中分別是倆個 播放器實例 videoPlayer1， videoPlayer2，需要考慮到的是：當自定義切換事件觸發(fā)后，倆個播放器的同步( videoPlayer1播放了10s, 全屏切換后，videoPlayer2得從 10s 繼續(xù)播放，而不是從頭播放 )

onCustombuttonClick () {

let _time = this.$refs.videoPlayer1.player.currentTime() //已播放時長

this.$refs.videoPlayer2.player.currentTime(_time)

this.$refs.videoPlayer2.player.play()

}

同理：關閉彈出層后， 也得把 videoPlayer2 的播放時長 賦值給 videoPlayer1，此處是通過 監(jiān)聽彈出層顯示、隱藏等事件來實現(xiàn)

總結

以上所述是小編給大家介紹的vue-video-player 通過自定義按鈕組件實現(xiàn)全屏切換效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

總結

以上是生活随笔為你收集整理的dplayer js控制 自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。