h5全屏视频背景_创建全屏HTML5页面背景视频

h5全屏视频背景

While we can’t yet set a video for the background or background-image CSS properties – they can only take bitmaps, SVG images, colors and gradients as values – it is possible to fake the appearance of a background video by forcing it behind other HTML elements. The challenge is to have the video fill the browser window, making it as responsive as background images.

虽然我们还不能设置为视频background或background-image CSS属性-他们只能采取位图 ， SVG图像， 色彩和渐变的价值-这是可能的假背景视频的出现，迫使它背后的其他HTML元素。 挑战在于使视频充满浏览器窗口，使其与背景图像一样敏感。

注意事项和局限性 (Considerations and Limitations)

Before achieving this, there some factors you should consider:

在实现此目标之前，应考虑一些因素：

• Don’t just use this technique because you can: video content must amplify a site’s message, not just be shown because it’s pretty.

  不要仅仅使用这种技术，因为您可以： 视频内容必须放大网站的信息 ，而不仅仅是因为它的美观而被展示。

• The video will likely be set to autoplay, but it should be muted by default; ideally, it should not include sound at all. (You can easily create an unmute button for the video with JavaScript).

  视频可能会设置为autoplay ，但默认情况下应将其静音； 理想情况下，它根本不应该包含声音 。 (您可以使用JavaScript轻松为视频创建一个取消静音按钮)。

• The video should display a placeholder image, falling back to a static background image for browsers that do not support HTML5. The placeholder image will also be used a background on mobile devices: many phones and tablets do not support autoplay, for obvious reasons.

  对于不支持HTML5的浏览器，视频应显示一个占位符图像，并回退到静态背景图像。 占位符图像还将在移动设备上用作背景：出于显而易见的原因，许多手机和平板电脑都不支持autoplay 。