H5微信播放全屏問題

在ios和安卓手機里的微信下播放視頻時,會遇到不少問題,例如需要手動點擊,視頻才會播放,并且視頻會跳出微信框,出現控制條,如果視頻不是騰訊視頻,播放完畢會出現騰訊視頻的廣告推送等問題

解決辦法:給video標簽加一些屬性,調用h5原生video。


<video  id="videoALL" 
  src="video/01.mp4" 
  poster="images/1.jpg" /*視頻封面*/
  preload="auto" 
  webkit-playsinline="true" /*這個屬性是ios 10中設置可以
                     讓視頻在小窗內播放,也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信瀏覽器支持小窗內播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*啟用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏設置,
                     設置為 true 是防止橫屏*/>
  x5-video-orientation="portraint" /*播放器支付的方向,
                     landscape橫屏,portraint豎屏,默認值為豎屏*/
  style="object-fit:fill"></video>


poster="images/1.jpg":屬性規定視頻下載時顯示的圖像,或者在用戶點擊播放按鈕前顯示的圖像。如果未設置該屬性,則使用視頻的第一幀來代替。

preload="auto" 屬性規定在頁面加載后載入視頻。

webkit-playsinline和playsinline:視頻播放時局域播放,不脫離文檔流 。但是這個屬性比較特別, 需要嵌入網頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效?;瘓浠八?,如果APP不設置,你頁面中加了這標簽也無效,這也就是為什么安卓手機WeChat 播放視頻總是全屏,因為APP不支持playsinline,而ISO的WeChat卻支持。

這里就要補充下,如果是想做全屏直播或者全屏H5體驗的用戶,ISO需要設置刪除 webkit-playsinline 標簽,因為你設置 false 是不支持的 ,安卓則不需要,因為默認全屏。但這時候全屏是有播放控件的,無論你有沒有設置control。 做直播的可能用得著播放控件,但是全屏H5是不需要的,那么去除全屏播放時候的控件,需要以下設置:同層播放。

x-webkit-airplay="allow"暫時無法確切的知道其作用,但是小編猜測,這個屬性應該是使此視頻支持ios的AirPlay功能。使用AirPlay可以直接從使用iOS的設備上的不同位置播放視頻、音樂還有照片文件,也就是說通過AirPlay功能可以實現影音文件的無線播放,當然前提是播放的終端設備也要支持相應的功能。

x5-video-player-type啟用同層H5播放器,就是在視頻全屏的時候,div可以呈現在視頻層上,也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放,播放的時候看似全屏,但是已經除去了control和微信的導航欄,只留下"X"和"<"兩鍵。目前的同層播放器只在Android(包括微信)上生效,暫時不支持iOS。至于為什么同層播放只對安卓開放,是因為安卓不能像ISO一樣局域播放,默認的全屏會使得一些界面操作被阻攔,如果是全屏H5還好,但是做直播的話,諸如彈幕那樣的功能就無法實現了,所以這時候同層播放的概念就解決了這個問題。不過在測試的過程中發現,不同版本的ISO和安卓效果略有不同。

x5-video-orientation聲明播放器支持的方向,可選值landscape 橫屏, portraint豎屏。默認值portraint。無論是直播還是全屏H5一般都是豎屏播放,但是這個屬性需要x5-video-player-type開啟H5模式

x5--video--player--fullscreen全屏設置。它又兩個屬性值,ture和false,true支持全屏播放,false不支持全屏播放。

其實,ISO 微信瀏覽器是Chrome的內核,相關的屬性都支持,也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內核,一些屬性標簽比如playsinline就不支持,所以始終全屏。

還有個問題,在Android的微信里面,就算加上了上面的屬性,還會出現上下有黑邊,不能全屏的問題。

解決辦法:給video加上object-fit: fill;的style屬性。如果還是有黑邊有可能是視頻尺寸不合適。


<div id="videobox">
   <video 
    id="videoALL" 
    src="mp4.mp4" 
    poster="1.jpg" 
    preload="auto" 
    webkit-playsinline="true" 
    playsinline="true" 
    x-webkit-airplay="allow" 
    x5-video-player-type="h5" 
    x5-video-player-fullscreen="true" 
    x5-video-orientation="portraint"
    style="object-fit:fill">
    </video> 

   <div id="btn" onclick="playcontr()"></div></div><div id="videoend"><div id="againbtn" onclick="playcontr()"></div></div>


*{
            padding: 0;
            margin: 0;
        }
    #videobox{position: absolute;width: 100%;height: 100%;background-color: green;background-image: url(1.jpg);background-size: 100% 100%;background-position: top;overflow: hidden;}
    #videoALL{
  height: auto;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: fill;
  display: block;
  background-size: cover;
  overflow: hidden;}
    #btn,#againbtn{width: 81px;height: 75px;position: absolute;top: 50%;left:50%;margin-top: -37.5px;margin-left: -40.5px;background-image: url(btn.png);background-size: 100% 100%;}
    #videoend{position: absolute;background-color: pink;display: none;background-image: url(2.jpg);background-size: cover;background-position: top;}


<script>var videoALL = document.getElementById('videoALL'),
    videobox = document.getElementById('videobox'),
    btn = document.getElementById('btn'),
    videoend =  document.getElementById('videoend');var clientWidth = document.documentElement.clientWidth;var clientHeight = document.documentElement.clientHeight;
videoALL.style.width = clientWidth + 'px';
videoALL.style.height = 'auto';
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);function stylediv(divId){
    divId.style.width = clientWidth + 'px';
    divId.style.height = clientHeight +200+ 'px'; 
}
stylediv(videobox);
stylediv(videoend);var u = navigator.userAgent; 
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 function playcontr(){    if (isAndroid) {
       videoALL.style.width = window.screen.width + 'px';
       videoALL.style.height = window.screen.height + 'px'; 
    }
    videobox.style.display = "block";
    videoALL.play();
    btn.style.display = "none";
    videoend.style.display = "none";
};

videoALL.addEventListener('pause',function(){  
    videoALL.style.width = clientWidth + 'px';
    btn.style.display = "block";
})  

videoALL.addEventListener("ended",function(){
    videoALL.pause();
    videobox.style.display = "none";
    videoend.style.display = "block";
});</script>


來源:csdn

上一篇: html5語義化布局標簽

下一篇: HTML5前端技術之淺見

分享到: 更多
3d组六投注技巧 云南时时官方 重庆时时彩龙虎口诀 好运来计划软件官方网站下载 双色球手机投注方法 开门彩近50期基本走势图 时时彩买单双技巧有规律吗 重庆时时彩开奖视频直播 四人斗地主规则一副牌 通比牛牛攻略 手机版三公游戏赢现金 全天时时彩最准计划 重庆时时三星彩走势图网易 金库娱乐游戏平台 开一个体彩店要多少钱 360时时彩技巧稳赚