如何实现H5微信播放全屏--百分百源码网

如何实现H5微信播放全屏-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来如何实现H5微信播放全屏，实现H5微信播放全屏的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来如何实现H5微信播放全屏，实现H5微信播放全屏的注意事项是什么，下面就是实战案例，一起来看一下。

解决方法：给video标签加一些属性，调取h5原生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播放器，就是在视频全屏的时候，p可以呈此刻视频层上，也是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属性。要是还是有黑边有可能是视频尺寸分歧适。

*{
            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 stylep(pId){
    pId.style.width = clientWidth + 'px';
    pId.style.height = clientHeight +200+ 'px'; 
}
stylep(videobox);
stylep(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》

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相干文章！

举荐浏览：

H5的存储方式详解

zepto实现挪移端无缝向高低滚动

以上就是如何实现H5微信播放全屏的细致内容，更多请关注百分百源码网其它相干文章！

打赏