html video: при удалении source ролик продолжает воспроизводиться

Question

Есть задача - для устройств с экраном шире 767px загружать видео, а для мобильных загружать и отображать только картинку/постер.

Средствами css её не решить, потому что если просто скрывать видео для мобильных устройств, оно всё равно будет загружаться и кушать трафик. Поэтому делаю на js/jquery.

С событием $(window).load() всё работает отлично. Проблема возникает с $(window).resize(). Если сначала запустить маленький экран и потом его расширять, то всё ок - видео появляется только при ширине более 767px. А вот в обратную сторону это не работает - из DOM удаляется source, но видео продолжает воспроизводиться.

$(window).on('load resize', function(){
	if($(window).width() >= 767) {
		$('#bg-video').html('<source src="https://pmas.ru/upload/medialibrary/5a0/videoplayback.mp4" type="video/mp4">');
	}
	else {
		$('#bg-video').html('');
	}
});

#bg-video {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="bg-video" autoplay="true" loop="true" muted="muted" poster="img/video-poster.jpg"></video>

Почему видео продолжает воспроизводиться, хотя source уже нету в DOM, и как это поведение переопределить?

Answer 1

Я б сделал это, допустим таким образом.

$(window).on('load resize', function() {
  if ($(window).width() >= 767) {
    $('#bg').html('<video id="bg-video" autoplay="true" loop="true" muted="muted" poster="img/video-poster.jpg"><source src="https://pmas.ru/upload/medialibrary/5a0/videoplayback.mp4" type="video/mp4"></video>');
  } else {
    $('#bg').html('<img id="bg-img" src="https://i.imgur.com/pUnEs7o.jpg">');
  }
});

body {
  margin: 0;
  overflow: hidden;
}

#bg {
  width: 100%;
  height: 100vh;
}

#bg > video,
#bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>

БЛОГ НА HUSL

html video: при удалении source ролик продолжает воспроизводиться

Ответы (1 шт):