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

2  

I think I've managed to come up with a solution:

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

The problem is that it seems to be impossible to style these letterboxes cross-browser. So the trick then would be not to have letterboxes, by scaling the video element to the aspect ratio of the video file.

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

This solution has two potential drawbacks:

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

1. it requires Javascript

它需要Javascript

2. you need to know the dimensions of the video file and write them into data-attributes

   您需要知道视频文件的尺寸并将其写入数据属性

The reason for this is that the browser does not know the dimensions of the video file until it has started loading it. Most browsers do load a few bytes of the video before it is played, but not all - some older versions of Android wait until the user starts playing the video.

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

If you do not care about Android 2.3, waiting for the loadedmetadata event to get videoWidth and videoHeight as jaicabs answer does it is the right way.

如果你不关心Android 2.3,那么等待loadedmetadata事件将videoWidth和videoHeight作为jaicabs的答案,这是正确的方法。

Take a look at this: run fiddle / fiddle editor

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

We basically do three things:

我们基本上做了三件事:

1. calculate the aspect ratio of the video

计算视频的宽高比

2. resize it so that it fits snugly into its container

调整它的大小,使其紧贴其容器

3. center it horizontally and vertically within the container

在容器内水平和垂直居中

You can now simply set the background-color of the container, and you're done.

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

I've tested it with iOS 7 on iPhone and iPad, Chrome, Firefox and Safari. No IE testing so far, since I currently don't have my virtual machines handy, but I foresee no problems here for the current IEs.

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

0  

1. remove the inline width/height attributes. You want to use CSS to control your layout!

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

2. Use the magic keyword 'auto' for your height

为你的身高使用魔术关键字'auto'

3. Make sure to also use a poster with the same aspect ratio of your video

确保还使用与视频宽高比相同的海报

Here is a fiddle: http://jsfiddle.net/swaEe/13/

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

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

0  

Solved with no JS:

解决没有JS:

Basically, in both cases removing the height or width setting for the video (for the thin div, I removed the height, and for the short one, the width). Then centered the video elements (horizontal with display:block and then the margin trick, vertical with display:table-cell, and there's probably a better way to do that one).

基本上,在两种情况下都删除了视频的高度或宽度设置(对于瘦div,我删除了高度,对于短的高度,宽度)。然后将视频元素居中(水平显示:块然后是边缘技巧,垂直显示:table-cell,这可能是更好的方法)。

0  

I know some time has already passed since the question was asked, but I also had to implement a workaround for this problem and would like to share. The problem was similar to OP's, in that the video could be any size or aspect ratio.

我知道自提出问题以来已经过了一段时间,但我还必须为这个问题实施一个解决方法,并希望分享。问题类似于OP,因为视频可以是任何大小或宽高比。

If the HTML element is contained within a

.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