最近刚开始开发设计企业新版本官方网站， 主页顶端（header）是一个全屏幕播发的短视频, 现简易小结以下：
网页页面编码
<header class="header" style="width:100%;position: relative;">
<?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 {
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未起效
document.getElementById('homeVideo').play();
到此这篇有关html5 video全屏幕播发/全自动播发的完成实例的文章内容就详细介绍到这了,大量有关html5 video全屏幕播发/全自动播发內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！