Как установить разные data-src для пк и телефонов?

Question

[deskostyuk]

Всем доброго времени суток! Есть код, который указывает src видео-файла после загрузки основных файлов:

<video loop="loop" playsinline="" muted="muted" class="abs-video abs" data-src="files/uploads/main.mp4"></video>
<script>
document.addEventListener('DOMContentLoaded', function(){ // или 'load', попробуйте что больше подойдет
const player = document.querySelector('.abs-video');
player.oncanplay = function(){ player.play() }; // вызовется, когда загрузится хотя-бы несколько первых кадров
player.src = player.dataset.src; // подставляем правильный src
})
</script>

Как можно сделать из этого кода подгрузку разных путей к видео для телефонов и пк? Чтобы на телефонах видео с весом поменьше показывалось. Надеюсь на помощь. Спасибо.

Comments

[Анатолий Куликов]

Кто рендерит документ?

Answer 1

[iBird Rose]

а в чем проблема? проверяешь, к примеру window.innerWidth и пишешь разные пути:

let mySrc = 'files/uploads/main.mp4';
if (window.innerWidth < 992) {
mySrc = 'files/uploads/mobile.mp4';
} else {
mySrc = 'files/uploads/main.mp4';
}

Comments

[deskostyuk]

Я не совсем понимаю как в рамках этого кода сделать это (сам код писал не я, а хороший человек с этого сайта).

[iBird Rose]

deskostyuk,

document.addEventListener('DOMContentLoaded', function(){ // или 'load', попробуйте что больше подойдет
	const player = document.querySelector('.abs-video');
	let mySrc = 'files/uploads/main.mp4';
	if (window.innerWidth < 992) {
		mySrc = 'files/uploads/mobile.mp4';
	} else {
		mySrc = 'files/uploads/main.mp4';
	}
	player.dataset.src = mySrc;
	player.oncanplay = function(){ player.play() }; // вызовется, когда загрузится хотя-бы несколько первых кадров
	player.src = player.dataset.src; // подставляем правильный src
})