我正在尝试以响应式设计显示视频,以便缩放边框融入背景。
我允许视频元素的尺寸在指定范围内变化。结果,当播放的视频没有填满实际的 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>
最佳答案
我想我已经想出了一个解决方案:
问题是似乎无法跨浏览器设置这些信箱的样式。因此,诀窍就是通过将视频元素缩放到视频文件的纵横比来避免信箱。
这个解决方案有两个潜在的缺点:
- 它需要 Javascript
你需要知道视频文件的尺寸并将它们写入
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
我们主要做三件事:
- 计算视频的纵横比
- 调整它的大小,使其紧贴容器
- 在容器内水平和垂直居中
您现在可以简单地设置容器的背景颜色,就完成了。
我已经在 iPhone 和 iPad、Chrome、Firefox 和 Safari 上使用 iOS 7 对其进行了测试。到目前为止还没有 IE 测试,因为我目前手边没有虚拟机,但我预计当前的 IE 不会有问题。
关于html - 无法在 IE 和 iOS 中更改 html5 视频黑条的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17903438/