html - 无法在 IE 和 iOS 中更改 html5 视频黑条的颜色

Question

我正在尝试以响应式设计显示视频，以便缩放边框融入背景。

我允许视频元素的尺寸在指定范围内变化。结果，当播放的视频没有填满实际的 html 元素时，我的视频周围出现了黑色填充条。

使用 css 背景属性，我已经能够更改 Chrome、FireFox 和 Opera 中显示的条形图的颜色。我不知道如何更改为 Internet Explorer 或 iOS (ipad) 显示的颜色。

谁能帮我解决这个问题？

按要求摆弄:http://jsfiddle.net/swaEe/

html:

<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

css:

video {
    width: 500px;
    background: blue;
}

***_ 编辑 _ ***

这是一个更好的 fiddle :http://jsfiddle.net/swaEe/40/

视频播放应在容器中垂直和水平居中。我希望“条形”是透明的或与容器颜色相同(在本例中为红色...)。

<div style="width:200px; height:600px; background-color:red;">
    <video width="100%" height="100%" style="background-color:red;" controls>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
</div>
<br />
<div style="width:600px; height:200px; background-color:red;">
    <video width="100%" height="100%" style="background-color:red;" controls>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
</div>

Answer 1

我想我已经想出了一个解决方案:

问题是似乎无法跨浏览器设置这些信箱的样式。因此，诀窍就是通过将视频元素缩放到视频文件的纵横比来避免信箱。

这个解决方案有两个潜在的缺点:

1. 它需要 Javascript

2. 你需要知道视频文件的尺寸并将它们写入data-attributes

   <video data-video-width="320" data-video-height="240" controls>
   

原因是浏览器在开始加载视频文件之前不知道视频文件的尺寸。大多数浏览器在播放视频之前会加载几个字节，但不是全部 - 一些旧版本的 Android wait until the user starts playing the video .

如果你不关心 Android 2.3，等待 loadedmetadata 事件获取 videoWidth 和 videoHeight 为 jaicabs answer does it是正确的方法。

看看这个:run fiddle/fiddle editor

我们主要做三件事:

1. 计算视频的纵横比
2. 调整它的大小，使其紧贴容器
3. 在容器内水平和垂直居中

您现在可以简单地设置容器的背景颜色，就完成了。

我已经在 iPhone 和 iPad、Chrome、Firefox 和 Safari 上使用 iOS 7 对其进行了测试。到目前为止还没有 IE 测试，因为我目前手边没有虚拟机，但我预计当前的 IE 不会有问题。