html5 video全屏播放/自动播放的实现示例


Posted in HTML / CSS onAugust 06, 2020

近期开始开发公司新版官网, 首页顶部(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全屏播放/自动播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 #HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 #HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 #HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 #HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 #HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 #HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 #HTML / CSS
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
JavaScript实现弹出窗口效果
2020/12/09 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Python中的index()方法使用教程
2015/05/18 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python3离线安装Requests模块问题
2019/10/13 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python更换pip源方法过程解析
2020/05/19 Python
python raise的基本使用
2020/09/10 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
毕业生自我推荐
2013/11/04 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
运动会观后感
2015/06/09 职场文书
办公室管理规章制度
2015/08/04 职场文书
Django框架模板用法详解
2022/06/10 Python