vue-video-player中怎么通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果,針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
愛輝網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,愛輝網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為愛輝1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢,請找那個(gè)售后服務(wù)好的愛輝做網(wǎng)站的公司定做!
老板看了之后說: '不需要全屏切換,不需要讓用戶看的那么仔細(xì)',
通過配置項(xiàng) controlBar: {fullscreenToggle: false},
關(guān)閉全屏切換后,由于視頻標(biāo)清、展示區(qū)域大小 483px X 303px,根本看不清視頻里內(nèi)容,老板又說:"實(shí)現(xiàn)全屏不鋪滿整個(gè)屏幕,而是通過固定大小的彈出層展示"
首先想到的是: 開啟全屏切換,監(jiān)聽全屏切換的事件,在事件中強(qiáng)制退出全屏,顯示固定大小的彈出層
// 需要在 events 中指定全屏切換事件,不然無法監(jiān)聽 data () { return { videoDialogVisible: false, // 控制彈出層 events: ['fullscreenchange'] } }, methods: { ... onPlayerFullScreenchange (player) { player.exitFullscreen() //強(qiáng)制退出全屏,恢復(fù)正常大小 this.videoDialogVisible = true } ... }
這種辦法,雖然能實(shí)現(xiàn),但在強(qiáng)制退出全屏那一下,整個(gè)頁面會(huì)跳一下,碰到網(wǎng)速慢,或電腦卡的情況,效果更差...
沒辦法,繼續(xù)想辦法,在該插件 GitHub 庫中,有網(wǎng)友提過相關(guān) issues , 通過 注冊一個(gè)自定義按鈕組件,添加到播放器的 controlBar中,替換默認(rèn)的全屏切換按鈕
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: () => { // 綁定點(diǎn)擊事件 }, 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 中指定自定義按鈕樣式
自定義的按鈕圖標(biāo)用的還是默認(rèn)的全屏圖標(biāo),接著得實(shí)現(xiàn)按鈕的點(diǎn)擊事件
頁面和彈出層中分別是倆個(gè) 播放器實(shí)例 videoPlayer1, videoPlayer2,需要考慮到的是:當(dāng)自定義切換事件觸發(fā)后,倆個(gè)播放器的同步( videoPlayer1播放了10s, 全屏切換后,videoPlayer2得從 10s 繼續(xù)播放,而不是從頭播放 )
onCustombuttonClick () { let _time = this.$refs.videoPlayer1.player.currentTime() //已播放時(shí)長 this.$refs.videoPlayer2.player.currentTime(_time) this.$refs.videoPlayer2.player.play() }
同理:關(guān)閉彈出層后, 也得把 videoPlayer2 的播放時(shí)長 賦值給 videoPlayer1,此處是通過 監(jiān)聽彈出層顯示、隱藏等事件來實(shí)現(xiàn)
關(guān)于vue-video-player中怎么通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。