vue-video-player中怎么通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果

vue-video-player中怎么通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

愛輝網(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)站制作要多少錢，請找那個售后服務(wù)好的愛輝做網(wǎng)站的公司定做！

<video-player
 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)">
</video-player>

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

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

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

<video-player
 ...
 :events="events"
 @fullscreenchange="onPlayerFullScreenchange($event)"
 ...
>
</video-player>

// 需要在 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)制退出全屏那一下，整個頁面會跳一下，碰到網(wǎng)速慢，或電腦卡的情況，效果更差...

沒辦法，繼續(xù)想辦法，在該插件 GitHub 庫中，有網(wǎng)友提過相關(guān) issues , 通過 注冊一個自定義按鈕組件，添加到播放器的 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 中指定自定義按鈕樣式
<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;
   }
  }
 }
}
</style>

自定義的按鈕圖標(biāo)用的還是默認(rèn)的全屏圖標(biāo)，接著得實(shí)現(xiàn)按鈕的點(diǎn)擊事件

頁面和彈出層中分別是倆個 播放器實(shí)例 videoPlayer1， videoPlayer2，需要考慮到的是：當(dāng)自定義切換事件觸發(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()
}

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

 

關(guān)于vue-video-player中怎么通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

當(dāng)前標(biāo)題：vue-video-player中怎么通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果
標(biāo)題路徑：http://muchs.cn/article42/isjcec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、ChatGPT、網(wǎng)站設(shè)計(jì)公司、做網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)