Задать вопрос
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-штук. Хотелось бы не подменять на смартфонах видео на бэкграунд, а чтобы все-таки проигрывалось видео автоматом.
  • Вопрос задан
  • 3132 просмотра
Комментировать
Подписаться 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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подключить сервер к сети
27 апр. 2024, в 02:39
1500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
Ещё заказы