Можно ли автоматически воспроизводить видео HTML5 на iPad?

123

<video>Теги autoplay="autoplay"атрибут отлично работает в Safari.

При тестировании на iPad видео нужно активировать вручную.

Я подумал, что это проблема с загрузкой, поэтому запустил цикл, проверяющий состояние носителя:

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

Состояние остается на 0iPad. На моем настольном сафари он проходит 0, 1и наконец 4. На iPad это происходит, только 4если я вручную нажимаю стрелку «воспроизведение».

Кроме того, работает и вызов $("#periscopevideo").get(0).play()по клику onClick.

Есть ли какие-либо ограничения Apple в отношении автовоспроизведения? (Кстати, я использую iOS 5+).

— Джем
источник

Связанные / дубликаты: stackoverflow.com/questions/2841966/… , stackoverflow.com/questions/4259928/…

— apsillers

Возможно, нам стоит взглянуть на обнаружение браузера и на то, следует ли вам вызывать playVideo (): stackoverflow.com/questions/26895492/…

— Redtopia

Эта работа для меня github.com/Stanko/html-canvas-video-player

— dimitar

Полезный пост в блоге по этой теме: webkit.org/blog/6784/new-video-policies-for-ios

— Matthias M

Opera mini в ios по умолчанию поддерживает автовоспроизведение, в то время как Chrome, Firefox и Safari не поддерживают и не предлагают параметры для включения.

— аноним

156

Обновление iOS 10

Запрет на автовоспроизведение был снят с iOS 10, но с некоторыми ограничениями (например, A может автоматически воспроизводиться, если нет звуковой дорожки).

Чтобы увидеть полный список этих ограничений, см. Официальную документацию: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 и ранее

Начиная с iOS 6.1, автоматическое воспроизведение видео на iPad больше невозможно.

Мое предположение относительно того, почему они отключили функцию автоматического воспроизведения?

Что ж, поскольку у многих владельцев устройств есть ограничения на использование данных / пропускную способность на своих устройствах, я думаю, что Apple чувствовала, что пользователь сам должен решать, когда они инициируют использование пропускной способности.

После небольшого исследования я нашел в документации Apple следующий отрывок, касающийся автоматического воспроизведения на устройствах iOS, чтобы подтвердить свое предположение:

«Apple приняла решение отключить автоматическое воспроизведение видео на устройствах iOS с помощью сценариев и атрибутов.

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

Вот отдельное предупреждение на справочной странице Safari HTML5 о том, почему встроенные мультимедиа не могут быть воспроизведены в Safari на iOS:

Предупреждение . Чтобы предотвратить нежелательные загрузки по сотовым сетям за счет пользователя, встроенные мультимедийные файлы не могут автоматически воспроизводиться в Safari на iOS - пользователь всегда инициирует воспроизведение. Контроллер автоматически предоставляется на iPhone или iPod touch после начала воспроизведения, но для iPad необходимо либо установить атрибут управления, либо предоставить контроллер с помощью JavaScript.

Что это означает (с точкой зрения кода) является то , что в JavaScript play()и load()методы неактивные до тех пор , пока воспроизведение инициированного пользователя, еслиplay() илиload() метод не вызываются действиями пользователя (например , щелчок событие).

Обычно кнопка воспроизведения, инициированная пользователем, работает, а onLoad="play()"событие - нет.

Например, это будет проигрывать фильм:

<input type="button" value="Play" onclick="document.myMovie.play()">

В то время как следующее ничего не сделает на iOS:

<body onload="document.myMovie.play()">

— dsgriffin
источник

1

Хммм 3 месяца создания онлайн-будильника для iPhone Safari на ветер! Мы (sleep.fm) придумали способ не давать телефону спать, пока приложение открыто, но теперь с iOS 6.1 звук будильника не воспроизводится. В iOS 6.0 все работало нормально. Есть обходной путь?

— chaser7016

