Видео не воспроизводится на iOS10 Chrome

Я просто не могу найти, что неправильно с этим фрагментом видео.

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/webm" src="sample.webm"></source>
    <source type="video/mp4" src="sample.mp4"></source>
</video>

Видео воспроизводится без проблем в Safari (не тестировалось в отношении более ранних версий iOS, но мое единственное беспокойство касается проблемы автозапуска?), но в Chrome единственное, что я вижу, это обложка и кнопка воспроизведения что ничего не вызывает. Я что-то упускаю? Мне действительно нужно использовать JS, чтобы заставить его работать?

Обновление. Кажется, что проблема с воспроизведением файлов Webm с iOS Chrome - я пробовал несколько файлов из разных мест, и они, кажется, нужны для загрузки сначала, прежде чем они смогут играть.

Ответ 1

В Google Chrome в настоящее время есть ошибка, из-за которой он не будет автоматически воспроизводить видео .webm , если оно идет после чего-либо еще. Попробуйте использовать код, опубликованный здесь.

Постройте HTML5 video как обычно:

<video playsinline autoplay muted loop poster="aurora.jpg" id="bgvid">
    <source src="aurora.webm" type="video/webm"> </source>
    <source src="aurora.mp4" type="video/mp4"> </source>
</video>

Если предыдущие советы не помогли, попробуйте использовать сценарии воспроизведения video.js и simple на Github.

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

Ответ 2

Я просто не могу найти, что неправильно с этим фрагментом видео.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/webm" src="sample.webm"></source>
    <source type="video/mp4" src="sample.mp4"></source>
</video>
... Обновление: похоже, проблема с воспроизведением файлов Webm с iOS Chrome.

Самое простое и лучшее исправление состоит в том, чтобы убедиться, что вы сначала объявите файл mp4, а затем объявите webm на втором месте (обратная сторона вашего показанного порядка). Я считаю, что iOS ожидает, что mp4 станет первым файлом в HTML-тегах HTML5. Все iOS видит src="sample.webm", который не является допустимым ожидаемым кодеком MPEG, поэтому приводит к вашей кнопке "... play, которая ничего не запускает". Где-то вы где-то молчали.

Попробуйте:

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/mp4" src="sample.mp4"></source>
    <source type="video/webm" src="sample.webm"></source>
</video>

Боковое примечание: Просто мое мнение, но, я думаю, что webm здесь избыточно, так как основная поддерживающая система (технология Google) уже может обрабатывать mp4.

Лучше предложить эти видеодекодеры в браузерах [конечных пользователей] выбрать mp4 или ogv (только в случае Firefox).

PS: автоматическое воспроизведение отключено на большинстве мобильных систем из-за допусков данных SIM-карты. Конечный пользователь должен выбрать воспроизведение этого видео. Вероятно, в сети есть умные обходные пути, просто помните, что это ожидаемое поведение, так что это не проблема с вашим текущим кодом.