Чи можете ви автоматично відтворювати 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();
    }
}

Держава залишається 0на iPad. На моєму настільному сафарі воно проходить 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 in 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()">

— дсгрифін
джерело

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, використовуючи веб-код, Audiocontext замість звукового тегу Можливо, це буде гарне місце для початку.

— Франциско

1

Детальніше, будь ласка - які конкретні шляхи існування відсутні для підтримки Autoplay?

— Umopepisdn

11

Те, що вони повинні робити, - це дозволити автовідтворення під час роботи з wifi, а також мати ручне відтворення або підказати користувачеві, що відео хоче автоматично відтворюватись у мобільній мережі.

— Рік

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, тому наявність видимого відео-елемента взагалі не потрібна. У обробці для "click" (або "touchchend" на мобільному пристрої).

$(".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, це все-таки, на жаль, не було б вирішенням ваших проблем, що відтворює час відтворення аудіо.

Я сподіваюся, що хтось вважає цю інформацію корисною, це врятувало б мені тиждень поганої доставки новин клієнту, який переконаний, що у них є ця функція, і я радий знайти спосіб її доставити в підсумку.

EDIT

Подальші результати свідчать про те, що вищевказане рішення призначене лише для пристроїв iPhone / iPod. IPad відтворює відео на Safari до повного екранізації, тому вам знадобиться якийсь механізм для зміни розміру відео при натисканні перед відтворенням, інакше ви отримаєте аудіо та відео.

— Брендон Бак
джерело

2

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

— Мікрос

12

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

webView.mediaPlaybackRequiresUserAction = NO;

Автовідтворення працює для мене на iOS.

— Ер Лі
джерело

29

Це не працює для веб-сайту, це працює лише для сайтів, де ви їх обгорнули програмою Native.

— Брендон Бак

5

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

— Брендон Бак

6

@izuriel, щоб бути справедливим, він позначив це питання "об'єктивом-c" та "какао-дотиком", тож НЕ

— ТАКЕ

3

@Kloar Теги зазвичай додаються як засіб для отримання більшої уваги або загального непорозуміння проблеми, яку вони намагаються вирішити. Людина, яка задає питання, могла подумати, що згадка target-c - це те саме, що сказати "iOS" (і подібне для какао-дотику). Тег "uiwebview" не вказаний, хоча тому я виключаю це як життєздатний варіант. Питання зазначає використання Safari на робочому столі та iPad (нічого про програму) та використовує демо-коди Javascript для налагодження ситуації. Загалом, я б сказав, що це більш безпечна ставка, що це питання справді шукало Інтернет, а не рідні рішення.

— Брендон Бак

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

— cottonBallPaws

11

Як і в iOS 10, відео тепер може автоматично відтворюватись, але лише вони вимкнено або не мають аудіозапису. Так!

Коротко:

<video 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

7

У цій довідці Safari HTML5 ви можете прочитати

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

— Гіона
джерело

38

"окрім GIF-файлів, які можуть бути декількома МБ та використовувати смугу пропускання, навіть не розуміючи людей"

— Simon_Weaver

@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>

— Мохаммед Алі Акбарі
джерело