Question

我正在使用HTML5视频元素在页面上显示全屏背景视频：

HTML

<video poster="<?= MEDIA_URL ?>images/video-placeholder.jpg" autoplay="" loop="" muted="" preload="">
    <source src="<?= MEDIA_URL ?>video/flower.mp4" type="video/mp4">
    <source src="<?= MEDIA_URL ?>video/flower.ogv" type="video/ogg">
    <source src="<?= MEDIA_URL ?>video/flower.webm" type="video/webm">
</video>

CSS

video {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    background-size: cover;
}

这很有效，除了因为视频的1920 x 1080，在较小的屏幕（如我的1440 mac）上，大部分视频都被裁剪了。

是否有人知道有任何其他方法可以实现这一目标而不会裁剪如此多的视频？

Answer 1

尝试：

width: 100%;
height: 100%;

我认为它会起作用。或者尝试放标签

 video

在一个

中

<div></div>

然后更改属性。

如果解决问题请告诉我。

谢谢

Answer 2

您可以尝试后台：-webkit-canvas（将视频添加到画布后）或者甚至更好地使用-moz-element ...它们当然只在chrome和firefox中工作所以它可能不是什么你正在寻找，但这两种方式很有用......你可以在这里阅读-webkit-canvas：http://updates.html5rocks.com/2012/12/Canvas-driven-background-images和bout -moz-element here：https://developer.mozilla.org/en-US/docs/Web/CSS/element。

全屏背景视频

2 个答案: