Не работает autoplay для тега video , уже и jQury отключал, писал autoplay=»autoplay» , и создавал пустую страницу где кроме video ничего нету, ничего не помогло и видео не воспроизводится само! Только если добавить controls , но автоплея не будет все равно, оно запуститься только после нажатия на него!
И так, когда к нам пришёл html5, то он с собой принёс очень много новых плюшек таких как canvas, footer и т.д. Одной из таких плюшек оказался тег видео. На самом деле невероятно полезный и простой в своём исполнении. Многие из вас даже знаю про атрибут autoplay, но у данного атрибута возникают сложности на мобильных устройствах под ОС Андроид и IOS.
Давайте для начала разберёмся в чём проблема. А проблема на самом деле проста, и нет, не в том, что эти браузеры этих ОС не поддерживаю данный тег или атрибут. На самом деле всё заключается в том, что эти производители телефонов задумываются хоть немного о своих потребителях и запретили данную возможность по некоторым причинам:
- Это сажает батарею (по мнению Apple), и по этому необходимо было запретить автозапуск видео.
- Звук. У многих пользователей может быть включён звук. Если автозапуска нет, то перед просмотром пользователь сможет заранее убрать громкость если это необходимо.
Разумеется есть и другие мелкие причины, но перечисленные выше самые основные.
И так, что же нам делать в этой ситуации, если заказчик попросил вас разместить видео на своём сайте, при этом запретить пользователю управлять им + оно должно быть с автозапуском и циклично.
Первым делом вам необходимо установить атрибут muted со вместо с атрибутом autoplay. Благодаря этому ваше видео воспроизведётся, но без звука, таким образом, мы сообщим браузеру смартфона, что по большому счёту ничего страшного не произойдёт
Если же у вас возникли какие либо трудности, например на iPhone. Т.е. вы используете атрибут muted, но по каким либо причинам видео не воспроизводится, в таком случае нам необходимо будет прибегнуть к JQuery. Надеюсь вы тоже юзаете эту библиотеку.
И так что мы собственно сделали. Данный скрипт сначала проверяет с какого устройства мы вошли, если это действительно мобильное устройство, то запускаем функцию по обработке нашего тега с видео. В первую очередь добавляем контроллеры, потому что многие мобильные устройства не дают запускать видео без ведома пользователя, и если использовать просто .play() без контроллеров, то в таком случае результат может оказаться нулевым. И так, контроллеры добавлены, и далее мы берём объект нашего тега и при помощи .play() запускаем. Благодаря этому видео запустится сразу после загрузки страницы, но есть одно но! Нативные браузеры, такие как webview на андройде, всё равно не позволят вам запустить видео автоматически, к сожалению с этим уже ничего не поделаешь, вся проблема в том, что они блокируют любое действие происходящее на сайте без ведома пользователя. Ради интереса сам лично пытался написать скрипт обманку, что бы видео запускалось например при событии scroll документа, толку было ноль, так было небольшое извращение, повесил событие на BODY, что при клике на него, запускать видео, и при завершении загрузки документа сделал .trigger(‘click’); Ну и что вы думаете, тригер клик сработал, об этом мне сообщил появившейся alert() который я так же для проверки запилил в скрипт, ну а видео так и не запустилось. Но зато оно прекрасно запустилось, когда я сам лично сделал клик по BODY. Если у вас всё же есть какое либо решение, то прошу напишите его в комментарии к данной статье.
ОБНОВЛЕНИЕ ОТ 22.05.2018
Чтобы запустить video в браузере на iPhone используя тег video, вам необходимо добавить следующие атрибуты.
webkit-playsinline и playsinline
На этом пока что всё, надеюсь если вы столкнётесь с подобной задачей, то уже будете знать решение. А так же если эта статья оказалась для вас интересной, то пишите комментарии и не забывайте делиться в соц. сетях
У меня есть следующий код:
- хорошо отображается как в Chrome, так и в Firefox
- В Firefox он играет как ожидалось
- В Chrome отображается, но не «автозапуск». Это проблема.
- Если я нажимаю на нее (в Chrome), она играет нормально
Ничего не работало в Chrome
Затем я также попытался изменить кодек, как рекомендовано в https://en.wikipedia.org/wiki/HTML5_video , но он также не работал:
Итак, теперь я в тупике. Спасибо за любые указатели! Очень ценится.
7 ответов
Я просто читал эту статью , и она говорит:
Важно: порядок видеофайлов жизненно важен; В настоящее время у Chrome есть ошибка, при которой он не будет автоматически запускать видео в формате .webm, если оно приходит после чего-либо еще.
Так что, похоже, ваша проблема будет решена, если вы сначала поместите .webm в ваш список источников. Надеюсь, что это поможет.
TL; DR Вы все еще всегда доступны для автовоспроизведения muted видео
Кроме того, если вы хотите автовоспроизвести видео в iOS, добавьте атрибут playsInline , потому что по умолчанию iOS пытается просмотреть полноэкранные видео https: // webkit.org/blog/6784/new-video-policies-for-ios/
Возможно, это не так в тот момент, когда был задан вопрос, но с Chrome 66 автовоспроизведение заблокировано.
Вам нужно добавить playsinline autoplay muted loop , chrome не разрешить автозапуск видео, если он не отключен, также прямо сейчас я не знаю, почему он не работает на всех устройствах Android, im пытается посмотреть, является ли это конкретным вариантом Если я что-то нашел, я сообщу
Проблема с Chrome: после некоторых исследований я обнаружил, что иногда это не работает на хроме, потому что в ответном режиме вы можете активировать функцию сохранения данных и блокировать любое видео автостарта
Extremeandy упомянул, что видеоролик Chrome 66 отключен.
Изучив это, я обнаружил, что отключенные видео по-прежнему могут автоматически запускаться. В моем случае у видео не было никакого звука, но добавление приглушенного к тегу видео исправлено:
Надеюсь, это также поможет другим.
Попробуйте это, когда я попытался отключить звук, проверьте это демо в скрипте codpen