html5video全屏播放⾃动播放的实现⽰例
近期开始开发公司新版官⽹，⾸页顶部（header）是⼀个全屏播放的⼩视频, 现简单总结如下：
页⾯代码
<header class="header" >
<?php if(!Helper::isMobile()) { ?>
<video id="homeVideo" class="home-video" autoplay loop muted poster="res/video/cover.jpg">
<source src="res/video/home_video.mp4" type="video/mp4">
</video>
<?php } ?>
</header>
其中php简单判断了⼀下是否是移动设备, 移动设备不展⽰视频(如果移动端展⽰的话, 需要解决iOS上⽆法
⾃动播放的问题): ps: 如果H5页⾯主要在浏览器中访问，可以解决iOS上视频⾃动播放的问题：解决iOS h5 audio⾃动播放（亲测有效）class Helper {html5开发示例
public static function isMobile() {
if (preg_match("/(iPhone|iPod|Android|ios|iPad)/i", $_SERVER['HTTP_USER_AGENT'])) {
return true;
} else {
return false;
}
}
}
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未⽣效
到此这篇关于html5 video全屏播放/⾃动播放的实现⽰例的⽂章就介绍到这了，更多相关html5 video全屏播放/⾃动播放内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。