video播放默认全屏,html video 全屏

　　近期开始开发公司新版官网，首页顶部（表头)是一个全屏播放的小视频，现简单总结如下：

　　页面代码

　　header class= header style= width:100%；位置：相对；？php if(！Helper:isMobile()) {？视频id=家庭视频 class=家庭视频自动播放循环静音海报/视频/封面。jpg source src= RES/video/home _ video。 MP4 type= video/MP4 /video？php }？/页眉其中服务器端编程语言(专业超文本预处理器的缩写)简单判断了一下是否是移动设备，移动设备不展示视频（如果移动端展示的话，需要解决ios上无法自动播放的问题):

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

　　class Helper { public static function is mobile(){ if(preg _ match(/(iPhone iPod Android IOs iPad)/I ，$ _ SERVER[ HTTP _ USER _ AGENT ]){ return 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:平移x(-50%)平移y(-50%)；背景：网址（./video/cover.jpg)不重复；背景-尺寸：封面；}视频跟随浏览器窗口大小的改变：

　　$(.家庭视频)。高度(窗口。内高)；$(.标题)。高度(窗口。内高)；$(窗口)。resize(function() { $( .家庭视频)。属性(高度，窗口。内高)；$(.家庭视频)。属性(宽度，窗口。内部宽度)；$(.标题)。高度(窗口。内高)；});页面加载完成再次触发播放，防止自动播放未生效

　　文档。getelementbyid(“家庭视频”).play()；到此这篇关于html5视频全屏播放/自动播放的实现示例的文章就介绍到这了，更多相关html5视频全屏播放/自动播放内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。