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

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

12 голосов
/ 25 января 2012

Я создаю сайт, на котором у меня есть несколько <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 ]

11 голосов
/ 19 марта 2012

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

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

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

1 голос
/ 25 марта 2012

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

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

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

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

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

1 голос
/ 20 марта 2012

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

1 голос
/ 19 марта 2012

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

...