floydman-89
@floydman-89
В постоянном изучении...

Как автоматически воспроизводить 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-штук. Хотелось бы не подменять на смартфонах видео на бэкграунд, а чтобы все-таки проигрывалось видео автоматом.
  • Вопрос задан
  • 2194 просмотра
Решения вопроса 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, и важна скорость загрузки сайта с телефона.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
bubandos
@bubandos
bash'у, javascript'ую, php'лю, css'аю, html'каю
А если так:
document.getElementById('bg').play();
Работает?
Пути правильно прописаны?
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы