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