對於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 自動全屏內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！