Question

我正在尝试制作带有视频的fullscrren页面。这是我的代码：

 <video  id="backgroundvideo" autoplay controls>
            <source src="{% path video, 'reference' %}" type="video/mp4">

        </video>

css是：

  #backgroundvideo {
            position: fixed;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -100;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);

        }

当我尝试用Android（5英寸）在手机上打开页面时它不起作用，但是用Iphone 4打开它可以正常工作。我认为问题与css有关。

你能帮我解决一下吗？或者你可以给我另一个解决方案吗？

Answer 1

由于您没有说它如何不起作用，我不确定如何帮助您。但是：

    top: 50%;
    left: 50%;

如果您要全屏播放，为什么要将视频放置50％，将50％置于右侧？顶部：0;左：0;似乎更符合逻辑。我错过了什么吗？

   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;

不确定你想要什么，但是全屏==全屏，那么为什么告诉浏览器它可以自己决定如何调整视频大小？如果你想全屏，宽度：100％;身高：自动;应该做。请注意，因为比率可能与您的屏幕不同，您可能会获得顶部/底部的条形图。但我认为这比拉伸视频更好。

我不确定，我对视频并没有做太多支持并且支持是非常不稳定的，但我认为你的代码可能只会让浏览器感到困惑。

-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

你是在抵消50％吗？为什么呢？

无论如何，无论问题究竟是什么，视频支持只是“浏览器战争”领域中仍然存在的事情之一。每个人都以自己的方式做事。

查看此解决方案，以便（几乎）全部提供兼容视频。它还带有相当不错的CSS来窃取......我的意思是，“从中学习”。 ; - ）

http://mediaelementjs.com/

html5中的视频全屏

1 个答案: