html - Safari HTML 视频无法正确显示(太小)

Question

嘿，我正在使用 HTML 标签，当我在 Safari 中打开页面时，视频播放器非常小。

如果我启用全屏然后返回，它会正确聚焦。

我不确定是什么原因导致它最初加载不正确。

HTML代码:

<div id="AboutVideo">

    <video width="100%" height="100%" controls>

        <source src="../Media/Video/Intro/test.mp4"  type="video/mp4" />
        <source src="../Media/Video/Intro/test.ogv"  type="video/ogg" />
        <source src="../Media/Video/Intro/test.webm" type="video/webm">

    </video>

</div>

关于视频:

#AboutVideo
{
float: left;
margin-right: 1em;
}

任何帮助都会很棒。

Answer 1

请尝试下面的代码，这可能是因为您从未包含视频后备代码。就是这样。

<video controls="controls" autoplay="autoplay" 
poster="#" width="212" height="160">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 
    width="212" height="160">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
        <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
    </object>
</video>