带有firefox大小调整视频的HTML5 mp4视频 [英] HTML5 mp4 video with firefox resizing video

问题描述

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

I'm using html5 video for a site and have both mp4 and ogg formats supported. The height of the video is set to 350px via CSS. Code here:

<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，如下所示：

In firefox, the code is replaced with an embedded mp4, and looks like this:

<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将其转换为横向视频，切断原始视频的底部。更改宽度和高度不起作用，因为宽高比是错误的。

The problem is, in firefox the video dimensions are wrong. The original video is in portrait, and firefox turns it into a landscape video, cutting off the bottom of the original. Changing the width and height doesn't work because the aspect ratio is wrong.

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

What I'd like to have happen is for firefox to just use the ogg video, which looks fine, but I'm not sure how to do this. I tried using JS to remove the mp4 line to force ogg if the browser was FF, but at the time the js ran the code was already changed to the embed code. There are multiple videos and I'm hoping there's a better solution than using JS to hardcode the html for each video.

谢谢！

推荐答案

将嵌入包装在div中并设置高度并设置为div。而不是设置高度和嵌入

Wrap the embedding in a div and set height and with to the div .instead of setting height and with to the embedding

 <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.

这篇关于带有firefox大小调整视频的HTML5 mp4视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！