Возникла некая проблема при загрузке видео html5: Вставил на страницу 8 видео html5 - тегом, идущих один за другим ( видео не большие, по 15 сек. ). Так вот, в браузере на десктопе все норм грузит, но вот на мобильных устройствах все жутко тормозит, ( появление ошибки "aw snap!", белый экран, вылетает браузер и тд. ) в общем не показывает видео. Такое ощущение, что не хватает железа. Уменьшил количество видео до 3 - ничего не вылетает.
Отсюда и вопрос, как можно выйти из данной ситуации? Если это реально. Может кто сталкивался?
Вот код вставки видео если что: ( таких 8 штук, только урл разный )
<video width="100%" height="auto" controls="true" preload="metadata">
<source src="visionaire-8.mp4" type="video/mp4"><source src="visionaire-8.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Предлагаю сделать через ajax, т.е. у тебя есть страница с 3 видео, и при скроллинге добавляются новые видео
<div class="cat">
<div class="media">
<script>
$(".cat").on("touchmove", scrolling);
var count = 4;
var begin = 0;
videoitem();
function scrolling() {
videoitem();
}
function videoitem() {
$.ajax({
async: true,
type: 'POST',
url: 'video.php',
data: {
count: count,
begin: begin * count
},
success: onAjaxSuccess
});
function onAjaxSuccess(data) {
$(".media").append(data);
}
begin++;
}
</script>
</div>
</div>
Точно не помню но у браузеров есть лимит на "preload" видео, соответственно на телефонах он меньше чем на пк.
Как вариант всем поставить вместо preload="metadata" =>
preload="none" и добавить poster="src"
ну или первому оставить preload="metadata", а остальным none
Вышел из ситуации просто показом видео в попапе, так не происходит инициализация многих плееров одновременно
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости