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

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

页面代码

<header class="header" style="width:100%;pos IT ion: relative;">
    <?php if(!Hel PE r :: is mobile ()) { ?>
    <video id="homeVideo" class="home-video" auto play  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 {
    p ub lic  stat ic function isMobile() {
        if ( PR eg_match("/(iPhone| IPO d|And ROI d|ios|iPad)/i", $_SERVER['HTTP_USER_AGENT'])) {
            return true;
        } else {
            return false;
        }
    }
}

video标签 样式

为了让视频占满整个屏幕, 关键在于video标签样式的设置:

.home-video {
    z -i ndex: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-h ei ght: 100%;
    object-fit: fill;/*这里是关键*/
    width: auto;
    height: auto;
    -ms -t ransform: trans latex (-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();

到此这篇关于ht ML 5 video全屏播放/自动播放的实现示例的 文章 就介绍到这了,更多相关html5 video全屏播放/自动播放内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 html5 video全屏播放/自动播放的实现示例 全部内容，希望文章能够帮你解决 html5 video全屏播放/自动播放的实现示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5 video全屏播放/自动播放的实现示例的详细内容...