本文主要介绍html5视频全屏播放/自动播放的实现示例，通过示例代码非常详细。对大家的学习或工作都有一定的参考价值。有需要的朋友下面跟边肖学习。
最近，公司开始开发新版官网。首页顶部(表头)是全屏播放的小视频，简单总结如下：
页面代码
header class=’ header ‘ style=’ width:100%；位置：相对；’
？php if(！Helper:isMobile()) {？
video id=’ home video ‘ class=’ home-video ‘自动播放循环静音海报=’res/video/cover.jpg ‘
source src=’ RES/video/home _ video . MP4 ‘ type=’ video/MP4 ‘
/视频
？php }？
/页眉
其中php简单判断是否是移动设备，移动设备不显示视频(如果移动设备显示，需要解决在iOS上无法自动播放的问题):
Ps:如果主要在微信浏览器中访问H5页面，可以解决iOS上的视频自动播放问题：解决iOS h5音频上的视频自动播放问题(亲测有效)
类助手{
公共静态函数isMobile() {
if(preg _ match(‘/(iPhone | iPod | Android | IOs | iPad)/I ‘，$ _ SERVER[‘ HTTP _ USER _ AGENT ‘]){
返回true
}否则{
返回false
}
}
}
video标签样式
为了让视频占据整个屏幕，关键在于视频标签样式的设置：家庭视频{
z指数：100；
位置：绝对；
top:50%；
左：50%；
最小宽度：100%；
最小高度：100%；
对象适合：填充；/*这是钥匙*/
宽度：自动；
高度：自动；
-ms-transform:translate x(-50%)translate y(-50%)；
-WebKit-transform:translate x(-50%)translate y(-50%)；
transform:translate x(-50%)translate y(-50%)；
背景：网址(./video/cover.jpg)不重复；
背景-尺寸：封面；
}
跟随视频浏览器窗口大小的变化：
$(‘.家庭视频)。height(window . inner height)；
$(‘.标题)。height(window . inner height)；
$(窗口)。resize(function() {
$(‘.家庭视频)。attr(‘height ‘，window . inner height)；
$(‘.家庭视频)。attr(‘width ‘，window . inner width)；
$(‘.标题)。height(window . inner height)；
});
当页面被加载时，回放被再次触发，以防止自动播放生效。
document . getelementbyid(‘ home video ‘)。play()；
本文关于html5视频全屏播放/自动播放的实现示例到此为止。更多相关html5视频全屏播放/自动播放内容，请搜索脚本之家之前的文章或者继续浏览下面的相关文章。希望大家以后多多支持剧本之家！
来源：剧本之家
链接：https://www.jb51.net/html5/739301.html
