这篇文章主要介绍在html5中如何使用video进行全屏播放与自动播放，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

页面代码：

<headerclass="header"><?phpif(!Helper::isMobile()){?><videoid="homeVideo"class="home-video"autoplayloopmutedposter="res/video/cover.jpg"><sourcesrc="res/video/home_video.mp4"type="video/mp4"></video><?php}?></header>

其中php简单判断了一下是否是移动设备, 移动设备不展示视频(如果移动端展示的话, 需要解决iOS上无法自动播放的问题):

ps: 如果H5页面主要在微信浏览器中访问，可以解决iOS上视频自动播放的问题：解决iOS h6 audio自动播放（亲测有效）

classHelper{publicstaticfunctionisMobile(){if(preg_match("/(iPhone|iPod|Android|ios|iPad)/i",$_SERVER['HTTP_USER_AGENT'])){returntrue;}else{returnfalse;}}}

video标签样式

为了让视频占满整个屏幕, 关键在于video标签样式的设置:

.home-video{z-index:100;position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;object-fit:fill;/*这里是关键*/width:auto;height:auto;-ms-transform:translateX(-50%)translateY(-50%);-webkit-transform:translateX(-50%)translateY(-50%);transform:translateX(-50%)translateY(-50%);background:url(../video/cover.jpg)no-repeat;background-size:cover;}

视频跟随浏览器窗口大小的改变:

$('.home-video').height(window.innerHeight);$('.header').height(window.innerHeight);$(window).resize(function(){$('.home-video').attr('height',window.innerHeight);$('.home-video').attr('width',window.innerWidth);$('.header').height(window.innerHeight);});

页面加载完成再次触发播放,防止autoplay未生效：

document.getElementById('homeVideo').play();

以上是“在html5中如何使用video进行全屏播放与自动播放”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！