Принудительное видеовоспроизведение с помощью браузера Chrome на мобильных устройствах

Question

При использовании мобильного устройства автоматическое воспроизведение видео не работает в Chrome, но оно работает на Firefox & Opera. (Не уверен, что такое история с Safari, поскольку у меня нет устройства iOS).

ВАРИАНТ 1: Использование тега видео:

HTML код:

<video autoplay loop poster="images/bg.jpg" id="video_bg"> 
<source src="video.webm" type="video/webm"> 
<source src="video.mp4" type="video/mp4"> 
</video> 

код CSS:

video#video_bg { 
position: fixed; right: 0; bottom: 0; 
min-width: 100%; min-height: 100%; 
width: auto; height: auto; z-index: -100; 
background: url(../images/bg.jpg) no-repeat; 
background-size: cover; 
} 

ВАРИАНТ 2: Использование YouTube встраиваемого кода видео с набором авто-игры: (Опять же, работает на рабочем столе, но не на мобильном телефоне)

html code:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe> 

Мой вопрос:

Есть ли Javascript код, который заставит автовопроизведение в браузере Chrome при просмотре страницы на мобильном устройстве? Любые другие предложения, пожалуйста? Спасибо!

Answer 1

Не совсем. По той же причине, что мобильный Safari и Chrome игнорировать autoplay и preload атрибуты audio и video тегов, они также будут не честь в play() или load() методы - или любой метод, который будет вызывать активность данных по сети - для связанных объектов, если только они вызываются непосредственно в обработчиках обратного вызова взаимодействия с пользователем. Причина заключается в предотвращении потенциально дорогостоящих сборов данных для пользователей по сотовым данным. Дополнительная информация в Apple's Documentation.

Прочитано Overcoming iOS HTML5 audio limitations - фантастическая статья, которая объясняет вашу точную ситуацию и предоставляет примеры решений.

хак я использовал в прошлом, чтобы поместить один из допустимых «пользователь-взаимодействия» событий (например, onmousedown, onmouseup, onclick и ontouchstart) на элемент высокого уровня и инициировать загрузку данных в его обратный вызов. В качестве наглядного примера вы можете разместить событие ontouchstart на body - которое будет срабатывать всякий раз, когда пользователь делает что-либо на странице - чтобы данные начали загружаться как можно раньше.

var body = document.getElementById('body'); 
var audio = document.getElementById('audio'); 

var loadData = function() { 
    audio.load(); 
}; 

body.addEventListener('ontouchstart', loadData, false); 

Но лучшее решение действительно зависит от вашего варианта использования. Всегда рассматривайте audio sprites, а также используя инфраструктуру WebAudio, такую ​​как HolwerJS, может действительно упростить вашу жизнь!