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

Question

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

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

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

谁能帮我解决这个问题？

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;
}

*** _编辑_ * **

这是一个更好的小提琴：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>

score 4 · Accepted Answer

我想我已经设法想出了一个解决方案：

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

该解决方案有两个潜在的缺点：

它需要Javascript
您需要知道视频文件的尺寸并将它们写入data-attributes
```
<video data-video-width="320" data-video-height="240" controls>
```

原因是浏览器在开始加载视频文件之前不知道视频文件的尺寸。大多数浏览器在播放之前都会加载视频的几个字节，但不是全部 - 一些旧版本的 Android 会等到用户开始播放视频。

如果您不关心 Android 2.3，则等待loadedmetadata事件获取 videoWidth 和 videoHeight 作为jaicabs 的答案是正确的方法。

看看这个：运行小提琴/小提琴编辑器

我们基本上做三件事：

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

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

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

score 2 · Accepted Answer

以css为背景的div怎么样？【我对iOS不熟悉，在IE11上尝过】

html:

<div id="container"> 
<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>
</div>

CSS：

video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#container{
    width: 500px;
    height: 240px;
    background: blue;
}

jsfiddle：http: //jsfiddle.net/c9aHf/1/

score 2 · Accepted Answer

解决了！链接到实时 jsbin：http
://jsbin.com/AVOZoXu/9 编辑 jsbin 以遵循解释： http: //jsbin.com/AVOZoXu/9/edit
我无法在 IE 上测试它，但它应该可以工作像一个魅力。

iOS确实存在问题。您将无法为播放器设置背景颜色，默认播放器大小为 150x300，如您在Safari 开发人员库中所见：

因为在加载电影元数据之前，视频的原生尺寸是未知的，如果未指定高度或宽度，则在运行 iOS 的设备上分配默认高度和宽度150 x 300 。目前，默认的高度和宽度在电影加载时不会改变，[...]

因此，要删除黑条，您必须尽快更改默认大小并使其适应电影大小。是的，我们需要 JavaScript。

// set height and width to native values
function naturalSize() {
  var myVideo = document.getElementById('theVideo');
  var myContent = document.getElementById('content');
  myVideo.height = myVideo.videoHeight;
  myVideo.width = myVideo.videoWidth;

  //if the video is bigger than the container it'll fit
  ratio = myVideo.videoWidth/myVideo.videoHeight;
  if(parseInt(myContent.offsetWidth,10)<myVideo.videoWidth){
   myVideo.height = myVideo.videoHeight*parseInt(myContent.offsetWidth,10)/myVideo.videoWidth;
     myVideo.width=parseInt(myContent.offsetWidth,10); 
  }
}
// register listener function on metadata load
function myAddListener(){
  var myVideo = document.getElementById('theVideo');
  myVideo.addEventListener('loadedmetadata', naturalSize, false);
}

window.onload = myAddListener();

现在，您将在元数据加载后立即获得视频的视频播放器大小。由于视频不再有黑条，我只需将其作为文本居中即可。

哦！你想让它反应灵敏吗？检查一下，您设置的宽度无关紧要，#content因为naturalSize()检查比率和容器的宽度并为视频设置比原始高度更小的高度，防止黑条出现在宽度更小的原始视频高度中。

宽度由max-width:100%;属性控制，因此无需手动更改。

#content{
  background:blue;
  width:50%;
  height:auto;
  text-align:center;
}
video {
  max-width:100%;
  vertical-align:top;
}

我知道，我知道，视频在您开始播放之前不会调整大小，但它是您在 iOS 上最接近您想要做的事情。无论如何，我认为这是一个很好的解决方案，希望对您有所帮助。

score 1 · Accepted Answer

我知道自从提出问题以来已经过去了一段时间，但我还必须针对这个问题实施解决方法并想分享。这个问题类似于 OP，因为视频可以是任何大小或纵横比。

如果 HTML<video>元素包含在<div>根本没有指定大小的 a 中，则容器将自动适应视频，并且不会有黑色“填充”。

知道了这一点，我们就可以利用这个loadedmetadata事件：我们实际上不需要视频的尺寸来进行任何计算，但我们必须等待这些数据加载，以便容器调整大小。一旦发生这种情况，我们就可以水平和/或垂直调整容器的位置。

这是在 IE11 中测试的小提琴：

http://jsfiddle.net/j6Lnz31y/

来源（以防小提琴变得不可用）：

<div class="whatever-container" style="width:200px; height:600px; background-color:red;">
        <div class="video-container">
            <video 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>
    </div>
    <br />


    <div class="whatever-container" style="width:600px; height:200px; background-color:red;">
        <div class="video-container">
            <video 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>
    </div>

.whatever-container {
    position: relative;
}

.video-container {
    position: absolute;
    opacity: 0;
}

.video-container > video {
    position: relative;
    width: 100%;
    height: 100%;
}

/*
 * After the video dimentions have been acquired, its container will have
 * resized and we can adjust its position as necessary.
 */
function adjustVideoContainer() {
    console.log("video metadata loaded");
    var videoContainer = $(this).parent().filter(".video-container");

    if (videoContainer.length === 0) {
        //abort
        console.log(
            "adjustVideoContainer() was called but no it wasn't "+
            "wrapped in an appropriate container"
        );
        return;
    }
    var containerParent = videoContainer.parent();
    var parentWidth     = containerParent.width(),
        parentHeight    = containerParent.height(),
        containerWidth  = videoContainer.width(),
        containerHeight = videoContainer.height();

    if (containerWidth < parentWidth) {
        videoContainer.css(
            "left",
            (parentWidth - containerWidth) / 2
        );
    }

    if (containerHeight < parentHeight) {
        videoContainer.css(
            "top",
            (parentHeight - containerHeight) / 2
        );
    }
    else {
        videoContainer.height("100%");
    }
    videoContainer.css("opacity", 1);

}

$("video").on("loadedmetadata", adjustVideoContainer);

score 0 · Accepted Answer

删除内联宽度/高度属性。你想用 CSS 来控制你的布局！
使用魔术关键字“auto”作为您的身高
确保还使用与您的视频具有相同纵横比的海报

这是一个小提琴：http: //jsfiddle.net/swaEe/13/

video {
    width: 500px;
    min-width: 200px;
    max-width: 100%;
    height: auto;
}

score 0 · Accepted Answer

没有JS解决：

<div style="display: table-cell; vertical-align: middle; width:200px; height:600px; background-color:red;">
<video width="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 height="100%" style="background-color:red; display: block; width: auto; margin: 0 auto;" 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>

基本上，在这两种情况下都删除了视频的高度或宽度设置（对于薄 div，我删除了高度，而对于短的，我删除了宽度）。然后将视频元素居中（水平显示：块，然后是边距技巧，垂直显示：表格单元，可能有更好的方法来做到这一点）。

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

6 回答 6

Related

Reference