Невозможно изменить цвет черных полос html5 в IE и iOS

Ответ 1

Как насчет div с css в качестве фона? [Я не знаком с 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/

Ответ 2

Решено! Ссылка на живой jsbin: http://jsbin.com/AVOZoXu/9
Редактировать jsbin, чтобы следовать объяснению: http://jsbin.com/AVOZoXu/9/edit
Я не смог проверить его на IE, но он должен работать как шарм.

Реальная проблема с iOS. Вы не сможете установить фоновый цвет для проигрывателя, а размер игрока по умолчанию - 150x300, как вы можете видеть в Safari Developer Library:

Поскольку собственные размеры видео не известны до тех пор, пока фильм метаданных выделяется высота и ширина по умолчанию 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();

И теперь вы получите размер видеопроигрывателя видео, как только загрузятся метаданные. Поскольку видео больше не имеет своих черных полос, мне просто нужно было центрировать его как текст.

О! И вы хотели, чтобы он был отзывчивым? Проверьте это, не имеет значения ширина, установленная на #content, потому что naturalSize() проверяет соотношение и ширину контейнера и устанавливает меньшую высоту для видео, чем оригинал, предотвращая появление черных полос на исходной высоте видео с меньшей шириной.

Ширина управляется с помощью свойства max-width:100%;, поэтому нет необходимости вручную его изменять.

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

Я знаю, я знаю, видео не изменяется, пока вы не начали его воспроизводить, но это самое близкое, что вы собираетесь на iOS делать, что хотите. Во всяком случае, я думаю, что это отличное решение, надеюсь, это поможет вам.

Ответ 3

Думаю, мне удалось найти решение:

Проблема состоит в том, что кажется, что невозможно перерисовать эти почтовые ящики кросс-браузера. Таким образом, трюк тогда не будет иметь почтовые ящики, путем масштабирования видеоэлемента до соотношения сторон видеофайла.

Это решение имеет два потенциальных недостатка:

• для этого требуется Javascript

• вам нужно знать размеры видеофайла и записывать их в data -attributes

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

Причиной этого является то, что браузер не знает размеры видеофайла, пока он не начал его загружать. Большинство браузеров загружают несколько байтов видео до его воспроизведения, но не все - некоторые более старые версии Android ждут, пока пользователь не начнет воспроизводить видео.

Если вы не заботитесь о Android 2.3, ожидая, что событие loadedmetadata получит videoWidth и videoHeight, поскольку ответ jaicabs делает это, это правильный путь.

Взгляните на это: запустить скрипку/скриптовый редактор

В основном мы делаем три вещи:

• рассчитать соотношение сторон видео
• измените его размер так, чтобы он плотно входил в контейнер
• центрировать его по горизонтали и вертикали внутри контейнера

Теперь вы можете просто установить фоновый цвет контейнера, и все готово.

Я тестировал его с помощью iOS 7 на iPhone и iPad, Chrome, Firefox и Safari. Пока нет IE-тестирования, поскольку в настоящее время у меня нет виртуальных машин, но я не вижу здесь проблем для текущих IE.

Ответ 4

• удалить встроенные атрибуты width/height. Вы хотите использовать CSS для управления макетом.
• Используйте волшебное ключевое слово 'auto' для вашей высоты
• Обязательно используйте плакат с одинаковым соотношением сторон вашего видео.

Вот скрипка: http://jsfiddle.net/swaEe/13/

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

Ответ 5

Решено без 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 я удалял высоту, а для короткой - ширину). Затем центрируйте видеоэлементы (горизонтальные с отображением: блок, а затем трюк с краем, вертикальный с дисплеем: table-cell, и, вероятно, лучший способ сделать это).

Ответ 6

Я знаю, что прошло некоторое время с момента запроса, но мне также пришлось реализовать обходной путь для этой проблемы и хотел бы поделиться. Проблема была похожа на OP, поскольку видео могло быть любого размера или формата.

Если элемент HTML <video> содержится внутри <div>, который вообще не задает размер, контейнер автоматически поместится вокруг видео и не будет иметь черное "дополнение".

Зная это, мы можем воспользоваться событием 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);