vue-video-player 通過自定義按鈕組件實現全屏切換效果【推薦】

2019-11-19 13:07:00

字體：大中小

來源：轉載

供稿：網友

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

產品開發用的是 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，此處是通過監聽彈出層顯示、隱藏等事件來實現