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

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

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

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

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

EDIT: Разметка базовая <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>

mobile javascript html html5-video mobile-webkit
person m90    schedule 25.01.2012    source источник
comment
Не могли бы вы вставить html-код тега видео, который вы используете?   -  person Andriy Budzinskyy    schedule 18.03.2012
comment
@andriy.budzinskyy Добавил разметку.   -  person m90    schedule 19.03.2012

Ответы (4)


arrow_upward
11
arrow_downward

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

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

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

person j08691    schedule 19.03.2012
comment
Знаете ли вы, есть ли возможность обмануть заполнитель для одного видео? - person m90; 19.03.2012
comment
Я пробовал нечто подобное и так и не смог обойти это ограничение. - person j08691; 19.03.2012
comment
Я думаю, что ios не любит автозапуск или цикл из-за пропускной способности пользователя. Очень сложно заставить аудиофайл воспроизводиться в фоновом режиме так, как работает браузер. Я действительно не знаю обходного пути, но было бы интересно. - person Blynn; 20.03.2012
comment
@Blynn: Разве вы не можете обойти ограничение автовоспроизведения <audio> точно так же, как я обхожу ограничение автовоспроизведения <video> в своем вопросе? - person m90; 23.03.2012
comment
Я пытался обойти это с помощью javascript, html и css, но, похоже, Apple этого не допустит. Вы можете сделать это по щелчку, но это все. - person Blynn; 23.03.2012

arrow_upward
1
arrow_downward

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

person Mustafa Amin    schedule 19.03.2012

arrow_upward
1
arrow_downward

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

person Blynn    schedule 20.03.2012
comment
Это интересный момент, никогда не думал о том, чтобы посмотреть, как большие справляются с этим. Веб-видео YouTube и vimeo на Android также будут открываться во внешнем проигрывателе, но, к сожалению, возможно ли смотреть встроенные видео YouTube на iOS? - person m90; 21.03.2012

arrow_upward
1
arrow_downward

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

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

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

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

EDIT: Что касается ответа j08691, альтернативным подходом для iPhone может быть разработка простого приложения для веб-просмотра сайта для iPhone с обходной путь для проблемы с воспроизведением нескольких видео.

person Chibueze Opata    schedule 24.03.2012
comment
Насколько я знаю, мобильные устройства будут игнорировать атрибут предварительной загрузки элементов <video> (поэтому взлом Javascript). Видео для всех, к сожалению, служит мне файлом для скачивания на моем КПК. Приложение, вероятно, очень хорошая идея, но не вариант в моем случае. Но спасибо за ваши усилия. - person m90; 25.03.2012
comment
хм, так ты отказываешься от этого? Я действительно не знаю, почему приложение является вариантом, но вы смогли создать его на Android? Также я слышал о нативном взаимодействии с ios из javascript. И если вам это действительно очень нужно, вы можете использовать конвертер видео в gif. Их много в сети. Удачи - person Chibueze Opata; 25.03.2012
comment
Дело в том, что я пытаюсь создать механизм, который впоследствии можно будет повторно использовать в различных ситуациях (т.е. поместить его в jQuery-плагин). Для рассматриваемого сайта я всегда могу найти обходной путь, но было бы неплохо узнать, существует ли один подход для всех (которого на данный момент не существует). Спасибо за отзыв. - person m90; 25.03.2012