vue-video-player 解決微信自動(dòng)全屏播放問(wèn)題(橫豎屏導(dǎo)致樣式錯(cuò)亂問(wèn)題)

更新時(shí)間：2020年02月25日 10:02:01 作者：imwkey

這篇文章主要介紹了vue-video-player 解決微信自動(dòng)全屏播放問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

對(duì)于vue-video-player，從github上找到一段代碼，直接放頁(yè)面！可以了，視頻展示出來(lái)了！開(kāi)始下一個(gè)功能。。。。

這可能是大部分前端開(kāi)發(fā)者一貫的思維模式，拿來(lái)一個(gè)插件，看著demo就做出來(lái)了，功能展示正常就OK了，但是一旦出了bug，就會(huì)面向百度編程或者面向Google編程！

其實(shí)，我也是這樣的，哈哈哈哈.....

廢話不多說(shuō)，最近在做一個(gè)視頻播放的功能，找到vue-video-player插件后，咔咔咔完事，拿著我的愛(ài)瘋，完美演繹！但是其他人的國(guó)產(chǎn)某牌手機(jī)，展示的完全不一樣，打開(kāi)后自動(dòng)全屏，而且還有個(gè)橫豎屏控制。“這是我寫(xiě)的頁(yè)面？？？？？”，心中一萬(wàn)只神獸在奔騰。橫豎屏切換后，視頻下的內(nèi)容在全屏模式下展示了出來(lái)一部分。

百度了半天，看源碼，還是不知道咋回事。

后來(lái)終于找到了解決辦法：

之前:playsinline="playsinline"這里是true寫(xiě)死的,現(xiàn)在改為計(jì)算屬性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()這個(gè)計(jì)算屬性,原因是在安卓和iOS端微信使用的內(nèi)核不同,所需要的attribute也不同,嘗試后,采用x5內(nèi)核返回false,反之為true

配合jq工具,繼續(xù)添加兩個(gè)端所需的屬性

@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')
   }
  },

至此，完美解決安卓端微信播放時(shí)，橫豎屏的播放樣式錯(cuò)亂和播放時(shí)視頻內(nèi)容未自適應(yīng)。

為兼容ios橫屏將視頻旋轉(zhuǎn)90度

methods: {
　　　　// 視頻寬高設(shè)置為手機(jī)寬高
    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)聽(tīng)播放結(jié)束、進(jìn)入全屏、退出全屏事件

mounted() {this.videoEnd()},
methods: {
  videoEnd(){
　　　　　　let video = document.getElementById('video_content');
　　　　　　video.addEventListener('ended', () => {
　　　　　　　　alert('video end')
　　　　　　});

　　}; // 視頻播放結(jié)束
}
// 全屏事件 x5videoenterfullscreen
// 退出全屏 x5videoexitfullscreen

監(jiān)聽(tīng)手機(jī)橫豎屏

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òng)全屏播放問(wèn)題(橫豎屏導(dǎo)致樣式錯(cuò)亂問(wèn)題)的文章就介紹到這了,更多相關(guān)vue-video-player 自動(dòng)全屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: