Хитрость номер раз: пусть у нас на странице есть красивое, но необязательное видео. Заставка, например. Нам хочется её показывать клиентам с десктопными браузерами и хорошими каналами, но не хочется показывать мобильным клиентам. Что делать?

Делать можно, например, следующее:

var video = document.createElement("video");

var t = setTimeout(function() {  
    alert("No, we can't!);
    t = null;
}, 2000);

video.addEventListener("canplay", function() {  
    if (t === null) return;
    clearTimeout(t); t = null;
    if (video.buffered.length > 0 && video.buffered.end(0) > 0) {
        alert("Yes, we can!);
    } else {
        alert("No, we can't!);
    }
});

video.preload = "auto";  
video.src = VIDEO_URL;  

Происходит тут вот что. Мы создаём видеоэлемент с атрибутом preload равным "auto". Это значит, что браузер сам будет решать, предзагружать видео или нет. Десктопные браузеры всегда подгружают начальные секунды видео, а мобильные — нет (подробнее). На это мы и будем полагаться при принятии решения.

Событие canplay срабатывает, когда браузер считает, что готов воспроизвести видео. Десктопные браузеры вызывают его после предзагрузки, мобильные — либо сразу (Android) либо вообще не вызывают (iOS). На второй случай мы взводим таймер — если через две секунды событие не пришло, то считаем, что браузер не хочет загружать видео или канал слишком медленный. В этом случае видео показывать не нужно.

Если же событие canplay произошло, то мы смотрим на свойство video.buffered. Оно представляет собой набор отрезков времени, которые предзагрузил браузер. Если этих отрезков больше нуля и конец первого ненулевой, то браузер что-то предзагрузил, и мы можем играть видео. Если же браузер ничего не загрузил, то и играть не стоит.

Хитрость номер два: предположим, мы решили играть видео. Но беда в том, что браузеры сами решают, сколько им кэшировать видеоданных, и часто бывает так, что браузер отрапортовал, что готов, запускаешь видео, а оно затыкается и начинает что-то докачивать. Форсированно предзагрузить видео можно так:

var x = new XMLHttpRequest();  
x.onload = function () {  
    var newVideoUrl =  URL.createObjectURL(x.response);
    // …
};
x.open("GET", VIDEO_URL);  
x.responseType = "blob";  
x.send();  

Мы насильно грузим весь видеофайл через XMLHttpRequest. Когда файл загрузился, из полученных данных формируем локальный URL через URL.createObjectURL. И этот URL уже можем передать в проигрыватель видео — он указывает на наши локальные данные, и дозагрузки уже не будет.

Конечно, такой приём стоит применять только для коротких роликов.

Этот пост в блоге POST /blog (20:21 25.03.2015)

https://david-m.livejournal.com/1307508.html