带有 Firefox 的 HTML5 mp4 视频调整视频大小答案

【问题标题】：HTML5 mp4 video with firefox resizing video带有 Firefox 的 HTML5 mp4 视频调整视频大小
【发布时间】：2014-04-03 06:56:21
【问题描述】：

我正在为一个网站使用 html5 视频，并且支持 mp4 和 ogg 格式。视频的高度通过 CSS 设置为 350px。代码在这里：

<video autoplay loop>
    <source src="assets/videos/vid.ogv" type="video/ogg">
    <source src="assets/videos/vid.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

在 Firefox 中，代码被替换为嵌入的 mp4，如下所示：

<embed width="700" height="350" src="assets/videos/vid.mp4" mode="null" autoplay="true" loop="true" pluginspage="http://go.divx.com/plugin/download/" type="video/divx"></embed>

问题是，在 Firefox 中，视频尺寸是错误的。原始视频是纵向的，firefox将其变成横向视频，将原始视频的底部切掉。更改宽高不起作用，因为纵横比错误。

我希望 Firefox 只使用 ogg 视频，看起来不错，但我不知道该怎么做。如果浏览器是FF，我尝试使用JS删除mp4行强制ogg，但是在js运行时代码已经更改为嵌入代码。有多个视频，我希望有比使用 JS 对每个视频的 html 进行硬编码更好的解决方案。

谢谢！

【问题讨论】：

标签： html firefox video

【解决方案1】：

将嵌入包装在 div 中并设置 height 和 with 到 div 。而不是设置 height 和 with 到嵌入

 <Div width="700" height="350">
 <embed src="assets/videos/vid.mp4" mode="null" autoplay="true" loop="true" pluginspage="http://go.divx.com/plugin/download/" type="video/divx"></embed>
</Div>

或者试试这个

<Div width="700" height="350">
<video autoplay loop>
<source src="assets/videos/vid.ogv" type="video/ogg">
<source src="assets/videos/vid.mp4" type="video/mp4">
Your browser does not support the video tag.

【讨论】：