v Web development

Autoplay video na webu

Pár poznatků, jak do webu vložit video, které se má automaticky začít přehrávat.

HTML5 video tag:


<video id="hp-video">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Převod videa

Nejprve je dobré mp4 video zkomprimovat pro použití na webu. K tomu se hodí Handbrake, kde zvolíme Preset Fast 1080p30 a u Format jsem zaškrtnul Web optimized. Z více než 230MB jsem se dostal na necelých 13MB.

Dále pomocí nástroje ffmpeg připravíme WebM variantu, kterou umí používat Chrome a Firefox.
Pokud nemáte nainstalovaný ffmpeg, na macOS je nejjednodušší udělat to přes Homebrew:
brew install ffmpeg –-with-libvpx –-with-libvorbis –-with-fdk-aac
Pak už můžeme konvertovat:
ffmpeg -i video.mp4 -c:v libvpx -crf 10 -b:v 1M -c:a libvorbisvideo.webm

Problémy v Chrome

Od dubna 2018 prohlížeč Chrome blokuje autmaticky přehrávané video se zvukem. Asi nechce, abyste dostali infarkt, když přijdete na nějaký web. Osobně mám problém s tím donutit ho, aby přehrával i muted video.

Chrome dokonce měří, jak dlouho se na video ve stránce díváte, aby zjistil, jestli vás zaujalo. Pokud ano, dá tuto stránku na whitelist a příště jí už autoplay povolí. Statistiky můžete vidět na interní stránce chrome://media-engagement

Na stránce pro vývojáře je doporučeno sledovat promise, kterou vrací funkce play(). Pokud zjistíte, že vaší stránce nebyl autoplay povolen, můžete uživateli zobrazit tlačítko, kterým si v případě zájmu video spustí:


var promise = document.getElementById('hp-video').play();
if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
    var video = document.getElementById('hp-video');
    video.controls = true;
    video.load();
  });
}

Líbilo se? Tak to sdílej, dík:)Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Email this to someone
email

Komentáře

Komentář