vue-video-player,通過自定義按鈕元件實現全屏切換效果

最近公司的產品上線，一些高階功能在基礎版本中不對使用者開發，通過視訊的形式展示。

產品開發用的是 vue, 經同事介紹使用了 vue-video-player 視訊播放外掛，通過 demo案例很快實現了視訊播放效果

<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>
複製程式碼

老闆看了之後說: '不需要全屏切換,不需要讓使用者看的那麼仔細',

通過配置項 controlBar: {fullscreenToggle: false},關閉全屏切換後，由於視訊標清、展示區域大小 483px X 303px,根本看不清視訊裡內容，老闆又說："實現全屏不鋪滿整個螢幕，而是通過固定大小的彈出層展示"

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

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

// 需要在 events 中指定全屏切換事件，不然無法監聽
data () {
    return {
        videoDialogVisible: false, // 控制彈出層
        events: ['fullscreenchange']
    }
},
methods: {
    ...
    onPlayerFullScreenchange (player) {
        player.exitFullscreen()  //強制退出全屏，恢復正常大小
        this.videoDialogVisible = true
    }
    ...
}
複製程式碼

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

沒辦法，繼續想辦法，在該外掛 GitHub 庫中，有網友提過相關 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 中指定自定義按鈕樣式
<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>
複製程式碼

自定義的按鈕圖示用的還是預設的 全屏圖示，接著得實現按鈕的點選事件

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

onCustombuttonClick () {
    let _time = this.$refs.videoPlayer1.player.currentTime() //已播放時長
    this.$refs.videoPlayer2.player.currentTime(_time)
    this.$refs.videoPlayer2.player.play()
}
複製程式碼

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