使用场景

在做酷炫页面的时候，经常需要加一个背景视频，就是在背景上默默播放的视频。

video标签

与一般video标签直接引用的视频的区别在于：自动播放、循环播放、无控制栏。这些场景早已被浏览器考虑到，我们可以通过video标签加解决：

<videosrc={src} playsInline autoPlay mutedloop={true} controls={false} preload="auto"// poster={backgroundImage}
/>

细节

为了更好的用户体验，需要进行一些细节上的调整。做到完美的背景视频，可不简单。

全屏样式

先给video加个图片常用的object-fit和object-position，来保证背景能铺满位置。在video标签也是可以用的（正经浏览器上）

object-fit: cover;
object-position: center;

再来个video的父节点的样式。因为旧Edge浏览器里的video不支持上面的object-fit，用下面的支持代码来让edge也能有差不多的效果。

  position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;overflow: hidden;//edge支持@supports (-ms-ime-align:auto) {overflow: hidden;.bg-video__video{min-width: 100%;min-height: 100%;width: auto;height: auto;  }}

预览图

视频首次加载会比较慢，这时需要一个体积较小的预览图来在视频加载的时候占位置；更进一步可以再来个背景色，在预览图加载的时候显示；

方案：预览图可以在video加一个poster={backgroundImage}，也可以另外放个image在video同级，z-index更底层一点，让video展示出来的时候能盖住图片；

为了更平滑的过渡效果，预览图需要和视频第一帧能够重叠，也就是object-fit/object-position要和video的一样

以上部分已经让这个背景视频比较完美了；下面再解决一些坑

Safari不自动播放

safari下有时会出现视频不自动开始播放的问题。现象是视频好了不播，就停在第一帧，当你改变了一下页面元素，比如拖一下滚动条，鼠标触发按钮hover态，它才会开始播。网上找不到相关资料，这个神秘问题如何解决呢？

根据动一下就开始播的特性，我们让视频加载好后渐变出现，这样肯定就能开始播了。

<videoclassName={cx('bg-video__video', css`...transition: opacity 1000ms ease;opacity: ${videoOn ? 1.0 : 0.0};`, className)}onCanPlay={() => {if (videoOn) return;setVideoOn(true);}}
/>

（代码里用的emotion库，直接用style也行）

注意

webm格式视频，带有透明度，某些时候比较好用。但是只有chrome和firefox支持；

网页插入全屏背景视频相关推荐

全屏背景视频和混合模式文本的实现
全屏背景视频和混合模式文本的实现本文转载自:众成翻译译者:chajn 链接:http://www.zcfy.cc/article/1275 原文:http://thenewcode.com/113 ...
html全屏背景视频特效,HTML5全屏背景视频特效插件Vidage.js源码
下面我们对HTML5全屏背景视频特效插件Vidage.js源码文件阐述相关使用资料和HTML5全屏背景视频特效插件Vidage.js源码文件的更新信息. HTML5全屏背景视频特效插件Vidage.j ...
html背景视频铺满网页,HTML – 中心全屏背景视频
这是一个JQuery函数,我写了很长一段时间才使视频成为全屏背景.基本上,如果窗口的纵横比高于视频的纵横比,则使高度100%和宽度自动,反之亦然,以获得更宽的纵横比窗口. // Resize the ...
html全屏背景视频特效,HTML – 中心全屏背景视频
我最近玩过html5并且遇到了使用的想法使用以下HTML代码作为网站背景的全屏视频: 另外,我使用以下css代码来正确对齐它: #video_background{ position: absolu ...
全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
Html手机web背景全屏,使用全屏背景的网页设计欣赏全屏网页背景教程
使用全屏背景的网页设计欣赏 & 全屏网页背景教程 Sponsor 全屏的大背景网站之前分享过不少,这是2012年以及2013年的设计趋势,适合用全屏背景的网站有很多,比如摄影类.建筑类.餐厅美 ...
php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面错误的写法:加到div中结合图片设置min-height, ...
网页（全屏）背景图实现方式（纯CSS向）
全屏背景的意思就是背景图占满整个浏览器视窗,在没有body其他内容的时候不出现滚动条.就算有滚动条的时候,背景也是固定的,不跟随滚动. 对于这类的全屏背景图片的实现,我们需要注意的是,有五种情况: 图 ...
全屏背景：15个jQuery插件实现全屏背景图像或媒体
动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

网页插入全屏背景视频

目录

使用场景

video标签

细节

全屏样式

预览图

Safari不自动播放

注意

网页插入全屏背景视频相关推荐

最新文章

热门文章