Question

好的我有一些与Chrome完美搭配的东西，但在Safari中它有点奇怪。

第一个视频播放得很好，我想要它的确如此，但在页面的下方我有另一个嵌入式视频，即使我使用完全相同的代码，除了'autoplay'和视频文件当然，第二个真的很大，似乎是双倍的高度..

就像每次增加100％一样。

这是第一个的HTML

<video autoplay id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" poster="../images/posters/1969.png"
data-setup="{}"> 
<source src="../videos/1969.mp4" type='video/mp4'>
<source src="../videos/1969.webm" type='video/webm'>
</video>

和第二个

<video id="anothervideo" class="video-js vjs-default-skin" controls
preload="auto" poster="../images/posters/1969.png"
data-setup="{}"> 
<source src="../videos/video-2.mp4" type='video/mp4'>
<source src="../videos/video-2.webm" type='video/webm'>
</video>

认为它可能对导致问题的两个使用相同的id，所以使用两个单独的ID，但没有做任何事情，这里是ids的css

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

不知道发生了什么！

Answer 1

我错过了关于它在Safari中的部分。但我确实有一个解决方案。所以它似乎是导致问题的最小高度。你可以做的是添加这个CSS：

#my_video_2{
    min-height:inherit;
}

看来，在第二个视频中出现问题会导致问题，但第一个视频需要正确显示。

看看是否有效。

带有videoJS的嵌入式视频 - Safari的大小问题

1 个答案: