Stáhněte si adaptivní přehrávač pro html5. Výhody HTML5 ve srovnání s Adobe Flash Player. Nejlepší pluginy HTML5 Video Player pro WordPress

Tyto přehrávače videa jsou open source a mohou přehrávat videa bez Adobe Flash Player. Kromě toho mohou weboví vývojáři přidávat své vlastní funkce do přehrávače videa prostřednictvím jQuery API. HTML5 je stále více podporováno různými prohlížeči, ale přesné informace o tom, které prohlížeče tento přehrávač podporují, najdete na webu vývojáře.

O jednom video přehrávači a jeho instalaci jsem již psal: .

Nyní se podívejme na další přehrávače videa...

1. Otevřete přehrávač standardních médií (OSM).

Nahradil Adobe Flash Player, který poskytoval sledování videa v dobrá kvalita, HTML5 dorazilo OSM přehrávačnový standard sledování videí na internetu.

2. HTML5 Video Org

Jeden z důležité funkce HTML5 znamená, že můžete vkládat videa přímo pomocí značky .

Použití HTML5 Javascript knihovna video bude fungovat jako nové mobilní zařízení a ve starších prohlížečích.

3. Plugin OIPlayer jQuery

Funguje v Safari Google Chrome, Firefox, IE. Flash nebo Java však musí být nainstalována na vašem počítači.

4. Video přehrávač projektor

Tento přehrávač videa je také open source. Přehrávač videa je zapsán v Javascript založený, takže podporuje kompatibilitu napříč prohlížeči.

5.

Tento hráč již není k dispozici na oficiálních stránkách.

Závěr

Toto je 5 z mnoha různých přehrávačů HTML5. Některé weby se již snaží používat HTML5 video přehrávače, ale zároveň tak, aby vše vypadalo správně ve starších prohlížečích.

Pokud porovnáte YouTube, který existuje dnes, s tím, který existoval před 5-7 lety, pak jsou to úplně dva různé koncepty......

Stovky terabajtů exkluzivního obsahu, stále rostoucí publikum a – hodně se změnilo, ale nejdřív………………….

→ I v předvečer roku 2017 Průvodce YouTube oznámil nový hráč HTML5.

Zajímavé je, že zpočátku měli uživatelé právo volby, ale teď byli všichni donuceni nový prohlížeč .

Není divu, že nová funkce má příznivce i odpůrce, takže níže si povíme o technologii html5 na YouTube a také o tom, jak ji deaktivovat ↓↓↓

Co je to za přehrávač???

Mnoho uživatelé YouTube koncem roku 2016 jsme začali pozorovat problémy s obsluhou!!!

Jak se ukázalo, důvodem byl další nový produkt – videopřehrávač html5.

Příklad problému ↓↓↓

Proč nová funkce se pro mnohé ukázalo jako zátěž a jak to vypnout - další podrobnosti

→ Přehrávač html5 je nový standard pro přehrávání videa, který nahradil již zastaralý flash player.

→ Na konci roku 2016 si každý mohl funkci vyzkoušet aktivací odpovídajícího tlačítka ().

Vývojáři slíbili mnoho zajímavých vychytávek, včetně:

  • nedostatek zranitelnosti a inhibice;
  • rychlé otevření válečky;
  • podpora 64bitového videa;
  • reprodukce nových standardů (H.264, HTMLVideoElement atd.).

Ve skutečnosti se vše ukázalo mnohem horší, protože místo slibovaných „inovací“ uživatelé dostali mnoho problémů:

  • neustálé zmrazování;
  • vzhled artefaktů ve videu;
  • nesprávné zobrazení v mnoha prohlížečích.

Jak se ukázalo, hlavní důvody souvisí s:

  1. zastaralý hardware
  2. nesoulad softwaru
  3. řidiči
  4. prohlížeč a mnoho dalšího.

Nyní na adrese () můžete vidět nápis „Přehrávač HTML5 se nyní používá, kdykoli je to možné“, takže většina diváků již nemá na výběr.

Pozor!

Chcete-li zkontrolovat, který přehrávač se na vašem počítači používá momentálně, najeďte myší na video a klikněte na pravé tlačítko.

Pokud je ve spodní části položka „About html5 player“, použije se odpovídající přehrávač

Zde ↓

Proto jsme se připravili nejlepší způsoby jak zakázat přehrávač html5 na YouTube v různé prohlížeče.

To je docela realistické a nezabere to moc času, takže čtěte pozorně. ⇓⇓⇓

Odebereme tohoto hráče zFirefox

