vue-video-player 通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果【推薦】
最近公司的產(chǎn)品上線,一些高級功能在基礎(chǔ)版本中不對用戶開發(fā),通過視頻的形式展示。
產(chǎn)品開發(fā)用的是 vue, 經(jīng)同事介紹使用了vue-video-player 視頻播放插件,通過 demo 案例很快實(shí)現(xiàn)了視頻播放效果
<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ì)',
通過配置項 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)
總結(jié)
以上所述是小編給大家介紹的vue-video-player 通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- vue視頻播放插件vue-video-player的具體使用方法
- 基于vue-video-player自定義播放器的方法
- vue-video-player實(shí)現(xiàn)實(shí)時視頻播放方式(監(jiān)控設(shè)備-rtmp流)
- 詳解vue2.0+vue-video-player實(shí)現(xiàn)hls播放全過程
- 詳解vue-video-player使用心得(兼容m3u8)
- vue-video-player視頻播放器使用配置詳解
- vue使用video插件vue-video-player詳解
- vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程
- vue-video-player 解決微信自動全屏播放問題(橫豎屏導(dǎo)致樣式錯亂問題)
- vue使用vue-video-player插件播放視頻的步驟講解
相關(guān)文章
Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度
這篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08Vite性能優(yōu)化之分包策略的實(shí)現(xiàn)
本文主要介紹了Vite性能優(yōu)化之分包策略的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05Element-Plus實(shí)現(xiàn)動態(tài)渲染圖標(biāo)的示例代碼
在Element-Plus中,我們可以使用component標(biāo)簽來動態(tài)渲染組件,本文主要介紹了Element-Plus?實(shí)現(xiàn)動態(tài)渲染圖標(biāo)教程,具有一定的參考價值,感興趣的可以了解一下2024-03-03