Как отключать автоматическое воспроизведение видео на андроид и ios?

Question

[Сергей Игнатьев]

Здравствуйте. Я использую фоновое видео на сайте. Как его отключать на мобильных устройствах, чтобы загрузка не шла долго?
Помогите со скриптом, пожалуйста.

Конечно же, такой способ не помогает:

@media (max-width:750px) {
.video{
    display:none;
}

}

?

Answer 1

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

<!-- video -->
<div id="trailer" class="is_overlay">
    <video id="video" width="100%" height="auto" preload="auto" autoplay loop>
        <source src="/video/smoke.mp4"></source>
        <source src="/video/smoke.webm" type="video/webm"></source>
    </video>
</div>
<!-- /video -->

$(document).ready(function(){
    var w = screen.width;
    if (w <= '1200') {
        $("#trailer").replaceWith("<div class='video_image'></div>");
    };
});

Я обычно через jQuery подменяю содержимое блока с видео на другой блок, с картинкой.
То есть удаляется всё, что внутри ID trailer и вместо него добавляется просто блок с картинкой.
https://goo.gl/wlF9h9 тут пример

Comments

[Сергей Игнатьев]

получается при таком способе, видео вообще не загружается при маленьком разрешении, не есть трафик?

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

Сергей Игнатьев: Не подгружается, сразу при обращении к странице код с видео заменяется, а потом начинается рендер.

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

Сергей Игнатьев: Инспектором и вкладкой Сеть можете проверить, я уже смотрел. Я не просто так пример показал.

[Сергей Игнатьев]

Sergey Goryachev: еще подскажите пожалуйста, если разрешение больше 1200, то какие свойства у блока на который заменяем, чтобы его не было видно?

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

Сергей Игнатьев: Если больше 1200 и видео видно, то первый код. А если меньше 1200 (ну или любая другая цифра) то, что во втором коде.

[Сергей Игнатьев]

Sergey Goryachev: все, понял, спасибо большое!

Answer 2

[Владлен Хеллсайт]

Данный код css оставить, а вот js добавить если jQuery конечно, но возможно есть варианты лучше.

var $video = $('.video');

if ($video.css('dispay') === 'none') {
	$video.remove();
	/* Или можно другие действия */
}

Comments

[Сергей Игнатьев]

при display:none, видео ведь все равно грузится будет, просто его не будет видно...

[Владлен Хеллсайт]

Сергей Игнатьев: он удалит элемент видео, вместо этого лучше подставить изображение. Загрузка прекратится из за ненадобности.