Na Problém s Firefoxem lze vyřešit minimálně dvěma způsoby:

1) Prostřednictvím speciálních doplňků (Zakázat přehrávač YouTube HTML5)

2) Or ručně.

V prvním případě stačí nainstalovat příslušné rozšíření pro deaktivaci přehrávače html5 na YouTube.

Ale podíváme se na nejjednodušší metodu níže: ↓↓↓

  • Do vyhledávacího pole zadejte „about:config“, čímž se otevře panel pro vývojáře.
  • Zkopírujte tyto komponenty do samostatného dokumentu: "media.ogg.enabled", "media.wave.enabled", "media.webm.enabled", "media.windows-media-foundation.enabled".
  • Každou z nich zkopírujeme do odpovídajícího vyhledávacího řádku, najdeme ji v seznamu a deaktivujeme. Chcete-li to provést, můžete na záznam dvakrát kliknout.
  • Tato akce musí být provedena s každou výše uvedenou součástí.
  • Nyní restartujte prohlížeč.

Můžete si všimnout, že videa se nyní přehrávají prostřednictvím flash přehrávače !!!

Obecně nic složitého a za pouhých 5 minut si budete moci vychutnat svá oblíbená videa.

Nyní pojďme zjistit, jak to udělat v jiných prohlížečích ⇓⇓⇓

Odebereme tento přehrávačPROTIChromeAOpera

Nyní se podíváme na další způsob, jak zakázat používání tohoto přehrávače speciální aplikace— Zakázat přehrávač YouTube HTML5 ↵

Dáno metoda bude fungovat pro prohlížeče Opera a Chrome.

Níže si na příkladu popíšeme, jak toto rozšíření nainstalovat Prohlížeč Google Chrome:

  • následujte odkaz, který jsme uvedli výše;
  • klikněte na tlačítko „Instalovat“ a počkejte na dokončení procesu;
  • restartujte prohlížeč.

V sekci "Nastavení" - " Další nástroje"-"Rozšíření" můžete vidět, že je nástroj nainstalován.

P.S.— Ujistěte se, že je aktivováno zaškrtávací políčko „Povolit“.

Otevřete libovolné video a klikněte klikněte pravým tlačítkem myši a všimněte si, že přehrávač Flash již běží.

V případě potřeby můžete deaktivovat přehrávač YouTube html5 v rozšířeních a poté přehrávač Flash nebude znovu fungovat. V Prohlížeč Opera postup je obdobný, takže nemá cenu ho podrobně popisovat.

Zkušenosti ukazují, že tato metoda pomáhá zbavit se neustálé brzdění videa a další problémy s přehráváním.

Můžeme tedy dojít k závěru, že vedení YouTube představilo poněkud hrubý produkt, naštěstí však můžete taková vylepšení vždy zakázat sami.

V v poslední době Bez mobilních zařízení si již svůj život nedokážeme představit. A všichni chceme maximální multitasking a rychlá práce zařízení Ale problém přehrávání videa a zvuku na mobilních zařízeních bez pomocí Flash a Silverlight už dlouho trvá. Proto začaly být tyto standardy postupně nahrazovány novým – HTML5 přehrávačem pro zvuk a video. Efektivita přehrávání HTML5 videa souvisí s nativní podpora média (pro co nejefektivnější přehrávání mediálního souboru je nutné jej přehrávat nativně, to znamená, že mezi prohlížečem a operačním systémem by měla být maximální integrace a operační systém s hardwarem).

Nyní přejdeme k praktické části a vymyslíme, jak přidat video na webovou stránku HTML.

Použití značky VIDEO

Chcete-li přidat video na webovou stránku z pomocí HTML používá se značka video. Aplikuje se následovně:

Přehrávač videa bude vypadat nějak takto (každý prohlížeč má svůj vlastní styl):

Ale stojí za zvážení, že:

  1. Ne všechny prohlížeče značku podporují video;
  2. Ne každý prohlížeč podporuje použitý video kodek.

Pokud je s prvním bodem výrazně méně problémů (většina moderních prohlížečů přece se zadaným tagem pracuje správně), pak stojí za to věnovat pozornost druhému bodu. Promluvme si o této problematice trochu podrobněji.

Podpora video kodeků HTML5 v různých prohlížečích

Pro úplnost informací je vhodné uvést následující tabulku:

ProhlížečGoogle ChromeMozilla Firefox SafariOperaInternet Explorer
WebM Jíst Jíst Žádný Jíst Žádný
H.264 Jíst Žádný Jíst Žádný Jíst
ogg/theora Jíst Jíst Žádný Jíst Žádný

