Задать вопрос
floydman-89
@floydman-89
В постоянном изучении...
javascript

Как автоматически воспроизводить video на Android / iOS?

Всем привет.

Есть устройство на Android 4.4, а также следующий код (fullscreen видео):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Test</title>
	
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
	<link rel="stylesheet" href="../css/style.css">

</head>
<body>
	<video playsinline webkit-playsinline autoplay muted loop id="bg" controls>
	    <source src="../media/code.mp4">
	    <source src="../media/code.webm" type="video/webm">
	    <source src="../media/code.ogv" type="video/ogg">
	</video>
</body>
</html>


На десктопах проблем нет. На Android (и вроде iPhone'ах - завтра проверю) не запускается видео.

Пробовал запустить через 
var video = document.querySelector('bg');
video.play();


ситуация на Android не меняется - серый фон и иконка старта (при клике на нее тоже ничего не происходит).

Камрады, может у кого есть решение этой проблемы без применения всяких jQuery-штук. Хотелось бы не подменять на смартфонах видео на бэкграунд, а чтобы все-таки проигрывалось видео автоматом.
  • Вопрос задан
  • 3326 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
На айфоне не запустится, как ни старайся. Это особенность айфона, защита траффика.

UPD: Спасибо Anton fon Faust за добавление информации по Айфонам
https://github.com/bfred-it/iphone-inline-video

Рабочее решение для андройда тут https://arm1.ru/blog/html5-video-kak-fon-stranitsy

С Android тяжелее всего. Автопроигрывание не работает. Кнопка Play появляется только если добавить для тэга video аттрибут controls, чтобы появились стандартные контролы управления. Это, увы, не так уже красиво. Но это ещё не всё. Для того, чтобы видео начало играть, нужно ещё добавить дополнительно Javascript-обработчик, который принудительно скажет video, чтобы оно играло:

var video =  document.getElementById(element);
video.addEventListener('click',function(){
	  video.play();
},false);

Для определения Android, чтобы добавить аттрибут controls, я просто использовал Detect.js:

var ua = detect.parse(navigator.userAgent);
if ( ua.os.family === 'Android' ) {
	video.setAttribute( 'controls','controls' );
}

PS: А вообще, я бы рекомендовал на мобильных устройствах не показывать видео.
Просто сделать красивую фоновую картинку, реально, зачем тратить трафик людей.
Не все сидят именно с WI-FI, и важна скорость загрузки сайта с телефона.
Ответ написан
11 комментариев
11 комментариев
Пригласить эксперта
Ответы на вопрос 1
bubandos
@bubandos
bash'у, javascript'ую, php'лю, css'аю, html'каю
А если так:
document.getElementById('bg').play();
Работает?
Пути правильно прописаны?
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы