it-blog.club
Что делать если тег video не автозапускает просмотр на смартфоне

Что делать если тег video не автозапускает просмотр на смартфоне

И так, когда к нам пришёл html5, то он с собой принёс очень много новых плюшек таких как canvas, footer и т.д. Одной из таких плюшек оказался тег видео. На самом деле невероятно полезный и простой в своём исполнении. Многие из вас даже знаю про атрибут autoplay, но у данного атрибута возникают сложности на мобильных устройствах под ОС Андроид и IOS.

Давайте для начала разберёмся в чём проблема. А проблема на самом деле проста, и нет, не в том, что эти браузеры этих ОС не поддерживаю данный тег или атрибут. На самом деле всё заключается в том, что эти производители телефонов задумываются хоть немного о своих потребителях и запретили данную возможность по некоторым причинам:

  1. Это сажает батарею (по мнению Apple), и по этому необходимо было запретить автозапуск видео.
  2. Звук. У многих пользователей может быть включён звук. Если автозапуска нет, то перед просмотром пользователь сможет заранее убрать громкость если это необходимо.

Разумеется есть и другие мелкие причины, но перечисленные выше самые основные.
И так, что же нам делать в этой ситуации, если заказчик попросил вас разместить видео на своём сайте, при этом запретить пользователю управлять им + оно должно быть с автозапуском и циклично.
Первым делом вам необходимо установить атрибут muted со вместо с атрибутом autoplay. Благодаря этому ваше видео воспроизведётся, но без звука, таким образом, мы сообщим браузеру смартфона, что по большому счёту ничего страшного не произойдёт


<video id="video" loop autoplay muted><!--loop - повторять видео, autoplay - автозапуск, muted - выключенный звук-->
<source src="video/my_video.mp4" type="video/mp4">
</video>

Если же у вас возникли какие либо трудности, например на iPhone. Т.е. вы используете атрибут muted, но по каким либо причинам видео не воспроизводится, в таком случае нам необходимо будет прибегнуть к JQuery. Надеюсь вы тоже юзаете эту библиотеку.


isMobile = {//Проверяем с какого устройства мы зашли
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if (isMobile.any()) {//Если действительно с мобильно устройства то запускаем нашу функцию
itismobile();
}
function itismobile(){
$('video').attr('controls','controls');//Добавляем к тегу видел контролы
$('#video').get(0).play();//Автозапуск
}

И так что мы собственно сделали. Данный скрипт сначала проверяет с какого устройства мы вошли, если это действительно мобильное устройство, то запускаем функцию по обработке нашего тега с видео. В первую очередь добавляем контроллеры, потому что многие мобильные устройства не дают запускать видео без ведома пользователя, и если использовать просто .play() без контроллеров, то в таком случае результат может оказаться нулевым. И так, контроллеры добавлены, и далее мы берём объект нашего тега и при помощи .play() запускаем. Благодаря этому видео запустится сразу после загрузки страницы, но есть одно но! Нативные браузеры, такие как webview на андройде, всё равно не позволят вам запустить видео автоматически, к сожалению с этим уже ничего не поделаешь, вся проблема в том, что они блокируют любое действие происходящее на сайте без ведома пользователя. Ради интереса сам лично пытался написать скрипт обманку, что бы видео запускалось например при событии scroll документа, толку было ноль, так было небольшое извращение, повесил событие на BODY, что при клике на него, запускать видео, и при завершении загрузки документа сделал .trigger('click'); Ну и что вы думаете, тригер клик сработал, об этом мне сообщил появившейся alert() который я так же для проверки запилил в скрипт, ну а видео так и не запустилось. Но зато оно прекрасно запустилось, когда я сам лично сделал клик по BODY. Если у вас всё же есть какое либо решение, то прошу напишите его в комментарии к данной статье.

ОБНОВЛЕНИЕ ОТ 22.05.2018

Чтобы запустить video в браузере на iPhone используя тег video, вам необходимо добавить следующие атрибуты.

webkit-playsinline и playsinline

Пример:


<video id="video" muted autoplay loop webkit-playsinline playsinline>
      <source src="video.mp4">
</video>

На этом пока что всё, надеюсь если вы столкнётесь с подобной задачей, то уже будете знать решение. А так же если эта статья оказалась для вас интересной, то пишите комментарии и не забывайте делиться в соц. сетях


it-blog.club 2847
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать