Поведение HTML5-видео на мобильных устройствах

Я строю сайт, где у меня есть несколько <video> элементы (петельные анимации), которые действуют как часть моего дизайна (а не как реальное видео). Это хорошо работает в настольных браузерах, но у меня проблемы с мобильными устройствами.
Когда я отображаю сайт на устройствах Android или iOS (например, в мобильном веб-наборе), я получаю внешний вид видеоплеера ОС, и при нажатии на них видео открывается в каком-то всплывающем окне. Я знаю, что могу обойти ограничения автозапуска, выполнив что-то вроде:

window.onload = function() {
    var pElement = document.getElementById("myVideo");
    pElement.load();
    pElement.play();
};

Но это снова откроет видео в отдельном окне...

Кто-нибудь знает о возможности эмулировать / включать поведение на рабочем столе на мобильных устройствах? Спасибо!

РЕДАКТИРОВАТЬ: разметка является основным <video>-синтаксис кстати:

<video autoplay loop>
    <source src="vid.mp4" type="video/mp4" />
    <source src="vid.ogg" type="video/ogg" />
    <source src="vid.webm" type="video/webm" />
</video>
Источник

4 ответа

Решение

Хм, я не уверен насчет Android, но устройства iOS не могут одновременно запускать несколько видеопотоков:

Несколько одновременных аудио или видео потоков

В настоящее время все устройства под управлением iOS ограничены воспроизведением одного аудио или видео потока в любое время. Воспроизведение более одного видео - рядом, частично или полностью наложено - в настоящее время не поддерживается на устройствах iOS. Воспроизведение нескольких одновременных аудиопотоков также не поддерживается. Однако вы можете динамически менять источник звука или видео. См. "Последовательная замена медиаисточника".

Источник

YouTube использует mov или mp4 с ios для загрузки собственного вида и восприятия видео, либо он ссылается на свое приложение для воспроизведения видео, поскольку оно установлено на каждом устройстве ios.

Источник

Нет, устройства Android или iOS (т. Е. Мобильный webkit) не могут воспроизводить видео так, как вам нужно. Видео откроется в видеопроигрывателе устройства по умолчанию.

Источник

Зачем тебе windows.onload обойти автозапуск? Если я правильно помню настройку preload пометить нет

<video src="vid.mov" preload=”none”></video>

должно сработать.

Кроме того, вы пытались использовать подход " Видео для всех"? При этом вы сможете воспроизводить видео на веб-странице, а не на ОС телефона, так что я считаю, что вы можете добиться того же эффекта на поддерживаемых устройствах.

РЕДАКТИРОВАТЬ: Что касается ответа j08691, альтернативный подход для iPhone может заключаться в разработке простого приложения для просмотра веб-сайтов для сайта для iPhone, которое имеет обходной путь для проблемы воспроизведения видео не несколько.

Источник
Другие вопросы по тегам