在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手机微信播发全屏难题的处理方式，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
Copyright © 2002-2020 秀米制作h5_h5如何制作_h5小游戏制作_h5游戏开发_免费的h5制作网站 版权所有 （网站地图） 粤ICP备10235580号