1

Ой, подождите, наш мобильный веб-будильник (sleep.fm) для iPhone Safari снова запущен и работает, так что есть обходные пути из-за отсутствия поддержки автовоспроизведения html5.

— chaser7016

1

@ Jonah1289 Согласно вашему сообщению в блоге на Sleep.fm, Брайан Кавальер написал в Твиттере ссылку на github со следующим заголовком. Автозапуск аудио на ipad или iphone с использованием webkitaudiocontext вместо аудио тега. Может быть, хорошее место для начала.

— Франциско

1

Пожалуйста, более подробно - какие конкретные обходные пути существуют из-за отсутствия поддержки Autoplay?

— Umopepisdn

11

Что они должны сделать, так это разрешить автовоспроизведение при подключении к Wi-Fi и либо включить воспроизведение вручную, либо указать пользователю, что видео хочет автоматически воспроизводиться при подключении к мобильной сети.

— Ric

16

Я хочу начать с того, что я понимаю, что этот вопрос старый и уже имеет принятый ответ; но, как несчастный пользователь Интернета, который использовал этот вопрос как средство завершения, но вскоре после этого оказался неправ (но не раньше, чем я немного расстроил своего клиента), я хочу добавить свои мысли и предложения.

Хотя @DSG и @Giona верны и в их ответах нет ничего плохого, есть творческий механизм, который вы можете использовать, чтобы, так сказать, «обойти» это ограничение. Это не означает, что я потворствую обходу этой функции, как раз наоборот, это просто некоторые механизмы, позволяющие пользователю по-прежнему «чувствовать», как будто видео или аудиофайл «воспроизводится автоматически».

Быстрая работа - спрятать видеотег где-нибудь на мобильной странице, поскольку я создал адаптивный сайт, я делаю это только для небольших экранов. Тег видео (примеры HTML и jQuery):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

JQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

Когда это скрыто на странице, когда пользователь «щелкает», чтобы посмотреть фильм (все еще взаимодействие с пользователем, это требование невозможно обойти) вместо перехода на дополнительную страницу просмотра, я загружаю скрытое видео. В основном это работает, потому что тег мультимедиа на самом деле не используется, а вместо этого повышается до экземпляра Quicktime, поэтому наличие видимого элемента видео вообще не требуется. В обработчике для "клика" (или "таченд" на мобильном телефоне).

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

И альт. Что касается UX, пользователь нажимает на видео для воспроизведения, и Quicktime начинает воспроизведение выбранного видео. Это остается в пределах ограничения, что видео можно воспроизводить только с помощью действий пользователя, поэтому я не навязываю данные никому, кто не решает смотреть видео с помощью этой службы. Я обнаружил это, когда пытался выяснить, как именно Youtube справился с этим со своим мобильным телефоном, который, по сути, представляет собой действительно хорошее построение страницы Javascript и скрытие причудливых элементов, как в случае с тегом видео.

tl; dr Вот несколько «обходной путь», чтобы попытаться создать UX-функцию «автовоспроизведение» на устройствах iOS, не выходя за рамки ограничений Apple, и при этом пользователи должны решать, хотят ли они смотреть видео (или аудио, скорее всего, хотя я не тестировал), не загрузив его без их разрешения.

Кроме того, для человека, который прокомментировал это с сайта sleep.fm, это, к сожалению, не было бы решением ваших проблем, связанных с воспроизведением звука по времени.

Я надеюсь, что кто-то сочтет эту информацию полезной, это сэкономило бы мне неделю доставки плохих новостей клиенту, который был непреклонен в том, что у него есть эта функция, и я был рад найти способ доставить ее в конце.

РЕДАКТИРОВАТЬ

Дальнейшие исследования показывают, что вышеуказанный обходной путь предназначен только для устройств iPhone / iPod. IPad воспроизводит видео в Safari до того, как оно будет полноэкранным, поэтому вам понадобится какой-то механизм для изменения размера видео при нажатии перед воспроизведением, иначе у вас будет звук, а не видео.