Jak vidíte, ne univerzální formát, což by umožnilo přehrávání videí ve všech prohlížečích. Tato situace se rozhoduje následujícím způsobem: Video soubor v několika formátech je nahrán na server a poté do tagu video Je specifikováno několik kodeků. Vypadá to asi takto:

Pokud je tedy k dispozici vhodný kodek, prohlížeč automaticky načte zdroj videa.

atributy tagu VIDEO

Chcete-li označit atributy video by měl obsahovat:

  • src- cesta k souboru videa;
  • automatické přehrávání- vynucené přehrávání videa po načtení stránky;
  • ovládací prvky- zobrazí se ovládací panel videa (přehrát, pozastavit, hlasitost atd.);
  • šířka/výška- nastavuje šířku/výšku přehrávače videa;
  • smyčka- označuje, že se video po dokončení opakuje (přehrávání ve smyčce);
  • plakát- definuje adresu obrázku, který se zobrazí, když se video nepřehrává nebo je nedostupné;

Poznámka: Nejjednodušší způsob, jak přidat video na web, je použít služba YouTube. Tvůrce webových stránek Nubex má podrobný článek o přidávání videí z YouTube:

Adobe Flash Playeržije po svém posledních letech. Tato platforma je zastaralý a vývojáři jej přestanou podporovat do roku 2020. Mnoho společností, programátorů a nadšenců již začalo opouštět osvědčený formát ve prospěch progresivních, ale stále „surových“ technologií. Jednou z těchto novinek je přehrávač videí „HTML5“, který by mohl potenciálně nahradit starý dobrý Flash Player.

Ne všichni uživatelé se mohou pochlubit výkonnými a moderními osobními počítači se všemi aktualizacemi operační systém(ovladače, kodeky). Ne každý ho má nainstalovaný (čím vyšší verze, tím méně chyb při provozu). Ale každého zajímá, jak se život vaří globální síť Internet. Tisíce filmů a televizních seriálů, desítky tisíc klipů, statisíce zábavných amatérských videí lze nalézt a sledovat prostřednictvím World Wide Web kdekoli na planetě Zemi.

Pokud se při sledování videa na počítači objeví grafické zkreslení, uživatel by se neměl rozčilovat a hledat alternativu ke sledování. První věc, kterou musíte udělat, je zkontrolovat funkčnost vašeho PC, zda jsou dostupné a funkční všechny aktualizace, ovladače a kodeky. Druhou nuancí je kontrola přehrávače videa zabudovaného do samotného internetového prohlížeče Mozilla. Vývojáři z Mozilla Corporation se snaží potěšit všechny své fanoušky a běžné uživatele vyhledávač. Každý má tedy možnost prohlížet si video obrázky prostřednictvím různých přehrávačů: Flash Player nebo HTML5. Chcete-li zkontrolovat, který přehrávač je v prohlížeči Firefox povolen, stačí kliknout pravým tlačítkem myši na obrazovku s videem.

Jak zakázat HTML5 ve Firefoxu

Pokud na zakázku osobní počítač podřadný v technické specifikace svým moderním bratrům, můžete zkusit změnit přehrávač z HTML5 na Adobe Flash Hráč. Chcete-li to provést, musíte jít na skrytá nastavení prohlížeče zadáním vyhledávací lišta « about:config" Vývojáři laskavě varují před riziky spojenými se změnami „jemného“ nastavení. Přebíráme zodpovědnost.

V okně „Hledat:“ musíte pro snadné nalezení změn parametrů zadat anglické slovo„média“.

Čtyři parametry, které lze ve výchozím nastavení povolit, musí být změněny z „true“ na „false“. To znamená, vypněte je dvojitým kliknutím levé tlačítko myši.

  • media.ogg.povoleno
  • media.wave.povoleno
  • media.webm.enabled
  • media.windows-media-foundation.enabled

Po restartu Prohlížeč Mozilla Nastavení Firefoxu vstoupí v platnost a nový hráč HTML5 bude nahrazeno Adobe Flash Player.

Jak povolit HTML5 ve Firefoxu

Pokud je nutné manipulaci zvrátit a změnit starý gramofon od Adobe k progresivnímu analogu, musí uživatel provést stejné manipulace s výše uvedenými parametry od „false“ po „true“. Po restartování internetového prohlížeče by se video mělo zobrazovat bez rušení nebo závad.

