您好,登錄后才能下訂單哦!
對于vue-video-player,從github上找到一段代碼,直接放頁面!可以了,視頻展示出來了!開始下一個功能。。。。
這可能是大部分前端開發(fā)者一貫的思維模式,拿來一個插件,看著demo就做出來了,功能展示正常就OK了,但是一旦出了bug,就會面向百度編程或者面向Google編程!
其實,我也是這樣的,哈哈哈哈.....
廢話不多說,最近在做一個視頻播放的功能,找到vue-video-player插件后,咔咔咔完事,拿著我的愛瘋,完美演繹!但是其他人的國產(chǎn)某牌手機,展示的完全不一樣,打開后自動全屏,而且還有個橫豎屏控制。“這是我寫的頁面?????”,心中一萬只神獸在奔騰。橫豎屏切換后,視頻下的內(nèi)容在全屏模式下展示了出來一部分。
百度了半天,看源碼,還是不知道咋回事。
后來終于找到了解決辦法:
之前:playsinline="playsinline"這里是true寫死的,現(xiàn)在改為計算屬性playsinline()
computed: { player () { return this.$refs.videoPlayer.player }, playsinline () { let ua = navigator.userAgent.toLocaleLowerCase() // x5內(nèi)核 if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) { return false } else { // ios端 return true } } }
添加playsinline()這個計算屬性,原因是在安卓和iOS端微信使用的內(nèi)核不同,所需要的attribute也不同,嘗試后,采用x5內(nèi)核返回false,反之為true
配合jq工具,繼續(xù)添加兩個端所需的屬性
@canplay="onPlayerCanplay($event)" onPlayerCanplay (player) { var ua = navigator.userAgent.toLocaleLowerCase() // x5內(nèi)核 if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) { $('body').find('video').attr('x-webkit-airplay', true).attr('x5-playsinline', true).attr('webkit-playsinline', true).attr('playsinline', true) } else { // ios端 $('body').find('video').attr('webkit-playsinline', 'true').attr('playsinline', 'true') } },
至此,完美解決安卓端微信播放時,橫豎屏的播放樣式錯亂和播放時視頻內(nèi)容未自適應(yīng)。
為兼容ios橫屏將視頻旋轉(zhuǎn)90度
methods: { // 視頻寬高設(shè)置為手機寬高 videoFullScreen() { let width = document.documentElement.clientWidth; let height = document.documentElement.clientHeight; document.getElementById('video_content').style.height = width + 'px'; document.getElementById('video_content').style.width = height + 'px'; }, }
/*視頻旋轉(zhuǎn)*/ .video_box_rotate{ transform rotate(90deg) }
視頻監(jiān)聽播放結(jié)束、進入全屏、退出全屏事件
mounted() {this.videoEnd()}, methods: { videoEnd(){ let video = document.getElementById('video_content'); video.addEventListener('ended', () => { alert('video end') }); }; // 視頻播放結(jié)束 } // 全屏事件 x5videoenterfullscreen // 退出全屏 x5videoexitfullscreen
監(jiān)聽手機橫豎屏
window.addEventListener('orientationchange', function() { // alert(window.orientation); // 這里可以根據(jù)orientation做相應(yīng)的處理 if (window.orientation === -90) { self.iphoneScreenShow = true; } else { self.iphoneScreenShow = false; } }, false);
到此這篇關(guān)于vue-video-player 解決微信自動全屏播放問題(橫豎屏導(dǎo)致樣式錯亂問題)的文章就介紹到這了,更多相關(guān)vue-video-player 自動全屏內(nèi)容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。