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

Question

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

<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();
    }
}

Государство остается на 0 на iPad. На моем рабочем столе Safari, он проходит через 0, 1 и наконец 4, На айпаде доходит только до 4 если я вручную коснусь стрелки "играть".

Более того, звоня $("#periscopevideo").get(0).play() от клика через onClick тоже работает

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

125

jquery ios objective-c html5 cocoa-touch

Источник

user987818 19 сен '12 в 13:48

7 ответов

Решение

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

Хотя @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 и причудливый элемент, скрывающийся, как в случае с тегом video.

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

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

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

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

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

16

Источник

user445322 12 ноя '13 в 06:01

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

webView.mediaPlaybackRequiresUserAction = NO;

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

12

Источник

user1899912 15 ноя '13 в 03:27

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

Короче:

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

Более подробная информация здесь: https://webkit.org/blog/6784/new-video-policies-for-ios/

12

Источник

user2913725 29 сен '16 в 18:54

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

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

7

Источник

user1193335 19 сен '12 в 13:51

Сначала отключите звук видео, чтобы обеспечить автоматическое воспроизведение в 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>

3

Источник

user523864 29 июн '17 в 13:45

Safari в macOS и iOS будет работать только с атрибутом playsinline .

Поэтому, если вы пытаетесь воспроизвести видео внутри элемента с идентификатором videoHolder , вам придется сделать так, как показано в следующем коде.

      var vid = document.querySelector('#videoHolder');//dom with id of video container
var video = vid.querySelector('video');//the video element

video.setAttribute("playsinline",""); //add attribute playsinline
video.mute(); //mute the video
video.play(); //play the video

Или, если вы используете тег видео html5, используйте атрибут в теге, например. ссылка на приведенный ниже HTML

      <video autoplay="autoplay" loop="loop" muted="muted" playsinline="">
<source src="https://yourdomain.com/your_video.mp4" type="video/mp4">
</video>

0

Источник

user2513296 06 окт '22 в 10:46

Другие вопросы по тегам jquery ios objective-c html5 cocoa-touch

user1586880 19 сен '12 в 13:50 2012-09-19 13:50 · Accepted Answer · 2012-09-19 13:50

обновление 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 Reference о том, почему встроенные медиафайлы нельзя воспроизводить в 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()">