Как я могу автоматически воспроизводить медиафайлы в iOS> = 4.2.1 Mobile Safari? - PullRequest
Новая
       16

Как я могу автоматически воспроизводить медиафайлы в iOS> = 4.2.1 Mobile Safari?

23 голосов
/ 23 ноября 2010

Мне не удается воспроизвести аудиофайлы в Mobile Safari на iOS 4.2.1 в любой ситуации, кроме обработчика события щелчка, выполненного пользователем. Даже тогда, если player.play() вызывается любым асинхронным способом (ajax, setTimeout и т. Д.), Это не работает.

Я пытался дозвониться до player.load() до player.play(). Я попытался вызвать событие click для элемента dom, чей обработчик вызывает player.play(). Я пытался использовать аудио и видео теги.

Все лазейки, которые работали до iOS 4.2.1, кажутся закрытыми. Есть идеи?

Ответы [ 9 ]

16 голосов
/ 28 ноября 2010

Начиная с iOS 4.2.x, загрузка мультимедиа не будет начата, если нет события пользовательского ввода, такого как touchstart.

Поэтому ответ нет нет способа автоматически воспроизводить мультимедиа с помощью JavaScript или чего-то еще.

14 голосов
/ 15 декабря 2010

Существует один способ автоматического воспроизведения видео / аудио файла на 4.2.1. Создайте iframe, установите в качестве его источника URL-адрес медиа-файла и добавьте iframe в тело. Это будет автовоспроизведение. 

var ifr=document.createElement("iframe");
ifr.setAttribute('src', "http://mysite.com/myvideo.mp4");
ifr.setAttribute('width', '1px');
ifr.setAttribute('height', '1px');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr);
6 голосов
/ 21 ноября 2012

Как уже говорили здесь и согласно документации Apple, MobileSafari НЕ поддерживает атрибут autoplay в теге video. Тем не менее, в iOS 6 это работает. Похоже, это ошибка, которую Apple исправила в iOS 6.0.1 (и предположительно в iOS 6.1).

Не полагайтесь на автозапуск, работающий в iOS 6, если вы случайно наткнулись на него, работая в iOS 6.0.

-Michael

4 голосов
/ 07 декабря 2010

В качестве обходного пути я попытался связать код load () / play () с событием click, а затем программно вызвать событие click.Этот подход работал в Desktop Safari, но не в Mobile Safari.

1 голос
/ 16 апреля 2012

Как насчет этого?

Создайте аудио-спрайт с помощью Sound Manager 2, предварительно загрузите и кешируйте его с первого взаимодействия с пользователем, а затем воспроизводите по мере необходимости.

Будет ли это работать?

1 голос
/ 24 ноября 2010

Это работало на iPad до последних обновлений 4,2 ночи: 

$(function() {
    var Beep = document.createElement('audio');
    Beep.setAttribute('src', 'beep-23.mp3');
    Beep.load();
    Beep.play();
}

Мой Beep.play(); все еще работает для события щелчка, но начальный Beep.play() перестал работать ...

0 голосов
/ 27 октября 2012

На моем iPad третьего поколения с ОС IOS 6 внезапно начал работать автоматический запуск тегов HTML5!(У меня была установлена ​​IOS 6 в течение нескольких недель, и я почти уверен, что сразу протестировал эту функцию, но заметил, что она работает только сегодня вечером.) Я не помню, чтобы видел какое-либо уведомление от Apple, хотя я виделчто мобильному Safari была предоставлена ​​возможность поддерживать загрузку файлов через 

<form><input type="file" .../></form>

- еще одна функция, которая мне была нужна, но которую Apple отказала.

0 голосов
/ 19 октября 2012

Автоигра поддерживается (в моих тестах) с iPhone 5 (iOS 6) с использованием разъема для наушников.

0 голосов
/ 09 декабря 2010

Пожалуйста, попробуйте этот код, он работает в обеих версиях, вам нужно динамически добавлять управление звуком на странице. это работает. 

var isiPad = false;
if (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i)) { 
    isiPad = true; 
}
$(function() { 
    if (isiPad) { 
        var audioElement2 = document.createElement('audio'); 
        audioElement2.setAttribute('src', 'img/bgsound.mp3'); 
        audioElement2.controls = true; 
        audioElement2.loop = true; 
        audioElement2.load();
        audioElement2.play();
    }
});
...