Dříve, pokud jste chtěli přidat video na webovou stránku, museli jste použít prvek , представляющий собой универсальный контейнер для внешних объектов. Подобные приложения были в малой степени интерактивными и слабо взаимодействовали с окружающими их элементами на веб-странице.

Второй подход заключался в использовании подключаемого модуля браузера, например Silverlight или Flash . И хотя технология Flash позволяла использовать готовый видеоплеер или создавать собственный, но её использование порождало большое нагромождение HTML-разметки, а видеофайлы нужно было кодировать в требуемый формат.

HTML5-видео — новый стандарт для размещения мультимедийных файлов в сети с оригинальным программным интерфейсом без привлечения подключаемых модулей. С помощью элемента


Рис. 1. Внешний вид видеоплеера в основных браузерах

Как добавить HTML5-видео на веб-страницу

1. Элемент

Поддержка браузерами

IE: 9.0, атрибут muted — с 10.0
Edge: 12.0
Firefox: 3.5
Chrome: 4.0, атрибут muted — с 30.0
Safari: 4.0, атрибут muted — с 5.0
Opera: 11.5
iOS Safari: 3.2
Android Browser: 2.3
Chrome for Android: 44

В простом варианте HTML-разметка для размещения видеофайла на странице имеет следующий вид:

Атрибут controls отвечает за появление элементов управления видеоплеером. Вы можете добавить изображение с помощью атрибута poster , которое браузер будет использовать, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения, а также задать высоту и ширину видео.

Tabulka 1. Atributy značek
Atribut
automatické přehrávání Automatické přehrávání video souboru ihned po načtení stránky.
ovládací prvky Řekne prohlížeči, co má zobrazit základní prvky ovládání přehrávání (přehrávání, pauza, hlasitost).
výška Nastavuje výšku okna pro zobrazení dat videa, možné hodnoty: px nebo %
smyčka Smyčka přehrávání videa.
ztlumený Vypne zvuk při přehrávání videosouboru.
plakát URL souboru obrázku, který se zobrazí při načítání souboru videa nebo dokud uživatel neklikne na tlačítko PLAY. Pokud atribut není nastaven, zobrazí se první snímek video souboru.
předpětí Atribut zodpovědný za předpětí video obsah. Volitelné, některé prohlížeče to ignorují. Možné hodnoty:
auto – Prohlížeč stáhne celý soubor videa, aby byl dostupný, když jej uživatel začne přehrávat.
metadata – Prohlížeč stáhne první malou část video souboru, aby zjistil jeho základní charakteristiky.
žádný - nepřítomnost automatické stahování video soubor.
src Obsahuje absolutní nebo relativní adresu URL souboru videa.
šířka Nastavuje šířku okna pro zobrazení video dat, možné hodnoty: px nebo %

2. Vložitelný interaktivní obsah

Živel definuje kontejner pro externí aplikace nebo interaktivní obsah (jinými slovy plugin). Většina podporovaných prohlížečů tento prvek dlouho. Nicméně, tato značka nebyl zahrnut ve specifikaci HTML4, byl přidán do specifikace HTML5. Použitím Na webové stránky můžete přidávat nejen video soubory, ale také vektorové obrázky ve formátu swf:

3. Video kodeky

Při sledování videa jej musí přehrávač dekódovat. Některé přehrávače používají softwarové dekódování video streamu, jiné hardwarové.

Důležité! Protože každý prohlížeč podporuje specifický kodek, pro zajištění přehrávání video obsahu ve všech prohlížečích musí být video soubor umístěn v několika formátech.

H.264- vysoce kvalitní kodek z MPEG, rozdělený do profilů pro podporu zařízení s minimálními schopnostmi i zařízení s vysokým rozlišením.

Ogg Theora- OTEVŘENO volný standard u videa je kvalita a výkon o něco nižší než u standardu H.264.

VP8- OTEVŘENO bezplatný kodek, kvalitou podobnou H.264. Podporováno ve Firefoxu, Chrome a Opeře.

4. Video kontejnery


Rýže. 2. Video kontejner

Jakýkoli soubor videa je kontejner souborů, ve kterém jsou uloženy další soubory. Zvukové a obrazové stopy jsou spojeny pro přehrávání videa. Metadata obsahují informace o tomto videu – úvodní obrázek, titulky atd. Mezi oblíbené formáty kontejnerů videí patří následující:

Ogg(.ogv, .oga, .ogx, .ogg) - formát kontejneru s otevřeným zdrojový kód pro video kodek Theora a zvukový kodek Vorbis. Funguje ve Firefoxu, Chrome a Opeře.
Typ MIME: video/ogg.

