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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 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提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
js原型链与继承解析(初体验)
2016/05/09 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
使用tensorflow实现线性svm
2018/09/07 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Python字节单位转换实例
2019/12/05 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Python 实现进度条的六种方式
2021/01/06 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
岗位说明书范文
2014/05/07 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python