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

这篇文章主要介绍了html5 video全屏播放/自动播放的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

H5视频开发
H5视频开发

页面代码

1
2
3
4
5
6
7
<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自动播放(亲测有效)

1
2
3
4
5
6
7
8
9
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标签样式的设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
}

视频跟随浏览器窗口大小的改变:

1
2
3
4
5
6
7
$('.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未生效

1
document.getElementById('homeVideo').play();

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




您希望更多了解和咨询Infocode蓝畅信息技术的具体内容
=

本文来自网络,经授权后发布,本文观点不代表Infocode蓝畅信息技术立场,转载请联系原作者。

(1)
Infocode蓝畅Infocode蓝畅
上一篇 2020年9月26日 下午2:27
下一篇 2020年9月26日 下午3:54

相关文章内容推荐

  • h5开发为什么有垃圾嵌入广告

    随着移动互联网的迅猛发展,H5开发逐渐成为了一种主流的网页开发技术。由于H5开发具有灵活、易用、跨平台等优点,因此受到了越来越多的开发者的追捧。然而,随着H5开发的普及,越来越多的…

    2023年5月23日
    0258
  • H5活动页面,如何分析用户的行为?

    用户行为直接反应了H5的用户体验,因此要想做好用户体验,首先就要分析用户行为,然后从用户行为中揣摩用户心理感受。对于微信H5活动页面来说,主要的用户行为涉及以下几个方面: 点击行为…

    2020年7月28日
    0469
  • H5开发常用本地存储方式详解与介绍

    在 HTML5 规范之前,存储主要是用 cookies 。但cookies也有缺点: 在请求头上带着数据;大小是 4k 之内;主 Domain 污染; cookies 的主要应用:…

    2020年11月18日 H5开发
    0245
  • 微信H5创意:H5游戏开发刷爆朋友圈的几个要素

    H5游戏开发以不同的形式刷爆了大家的朋友圈,H5游戏是怎么突然火爆起来的呢?其实纵观一些火爆的H5游戏我们可以发现,除了H5本身的优势——创意足、传播快的优点之外,最重要的一点就是…

    2020年7月29日
    0238
  • H5就是手机版PPT吗?H5和 PPT 的区别介绍

    H5是什么 H5在狭义和广义上有两层含义,狭义上的H5只是一种编程语言,而广义上的H5则涵盖了互联网上绝大多数使用了HTML5技术页面。 狭义上的H5是一种编程语言,是HTML5的…

    2020年6月9日
    0369
  • h5游戏为什么要开发

    随着互联网的普及和技术的不断发展,游戏已经成为了人们日常生活中不可或缺的一部分。而其中,h5游戏是当前最为热门的一种游戏类型。那么,为什么h5游戏会如此受到欢迎呢?为什么需要不断地…

    2023年5月14日
    0297