MPEG 4(.mp4) je kontejnerový formát pro video kodek H.264 a zvukový kodek AAC. Funguje v Safari a Chrome. Kóduje video, včetně vysoké rozlišení, pro celou řadu zařízení, jako jsou iPhone, iPod a iPad.
Typ MIME: video/mp4.

WebM(.webm) – formát kontejneru s otevřeným zdrojovým kódem pro video kodek a zvukový kodek VP8 společnosti Google Ogg Vorbis. Funguje ve Firefoxu, Chrome, Opeře a Adobe Flash Player.
Typ MIME: video/webm.

Audio Video Interleave(.avi) - formát je určen pro záznam zvuku a pohyblivého obrazu, odpovídá specifikaci RIFF.
Typ MIME: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo.

Matroska(.mkv) je populární video kontejner, který může obsahovat videa ve formátu H.264, VP8 nebo Theora.
Typ MIME: video/x-matroska, audio/x-matroska.

V současné době prohlížeče podporují tři hlavní formáty videa:

Formát Video kodek Zvukový kodek
.mp4 H.264 A.A.C.
.ogg/.ogv Theora Vorbis
.webm VP8 Vorbis

Videa ve formátu .avi nelze na webu přehrávat pomocí HTML5.. Proto je potřeba jej překódovat do těchto tří formátů s příslušnými video a audio kodeky pro výstup na web. K tomu můžete použít konvertory videa uvedené na stránce níže.

Abyste se ujistili, že prohlížeč umí pracovat se soubory videa, musíte vytvořit soubor .htaccess ve složce, kde se nachází webová stránka, která definuje typy MIME pro video:

AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm

I když je podporováno HTML5 video moderní prohlížeče, nicméně, pro Internet Explorer (9+) A Safari požadovaný nainstalované pluginy Microsoft Media Hráč A Apple QuickTime respektive.

5. Alternativní mediální zdroje

Živel slouží k určení více mediálních zdrojů pro

6. Přidání titulků a titulků

Živel použit jako podřízený prvek

Tabulka 4. Atributy značek
Atribut Popis, přijatá hodnota
výchozí Označuje, že tato stopa je přehrávána ve výchozím nastavení. Pouze jeden prvek může obsahovat tento atribut.
druh Určuje typ textové stopy, která se zobrazí ve výchozím nastavení. Přijímané hodnoty:
titulky - překlad dialogů a zvukové efekty, zobrazený jako text přes video (pro neslyšící uživatele).
kapitoly - přidá názvy kapitol jako seznam pro navigaci v mediálním souboru.
popisy - přidá zvukový popis toho, co se ve videu děje (pro nevidomé uživatele).
metadata - metadata používaná skripty se uživatelům nezobrazují.
titulky - duplikace textu zvuková stopa video, zobrazené jako titulky k videu.
označení Přidá název skladby. Pokud tento atribut není nastaven, prohlížeč použije výchozí hodnotu.
src Obsahuje absolutní nebo relativní URL k audio nebo video souboru.
srclang Jazyk přehrávané skladby.

7. Příklad: zveřejníme video na webu

1. Dekódujte video do tří souborů pomocí odpovídajících video a audio kodeků:
Pro .mp4- H.264/AAC,
Pro .webm- VP8/Vorbis,
Pro .ogv- Theora/Vorbis.
2. Přidejte do souboru .htaccess podporu pro typy MIME.
3. Kód pro vložení videa umístíme na stránky pomocí HTML5 markup, pomocí atributů nastavíme video s požadovanými parametry:

4. Pokud chcete zarovnat přehrávač videa na stránce, musíte prvek zabalit

s přiřazenou třídou, pro kterou jsou šířka a výška nastaveny tak, aby odpovídaly rozměrům vašeho videa. Dále pomocí vlastností CSS můžete nastavit odsazení, zarovnání na stránce atd.

8. Video konvertory

— umožňuje převést video a zvuk do formátu, který potřebujete. Ukládá mediální soubory pro přehrávání na mobilních zařízeních. „Inteligentní“ hotové profily vám umožní dosáhnout maximální kvality.


ONLINE-KONVERZEbezplatný online převodník, což vám umožní převést jakékoli mediální soubory z jednoho formátu do druhého.


- rozšiřující modul pro Firefox, umí vytvářet video soubory Theora A WebM. Funguje přímo v prohlížeči, ale veškerá práce se provádí lokálně, aniž byste museli jít na webový server.



 Nahoru