Streamování se stává naším hlavním zdrojem zábavy a prodejci bojují o vytvoření nejlepšího formátu videa, a proto bude stále důležitější, abychom před zveřejňováním videí na našich webech zjišťovali podporu videa v zařízení a prohlížeči. Méně přemýšlíme o zvuku, ale platí stejný princip: před použitím zjistěte, zda je daný zvukový formát podporován. Jak tedy zjistíme, zda je daný typ zvuku podporován?
Podporu audio formátu můžeme zjistit pomocí HTMLAudioElement.prototype.canPlayType
, stejná strategie, která se používá u videa:
// Create an audio element so we can use the canPlayType method const audio = document.createElement('audio'); // Does the device support mp3? audio.canPlayType('audio/mpeg'); // "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
Můžeme vytvořit funkci podobnou mému supportsVideoType
funkce pro usnadnění detekce zvuku:
function supportsAudioType(type) { let audio; // Allow user to create shortcuts, i.e. just "mp3" let formats = { mp3: 'audio/mpeg', mp4: 'audio/mp4', aif: 'audio/x-aiff' }; if(!audio) { audio = document.createElement('audio') } return audio.canPlayType(formats[type] || type); } // Usage if(supportsVideoType('mp3') === "probably") { // Set the video to mp3 } else { // Set the video to wav or other format }
Věnovat čas detekci okrajových zvukových a obrazových formátů se vyplatí, což vám umožní poskytovat čistší média s lepší kompresí a zkrátit tak dobu načítání. Mějte na paměti tyto funkce JavaScriptu pro váš velký nebo malý mediální web!