HTML5手机微信播发全屏难题的处理方式

日期:2021-02-24 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

在ios和安卓系统手机上里的手机微信下播发视頻时,会遇到很多难题,比如必须手动式点一下,视頻才会播发,而且视頻会跳出来手机微信框,出現操纵条,假如视頻并不是腾迅视頻,播发结束会出現腾迅视頻的广告宣传消息推送等难题

处理方法:给video标识加1些特性,启用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":特性要求视頻免费下载时显示信息的图象,或在客户点一下播发按钮前显示信息的图象。假如未设定该特性,则应用视頻的第1帧来替代。

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。至于为何同层播发只对安卓系统对外开放,是由于安卓系统不可以像ISO1样局域播发,默认设置的全屏会使得1些页面实际操作被阻止,假如是全屏H5还好,可是做直播间的话,诸如弹幕那样的作用就没法完成了,因此这时候候同层播发的定义就处理了这个难题。但是在检测的全过程中发现,不一样版本号的ISO和安卓系统实际效果略有不一样。

x5-video-orientation:申明播发器适用的方位,可选值landscape 横屏, portraint竖屏。默认设置值portraint。不管是直播间還是全屏H51般全是竖屏播发,可是这个特性必须x5-video-player-type打开H5方式

x5­-video­-player­-fullscreen:全屏设定。它又两个特性值,ture和false,true适用全屏播发,false不适用全屏播发。

实际上,ISO 手机微信访问器是Chrome的核心,有关的特性都适用,也是为何X5同层播发不适用的缘故。安卓系统手机微信访问器是X5核心,1些特性标识例如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: ⑶7.5px;margin-left: ⑷0.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') > ⑴ || u.indexOf('Adr') > ⑴; //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>     

以上所述是网编给大伙儿详细介绍的HTML5手机微信播发全屏难题的处理方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:HTML5完成可放缩数字时钟编码 返回下一篇:没有了