— Брэндон Бак
источник

2

Было бы лучше использовать $dummyVideo.get(0)вместо скобок, чтобы jQuery мог корректно завершиться неудачей, если ваш выбор пуст.

— Micros

12

Просто установите

webView.mediaPlaybackRequiresUserAction = NO;

У меня автозапуск работает на iOS.

— Эр Ли
источник

29

Это не работает для веб-сайтов, это работает только для сайтов, на которых вы обернули их собственным приложением.

— Brandon Buck

5

Я имею в виду, что с веб-страницы (как задается вопрос) это что-то совершенно недоступное - да, Javascript в браузере не может этого сделать. Это работает только в том случае, если вы запускаете свой сайт внутри WebView из приложения, которое вы контролируете, поэтому на самом деле это не дает решения вопроса.

— Брэндон Бак

6

@izuriel, честно говоря, он пометил вопрос с помощью "objective-c" и "cocoa-touch", так что не НАСТОЛЬКО

— надумано

3

Теги @Kloar обычно добавляются как средство привлечь больше внимания или общего недопонимания проблемы, которую они пытаются решить. Человек, задающий вопрос, возможно, подумал, что упоминание objective-c было то же самое, что сказать «iOS» (и то же самое для cocoa-touch). Тег "uiwebview" не указан, поэтому я бы исключил его как жизнеспособный вариант. В вопросе упоминается использование Safari на рабочем столе и iPad (ничего о приложении) и используются демонстрационные коды Javascript для отладки ситуации. В общем, я бы сказал, что это более безопасная ставка, этот вопрос действительно искал веб-решения, а не собственные.

— Брэндон Бак,

На Android: developer.android.com/reference/android/webkit/…

— cottonBallPaws

11

Начиная с iOS 10, видео теперь могут воспроизводиться автоматически, но только они либо отключены, либо не имеют звуковой дорожки. Ура!

Коротко:

<video autoplay> elements теперь будут учитывать атрибут autoplay для элементов, которые соответствуют следующим условиям:
- <video> элементам будет разрешено автовоспроизведение без жестов пользователя, если их исходный носитель не содержит звуковых дорожек.
- <video muted> элементы также будут разрешены для автоматического воспроизведения без жестов пользователя.
- Если <video>элемент получает звуковую дорожку или становится отключенным без жестов пользователя, воспроизведение приостанавливается.
- <video autoplay> Элементы будут воспроизводиться только тогда, когда они видны на экране, например, когда они прокручиваются в область просмотра, становятся видимыми с помощью CSS и вставляются в DOM.
- <video autoplay> элементы будут приостановлены, если они станут невидимыми, например, при прокрутке из области просмотра.

Подробнее здесь: https://webkit.org/blog/6784/new-video-policies-for-ios/

— JackKalish
источник

4

Атрибут autoplay работает только на ПК и не работает на мобильных устройствах. Я много раз пробовал.

— huykon225 09

7

В этом справочнике по Safari HTML5 вы можете прочитать

Чтобы предотвратить нежелательные загрузки по сотовым сетям за счет пользователя, встроенные медиа-файлы не могут автоматически воспроизводиться в Safari на iOS - пользователь всегда инициирует воспроизведение. Контроллер автоматически предоставляется на iPhone или iPod touch после начала воспроизведения, но для iPad необходимо либо установить атрибут управления, либо предоставить контроллер с помощью JavaScript.

— Giona
источник

38

«кроме файлов GIF, которые могут иметь

— размер

@Simon_Weaver x12 раз в большинстве случаев, чтобы быть точным.

— Бурак Токак

2

Позвольте видео сначала отключить звук, чтобы обеспечить автовоспроизведение на iOS, затем включите его, если хотите.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>

— Мохаммад Али Акбари
источник