H5微信播放全屏问题

作者:分分快三计划

x5-video-player-type:启用同层H5播放器,正是在录像全屏的时候,div可以展今后录像层上,也是WeChat安卓版特有的本性。同层播放外号也称为沉浸式播放,播放的时候看似全屏,然而已经除去了control和Wechat的导航栏,只留下"X"和"<"两键。这两天的同层播放器只在Android(富含Wechat)上生效,暂且不帮忙iOS。至于何以同层播放只对安卓开放,是因为安卓不可能像ISO相符局域播放,默许的全屏会使得有个别分界面操作被阻挡,借使是全屏H5幸而,不过做直播以来,诸如弹幕这样的效果就不能兑现了,所以那时同层播放的定义就缓和了那一个难点。可是在测量检验的长河中发觉,分化版本的ISO和安卓效果略有差别。

poster="images/1.jpg":属性规定录像下载时呈现的图像,或许在客商点击播放按键前展示的图像。假使未安装该属性,则接纳录制的率先帧来替代。

<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>     

还应该有个难题,在Android的Wechat里面,尽管加上了上边的性质,还有或者会冒出前后有黑边,不可能全屏的难题。

在ios和安卓手提式有线电话机里的微信下播放摄像时,会碰着比较多题目,比方要求手动点击,录制才会播放,並且摄像会跳出Wechat框,现身调整条,借使录制不是腾讯录制,播放实现会产出爱奇艺的广告推送等主题素材

preload="auto" 质量规定在页面加载后载入录像。

x-webkit-airplay="allow"有时相当小概适用的知晓其意义,不过作者推断,那特性格应该是使此摄像扶持ios的AirPlay功效。使用AirPlay能够平昔从利用iOS的装置上的比不上岗位播放录像、音乐还应该有照片文件,也便是说通过AirPlay作用能够兑现影音文件的有线广播,当然前提是广播的终极设备也要帮忙相应的功效。

x5-video-orientation:声称播放器辅助的矛头,可选值landscape 横屏, portraint竖屏。暗中同意值portraint。无论是直播照旧全屏H5日常都是竖屏播放,不过这些天性供给x5-video-player-type开启H5格局

解决办法:给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>

H5微信播放全屏问题。x5­-video­-player­-fullscreen:全屏设置。它又三个属性值,ture和false,true援救全屏播放,false不帮衬全屏播放。

webkit-playsinline和playsinline:H5微信播放全屏问题。H5微信播放全屏问题。摄像播放命运域播放,不脱离文书档案流 。可是那几个天性相比较特别, 须要安置网页的APP比方WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,工夫见到成效。换句话说,要是APP不安装,你页面中加了那标签也没用,那也正是干吗安卓手提式有线电话机WeChat 播放录像总是全屏,因为应用程式不帮忙playsinline,而ISO的WeChat却协助。

那边将在补充下,假若是想做全屏直播或然全屏H5体验的顾客,ISO供给设置删除 webkit-playsinline 标签,因为您设置 false 是不协助的 ,安卓则没有必要,因为暗中同意全屏。但那时全屏是有广播控件的,无论你有未有设置control。 做直播的或是用得着播放控件,然而全屏H5是无需的,那么去除全屏播放时候的控件,须要以下设置:同层播放。

化解办法:给video加上object-fit: fill;的style属性。固然还是有黑边有十分的大希望是录像尺寸不合适。

实际,ISO Wechat浏览器是Chrome的基业,相关的性质都支持,也是为啥X5同层播放不协助的原因。安卓Wechat浏览器是X5内核,一些属性标签举个例子playsinline就不扶持,所以一贯全屏。

 

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划