Detekce podporovaných video formátů pomocí JavaScriptu

Během několika posledních let jsme byli svědky toho, jak nové zvukové, obrazové a obrazové formáty nabývají podoby, aby zpochybnily starší formáty, které jsme používali od počátku webu. To je skvělý pokrok, protože máme větší výpočetní výkon a byly vyvinuty lepší kompresní algoritmy, což vede k rychlejšímu načítání a vykreslování. Hurá do rychlosti!

Problém: stejně jako u všech ostatních funkcí přidaných do prohlížeče, některé prohlížeče získávají podporu formátu médií rychleji než jiné a některé prohlížeče odmítají podporovat dané formáty. Jednoduše řečeno: Nyní musíme provést detekci funkcí na médiích, což jsme tradičně nemuseli dělat. Před chvílí jsem psal o tom, jak můžete zjistit podporu WEBP v prohlížeči, a nyní bych vám rád ukázal, jak zjistit podporované formáty videa – je to jednodušší, než si myslíte!

HTMLVideoElement.prototype.canPlayType

canPlayType je tajemstvím zjišťování podpory formátu videa v prohlížeči. Chcete-li použít tuto metodu, musíte nejprve vytvořit <video> instance prvku:

const video = document.createElement('video');

Potom zavoláte canPlayType , předáním typu MIME formátu a dalších podrobností podle potřeby:

video.canPlayType('video/webm; codecs="vp8, vorbis"'); // "probably"

Existují tři možné výsledky z canPlayType :

  • "probably" :Zdá se, že typ média lze přehrát
  • "maybe" : Nelze zjistit, zda lze daný typ média přehrát bez přehrání
  • "" :Typ média nelze přehrát

Funkce detekce formátu

Modernizr obsahuje malou funkci pro detekci podpory formátu videa; Věnoval jsem chvíli této logice a vytvořil svou vlastní funkci pro všeobecné použití bez Modernizr:

function supportsVideoType(type) {
  let video;

  // Allow user to create shortcuts, i.e. just "webm"
  let formats = {
    ogg: 'video/ogg; codecs="theora"',
    h264: 'video/mp4; codecs="avc1.42E01E"',
    webm: 'video/webm; codecs="vp8, vorbis"',
    vp9: 'video/webm; codecs="vp9"',
    hls: 'application/x-mpegURL; codecs="avc1.42E01E"'
  };

  if(!video) {
    video = document.createElement('video')
  }

  return video.canPlayType(formats[type] || type);
}

// Usage
if(supportsVideoType('webm') === "probably") {
  // Set the video to webm
}
else {
  // Set the video to mpeg or mp4
}

Účinnost funkce detekce funkcí používám k vytvoření pouze jednoho prvku a jednoduše vrátím výsledek, pokud je volán více než jednou. Při použití této funkce dnes Chrome hlásí následující:

canPlayType Tato metoda vám umožnila detekovat nejlepší kompresi a podporované formáty a naservírovat je vašim uživatelům, a tak maximálně využít možnosti vašeho prohlížeče. Buďte agresivní se svými formáty médií, aby byl váš web co nejrychlejší!