本文主要介绍html5视频全屏播放/自动播放的实现实例。通过示例代码详细介绍，对大家的学习或工作有一定的参考学习价值。需要它的朋友将和边肖一起学习。

最近开始开发公司新版官网。主页顶部有一个全屏播放的小视频，简要总结如下：

页面代码

header class=' header ' style=' width :100%；相对位置：'

？php if(！help : is mobile()){？

视频id='homeVideo' class='ho唐山企业官网me-video '自动播放循环静音海报=' res/video/cover.jpg '

source src=' RES/video/home _ video . MP4 ' type=' video/MP4 '

/视频

？php }？

/header

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

Ps:如果H5页面主要在微信浏览器访问，可以解决iOS上视频自动播放的问题：解决iOS h5音频自动播放的问题(pro-test有效)

助手类{

公共静态函数isMobile() {

if(preg _ match('/(iPhone | IPoD | Android | IOs | IpaD)/I '，$ _ SERVER[' HTTP _ USER _ AGENT ']){

返回true

} else {

返回false

}

}

}

video标签样式

为了让视频占据整个屏幕，关键在于视频标签样式：的设置。家庭视频{

z-index : 100；

绝对位置：

top : 50%；

左侧：50%；

最小宽度：100%；

最小高度：100%；

object-fit : fill；/*这是关键*/

width: auto

height: auto

-ms-transform : translateX(-50%)translateY(-50%)；

-web kit-transform : translateX(-50%)translateY(-50%)；

transform : translateX(-50%)translateY(-50%)；

背景： url(./video/cover.jpg)不重复；

背景尺寸：封面；

}

视频跟随浏览器窗口大小：的变化

$('.家庭视频')。高度(window . InnerHeight)；

$('.标题')。高度(window . InnerHeight)；

$(窗口)。resize(function() {

$('.家庭视频')。attr('height '，window . InnerHeight)；

$('.家庭视频')。attr('width '，window . innerwidth)；

$('.标题')。高度(window . InnerHeight)；

});

页面加载后，回放会再次触发，以防止自动播放生效

document . getelementbyid(' Homevideo ')。play()；

关于html5视频全屏播放/自动播放的实现例子，就说到这里。更多html5视频全屏播放/自动播放相关内容，请搜索Script House之前的文章或继续浏览以下相关文章。希望大家以后多多支持脚本屋！