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

我试图以响应性设计显示视频，以便缩放边界融入背景

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

使用css背景属性，我可以更改Chrome、FireFox和Opera中显示的条的颜色。我不知道如何更改Internet Explorer或iOS（ipad）显示的颜色

有人能帮我解决这个问题吗

按要求拉小提琴：

html：
您的浏览器不支持视频标记。
css:
录像带{
宽度：500px；
背景：蓝色；
}

***编辑***

这是一把更好的小提琴：

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

您的浏览器不支持视频标记。


您的浏览器不支持视频标记。

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

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

jsfiddle:

删除内联宽度/高度属性。你想用CSS来控制你的布局

为你的身高使用神奇的关键字“自动”

确保使用与视频具有相同纵横比的海报

这是一把小提琴：

---

解决了！链接到实时jsbin:
编辑jsbin以遵循以下说明：
我无法在IE上测试它，但它应该像一个符咒一样工作

iOS确实存在问题。您将无法为播放机设置背景色，默认播放机大小为150x300，如图所示：

因为视频的本机维度在电影放映之前是未知的 元数据加载时，将分配默认高度和宽度150 x 300 如果未指定高度或宽度，则在运行iOS的设备上。 当前，电影播放时默认的高度和宽度不会更改 装载，[…]

因此，要删除黑条，您需要做的是更改默认大小，并尽快使其适应电影大小。是的，我们需要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();

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

无需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>

您的浏览器不支持视频标记。


您的浏览器不支持视频标记。

---

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

我想我已经找到了一个解决方案：

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

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

它需要Javascript

您需要知道视频文件的尺寸，并将其写入

数据

-属性

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

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

如果您不关心Android 2.3，那么等待

loadedmetadata

事件获取videoWidth和videoHeight是正确的方法

看看这个：/

我们基本上做三件事：

计算视频的纵横比

调整其大小，使其与容器紧密配合

将其在容器内水平和垂直居中

现在，您只需设置容器的背景色，就可以了

---

我已经在iPhone和iPad、Chrome、Firefox和Safari上用iOS7进行了测试。到目前为止还没有IE测试，因为我目前手头没有虚拟机，但我预计当前IE不会出现任何问题。

我知道问题提出后已经过了一段时间，但我还必须为这个问题实施解决方案，并希望与大家分享。 这个问题与OP类似，因为视频可以是任意大小或纵横比

如果HTML

元素包含在一个完全不指定大小的

中，则该容器将自动适应视频，并且没有黑色“填充”

知道了这一点，我们可以利用

loadedmetadata

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

以下是在IE11中测试的小提琴：

来源（如果小提琴不可用）：

---

/*
*获取视频尺寸后，其容器将
*调整大小，我们可以根据需要调整其位置。
*/
函数adjustVideoContainer（）{
log（“加载的视频元数据”）；
var videoContainer=$（this.parent（）.filter（“.video container”）；
if（videoContainer.length==0）{
//流产
console.log(
“已调用adjustVideoContainer（），但不是”+
“用合适的容器包装”
);
返回；
}
var containerParent=vi
// 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{
  background:blue;
  width:50%;
  height:auto;
  text-align:center;
}
video {
  max-width:100%;
  vertical-align:top;
}

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

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

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