Safari на iPad (iOS6) не масштабирует видео HTML5, чтобы заполнить 100% ширины страницы

Я использую следующий CSS для отображения видео в полной ширине (100%) на отзывчивой странице HTML5. Собственный размер видеоролика - 480x270. Видео масштабируется, чтобы заполнить всю ширину страницы во всех браузерах на рабочем столе, сохраняя соотношение сторон.

Однако Mobile Safari и Chrome на моем iPad (iOS 6.0.1) показывают черный прямоугольник с той же шириной, что и страница. Видеоролик крошечный и отображается в его собственном размере (480x270) в центре черного прямоугольника.

video {
    width: 100%;
    max-width: 100%;
    height: auto;
}

вдохновлен http://webdesignerwall.com/tutorials/css-elastic-videos. На этой странице есть комментарий, который заставляет меня поверить, что в iOS6 есть регресс.

С момента обновления моего iPad до iOS 6 это исправление, похоже, больше не работает, я думаю, что его высота: автоматически вызывает проблему. Кто-нибудь сталкивался с подобным и имел исправление?

Кто-нибудь еще испытывает эту проблему? я есть ли способ отображать видео в формате HTML5 в полной ширине на iPad (iOS6), сохраняя при этом только формат изображения?

HTML выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<style>
video {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid red;
}
</style>
</head>
<body>
<video preload autoplay controls>
          <source src="file.mp4"  type="video/mp4">
          <source src="file.webm" type="video/webm; codecs=vp8, vorbis">
          <source sr="file.ogv" type="video/ogg; codecs=theora, vorbis">
</video>

Ответ 1

Здесь я вижу две проблемы:

Mobile Safari не будет определять ваши размеры видео (или соотношение сторон) для вас. Вы должны указать высоту и ширину в атрибутах элемента или CSS, потому что он не будет загружать заголовок видеофайла вообще до тех пор, пока вы не начнете играть. См. эту страницу, третий раздел.
Даже если вы это сделаете, браузер, похоже, не заботится. Когда вы установите его на авто, он возвращается к высоте по умолчанию 150 пикселей. Честно говоря, я не могу понять, почему. Вероятно, это ошибка. Но...

... существует обходное решение.

iOS, похоже, не имеет такой же проблемы с холстом. Таким образом, вы можете поместить холст и ваше видео в div, для которого установлено значение position: relative. Масштабируйте холст так же, как и ваше видео. Установите видео на position: absolute, а высоту и ширину - на 100%. Таким образом, холст заставит div быть размером, который вы хотите, и видео будет расширяться, чтобы заполнить div.

Рабочий пример здесь: http://jsbin.com/ebusok/135/

Ответ 2

Включение части ответа @brianchirls, вот что я сделал. Кажется, это работает на настольном компьютере, Android и iOS. Воспользуйтесь удобной трюк, где padding-top, в процентах будет в процентах от ширины. Мое видео 16: 9, так вот мой код:

#video-container {
 position: relative;
 padding-top: 56.25%;
}

video, object {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

Ответ 3

У меня был аналогичный сценарий с IOS6 и объект видео, не изменяющий размер его родителя. Я разрешил его, нацелив все элементы в родительском div, содержащие видео с помощью CSS. Поэтому в вашем примере вам нужно будет окружить ваше видео div (например, class= "DivWithVideo" ) и добавить следующий CSS:

 .DivWithVideo * {max-width: 100%}

Ответ 4

Мне нужно было сделать что-то подобное с загруженными пользователем видео. Это означает: я не знаю, какое разрешение имеет видео, он может быть даже в портретном режиме.

Мой рабочий процесс состоял в том, чтобы установить высоту с помощью javascript при загрузке метаданных. Для большинства браузеров видео с самого начала оценивается правильно; на iPad размер видео настраивается, когда пользователь нажимает на игру. Для меня было бы неплохо позволить видео расти, как только я знаю, насколько он велик.

Код (object.id используется, потому что в моей настройке на одной странице может быть несколько видеороликов):

<script type="text/javascript">
    // set height and width to native values
    function naturalSize_{{ object.id }}() {
        var myVideo = document.getElementById('video-{{ object.id }}');
        var ratio = myVideo.videoWidth / myVideo.videoHeight;
        var video_object = $('#video-{{ object.id }}');
        video_object.animate({
            height: (video_object.width() / ratio) + "px"
        }, 1000);
    }

    $(document).ready(function() {
        var myVideo = document.getElementById('video-{{ object.id }}');
        myVideo.addEventListener('loadedmetadata', naturalSize_{{ object.id }}, false);
    })
</script>

Если у кого-то есть более чистое решение, возможно, в чистом CSS, я бы хотел его увидеть...

Ответ 5

вы можете использовать это, чтобы настроить ваше видео в контейнере с полями по своему усмотрению. нет необходимости добавлять дополнительный элемент. исправить для iOS 7 специально. обратите внимание на префиксы -webkit-calc, если необходимо

width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);