Как сверстать видео на бэкграунде кроссбраузерно?

Question

[tarthur]

<video autoplay loop class="fillWidth">
    <source src="video/fishermen_resting/Fishermen-Resting.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
    <source src="video/fishermen_resting/Fishermen-Resting.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

такая верстка не запускается на андроиде напр.

Comments

[Алексей Николаев]

Как пользователь мобильного интернета, я бы отрывал руки любителям показать мне фоновое видео с автопроигрыванием.

[Сергей Горячев]

Алексей Николаев: Соглашусь))) Хорошо, что на айфоне это сделать нельзя от слова совсем.

Answer 1

[Сергей Горячев]

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' );
}

Кроме того, чтобы это работало на Android, нельзя использовать атрибут type внутри source.

Answer 2

[Гурбан Гурбанов]

Есть вот тут https://rishabhp.github.io/bideo.js/, не грузит видео на мобилки пока сам этого не сделаешь.
И еще есть тут https://coverr.co/

Comments

[account-6]

Моя твоя не понимать.