欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年08月29日 11:42:12   作者:Alone1469546971808  
這篇文章主要介紹了vue-video-player,通過自定義按鈕組件實現全屏切換效果,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下

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

產品開發(fā)用的是 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}, 關閉全屏切換后,由于視頻標清、展示區(qū)域大小 483px X 303px,根本看不清視頻里內容,老板又說:"實現全屏不鋪滿整個屏幕,而是通過固定大小的彈出層展示"

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

<video-player
 ...
 :events="events"
 @fullscreenchange="onPlayerFullScreenchange($event)"
 ...
>
</video-player>
// 需要在 events 中指定全屏切換事件,不然無法監(jiān)聽
data () {
 return {
  videoDialogVisible: false, // 控制彈出層
  events: ['fullscreenchange']
 }
},
methods: {
 ...
 onPlayerFullScreenchange (player) {
  player.exitFullscreen() //強制退出全屏,恢復正常大小
  this.videoDialogVisible = true
 }
 ...
}

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

沒辦法,繼續(xù)想辦法,在該插件 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,需要考慮到的是:當自定義切換事件觸發(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)聽彈出層顯示、隱藏等事件來實現

 

總結

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

相關文章

  • Vue學習筆記進階篇之單元素過度

    Vue學習筆記進階篇之單元素過度

    這篇文章主要介紹了Vue學習筆記進階篇之單元素過度,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • vue3點擊出現彈窗后背景變暗且不可操作的實現代碼

    vue3點擊出現彈窗后背景變暗且不可操作的實現代碼

    這篇文章主要介紹了vue3點擊出現彈窗后背景變暗且不可操作的實現代碼,本文通過實例代碼圖文相結合給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • 解決Vue的組件屬性this不存在問題

    解決Vue的組件屬性this不存在問題

    這篇文章主要介紹了解決Vue的組件屬性this不存在問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-01-01
  • Vue用v-for給src屬性賦值的方法

    Vue用v-for給src屬性賦值的方法

    下面小編就為大家分享一篇Vue用v-for給src屬性賦值的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Vue監(jiān)視數據的原理詳解

    Vue監(jiān)視數據的原理詳解

    這篇文章主要為大家詳細介紹了Vue監(jiān)視數據的原理,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • vuex?Mutations同步Actions異步原理解析

    vuex?Mutations同步Actions異步原理解析

    這篇文章主要為大家介紹了vuex?Mutations同步Actions異步原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • Vite性能優(yōu)化之分包策略的實現

    Vite性能優(yōu)化之分包策略的實現

    本文主要介紹了Vite性能優(yōu)化之分包策略的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-05-05
  • vue3渲染函數(h函數)的變更剖析

    vue3渲染函數(h函數)的變更剖析

    這篇文章主要介紹了vue3渲染函數(h函數)的變化,文中給大家介紹了h函數的三個參數詳細說明及vue3 h函數-綁定事件,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-10-10
  • 一篇文章總結Vue3.2語法糖使用

    一篇文章總結Vue3.2語法糖使用

    Vue3.2(21年8月10日)相比于Vue3新增了語法糖,減少了代碼冗余,下面這篇文章主要給大家介紹了關于Vue3.2語法糖使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • Element-Plus實現動態(tài)渲染圖標的示例代碼

    Element-Plus實現動態(tài)渲染圖標的示例代碼

    在Element-Plus中,我們可以使用component標簽來動態(tài)渲染組件,本文主要介紹了Element-Plus?實現動態(tài)渲染圖標教程,具有一定的參考價值,感興趣的可以了解一下
    2024-03-03

最新評論