html5播放代码(html5 video全屏播放/自动播放的实现示例)
类别:Web前端 浏览量:217
时间:2021-10-15 00:48:16 html5播放代码
html5 video全屏播放/自动播放的实现示例近期开始开发公司新版官网, 首页顶部(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全屏播放/自动播放内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- uni app开发教程(uniapp+Html5端实现PC端适配)
- html5 设置缓存(HTML5实现应用程序缓存Application Cache)
- html5 video标签
- HTML5 播放 RTSP 视频的实例代码(HTML5 播放 RTSP 视频的实例代码)
- html5定位教学(Html5 webview元素定位工具的实现)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- html5书写规范教学(Html5踩坑记之mandMobile使用小记)
- html5支持video的视频格式(解决html5中的video标签ios系统中无法播放使用的问题)
- html5基本代码文字颜色(html5默认气泡修改的代码详解)
- 制作共用的头部和底部html5界面(html5移动端价格输入键盘的实现)
- html5的语法变化(详解HTML5.2版本带来的修改)
- html5表格设计(Html5饼图绘制实现统计图的方法)
- html5新增全局属性(HTML5自定义属性的问题分析)
- html5中datalist标签
- html5如何控制内容(html5拖拽应用记录及注意点)
- html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
热门推荐
- dedecms打开新页面(DedeCMS 批量取消审核文档的实现方法)
- vue 底层原理(浅谈Vue插槽实现原理)
- 100道python真实面试题附答案(值得收藏的10道python 面试题)
- python写的工具(python调用虹软2.0第三版的具体使用)
- mysql的浮点数类型(浅谈MySQL中float、double、decimal三个浮点类型的区别与总结)
- dedecms标签工具(开启DedeCMS软件源码及分类信息采集功能的方法)
- h5嵌入app解决方案(app内嵌H5 webview 本地缓存问题的解决)
- python怎么在csv修改数据(python 编写输出到csv的操作)
- nginx结构图解(详解Nginx 工作原理)
- python异常值处理(一篇文章带你弄懂Python异常传递和自定义异常)