TOP-7: Najlepszy HTML5 odtwarzacz wideo zoptymalizowany pod kątem web środowiska

HTML5, najnowszy standard HTML jest dostarczany w pakiecie z wieloma nowymi atrybutami i elementami, które pomagają ulepszyć semantykę, wydajność, grafikę 2D i 3D, dostęp do urządzeń, a także stylizację w web środowisku.

Przed pojawą technologii HTML5 filmy można było odtwarzać tylko w przeglądarkach za pomocą wtyczek, takich jak Flash. Opracowanie szablonów HTML5 spowodowało zmianę i konwertowanie plików audio i wideo na podstawowe towary w Internecie, umożliwiając manipulację treściami multimedialnymi za pomocą tagów <audio> i <video>.

Wraz z pojawieniem technologii HTML5, użytkownicy mogą integrować odtwarzacze wideo do przeglądarki z aplikacjami bez konieczności korzystania z wtyczek lub skryptów innych firm. Poniższa lista zawiera wersje przeglądarek, które w pełni obsługują znacznik <video>.

  1. Google Chrome v4.0+
  2. Mozilla Firefox v3.5+
  3. Safari v4.0+
  4. Internet Explorer v9.0+
  5. Opera v10.5+

Video JS

Open-source darmowy HTML5 odtwarzacz wideo Video JS został oparty na CSS i JavaScript. Odtwarzacz Video JS działa na ponad 400 000 stron internetowych z ponad 15 000 gwiazd na Github. Jest wyposażony we wbudowaną obsługę Flash.

Główną zaletą Video JS jest to, że można go dostosować. Skórka odtwarzacza jest tworzona przy użyciu CSS i HTML i może być modyfikowana zgodnie z preferencjami użytkownika.

Aby zainstalować odtwarzacz Video JS, użytkownicy muszą najpierw dodać wymagane pliki JavaScript i CSS z CDN do elementu <head> , tak jak wskazano poniżej:

 <link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
 <script src="//vjs.zencdn.net/5.11/video.min.js"></script>

Po zakończeniu tag <video> można dodać do treści, jak pokazano poniżej:

<video
 id="my-player"
 class="video-js"
 controls
 preload="auto"
 poster="//vjs.zencdn.net/v/oceans.png"
 data-setup='{}'>
 <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
 <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
 <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
 <p class="vjs-no-js">
 To view this video please enable JavaScript, and consider upgrading to a
 web browser that
 <a href="http://videojs.com/html5-video-support/" target="_blank">
 supports HTML5 video
 </a>
 </p>
</video>

Konieczne jest aby klasa video-js została dodana do znacznika <video>. Po załadowaniu strony, Video JS zlokalizuje element i skonfiguruje odtwarzacz dla użytkownika.


Cloudinary Video Player

HTML5 odtwarzacz Cloudinary Video Player oferuje wiele możliwości. Niektóre z jego kluczowych funkcji obejmują:

  • Manipulacje z wideo - użytkownicy mogą stosować transformacje wideo w chmurze na poziomie odtwarzacza. To jest automatycznie przekazywane do wszystkich filmów dostarczonych do tego odtwarzacza. Użytkownicy mogą również wprowadzać dodatkowe transformacje do wideo na poziomie indyvidualnego odtwarzacza.
  • Adaptive Bitrate Streaming - Cloudinary Video Player obsługuje live streaming HTTP (HLS) oraz dynamiczny streaming adaptacyjny przez HTTP (MPEG-DASH). Może automatycznie generować pliki pomocnicze i reprezentacje streaming.
  • Formaty - są obsługiwane popularne formaty wideo, takie jak .mp4, .ogv, .webm i .mov. Użytkownicy mogą określić więcej niż jeden format, a odtwarzacz automatycznie wybierze najlepszy format używanej przeglądarki.
  • Szerokie wsparcie dla urządzeń - odtwarzacz działa dobrze zarówno w przeglądarkach mobilnych, jak i komputerowych.

Poza tym Cloudinary Video Player obsługuje również możliwość personalizacji. Użytkownicy mogą dostosować następujące aspekty:

  1. Parametry, które modyfikują szablony skórek, wyświetlanie tytułów i napisów oraz podobne podstawowe preferencje użytkownika.
  2. Zdarzenia, które umożliwiają użytkownikom wykonywanie operacji z poziomu interaktywnego, jak również pasywnego i działań w odtwarzaczu.
  3. Dostęp do interfejsu API Video.js w celu umożliwienia kontroli niskiego poziomu i dostosowania elementów odtwarzacza.

JW Player

JW Player to funkcjonalny odtwarzacz wideo, który doskonale działa zarówno na komputerach stacjonarnych, jak i na urządzeniach mobilnych. Platforma do hostingu wideo, JW Player, pozwala użytkownikom przesyłać i odtawrzać filmy 360°.

JW Player jest teraz dostępny na ponad 2 milionach witryn i obsługuje następujące funkcje:

  • Rozdzielczość 4K i live streaming.
  • Konfigurowalny interfejs użytkownika i filmy monoskopowe.
  • Zarządzanie prawami cyfrowymi (DRM): PlayReady, Widevine, FairPlay, a także ClearKey.
  • Gyroscope Motion i Adaptive Bitrate Streaming.
  • odtwarzanie 360° wideo za pomocą magicznego okna i trybów immersive-VR za pomocą licencji premium.
  • Dodanie 360° zdolności odtwarzania wideo do natywnych aplikacji na Androida i iOS.
  • Standardy reklam wideo: VPAID 1, VPAID 2, VAST i interaktywne reklamy multimedialne Google (IMA).

jPlayer

jPlayer jest zasadniczo wtyczką Query, która jest używana jako HTML5 odtwarzacz plików wideo i audio dla jQuery. Jego funkcje:

  • Możliwość dostosowania, które obejmują modyfikacje skórek wideo za pomocą CSS i HTML.
  • Flash: MP3, MP4 (AAC/H.264), Flash Video (FLV), i Real-Time Messaging Protocol (RTMP).
  • HTML 5: MP3, MP4 (AAC/H.264), WebM, OGG (Vorbis i Theora), i WAV.

Aby zainstalować jPlayer, możesz użyć następującego wiersza poleceń w przeglądarce:

bower install jplayer

Możesz również użyć PHP:

composer require happyworm/jPlayer

JPlayer działa w wielu różnych przeglądarkach: Android 2.3+, Firefox, IE6 +, Chrome, Opera Safari i Mobile Safari.


Flowplayer

Flowplayer to HTML5 odtwarzacz wideo oferujący następujące możliwości:

  • Hosting wideo i obsługa napisów w wielu językach.
  • Możliwość publikowania filmów zbiorczo za pomocą wiersza poleceń za pośrednictwem narzędzia Flowplayer.
  • Obsługa reklam VAST i AdSense.
  • Modyfikacje, w tym zmiany skórki.

Aby zainstalować HTML5 odtwarzacz Flowplayer, użyj następującego wiersza poleceń:

npm install flowplayer-api
cd flowplayer-api
make install

Jeśli chcesz przesyłać filmy zbiorczo za pomocą Flowplayer, możesz użyć

flowplayer -U <username> -P <password> videos/*.mov

Aby skorzystać z Flowplayera w aplikacji, możesz pobrać to oprogramowanie i połączyć kod CSS i JavaScript, jak wskazano poniżej:

<!DOCTYPE html>
<head>
 <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <!-- flowplayer.js -->
 <script type="text/javascript" src="flowplayer.min.js"></script>
  <!-- player styling -->
 <link rel="stylesheet" type="text/css" href="flowplayer/minimalist.css">
 </head>
 <body>
  <!-- player 1 -->
 <div class="flowplayer">
 <video src="my-video.mp4"></video>
 </div>
  <!-- player 2 -->
 <div class="flowplayer">
 <video>
 <source type="video/webm" src="my-video2.webm">
 <source type="video/mp4" src="my-video2.mp4">
 </video>
 </div>
</body>

Projekktor Player

Jeszcze jednym open-source i darmowym HTML5 odtwarzaczem jest Projekktor Player. Ma następujące funkcje:

  • Flashbackback z obsługą RTMP.
  • Obsługa wtyczek internetowych VLC.
  • Funkcje pełnego ekranu.
  • Punkty kontrolne dla zdarzeń synchronizowanych z mediami.
  • Możliwość ustawienia reklamy przed filmem i po nim (VAST).
  • Zmiana jakości i selekcja.
  • Obsługa Open Source Media Framework (OSMF) dla cyfrowych rejestratorów wideo (DVR) i HTTP Dynamic Streaming (HDS).

Projekktor Player jest oparty na jQuery. W związku z tym, aby zintegrować ten HTML5 odtwarzacz z aplikacją, należy zaimportować jQuery oraz wymagane pliki JavaScript i CSS, jak pokazano poniżej:

<!-- Load player theme -->
    <link rel="stylesheet" href="themes/maccaco/projekktor.style.css" type="text/css" media="screen" />
 
    <!-- Load jquery -->
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
 
    <!-- load projekktor -->
   <script type="text/javascript" src="projekktor.min.js"></script>

Po zakończeniu można ustawić odtwarzacz na tagu <video> po podaniu parametru id i włączeniu funkcji projekktor po wczytaniu strony:

<html>
<body>
<video id="player_a" class="projekktor" poster="intro.png" title="this is projekktor" width="640" height="360" controls>
 <source src="http://www.projekktor.com/intro.ogv" type="video/ogg" />
 <source src="http://www.projekktor.com/intro.mp4" type="video/mp4" />
</video> 
<script type="text/javascript">
$(document).ready(function() {
 projekktor('#player_a', {
 volume: 0.8,
 playerFlashMP4: 'http://www.yourdomain.com/StrobeMediaPlayback.swf',
 playerFlashMP3: 'http://www.yourdomain.com/StrobeMediaPlayback.swf'
 });
});
</script> 
</body>
</html>

 


Acorn Media Player

HTML5 odtwarzacz Acorn Media Player oferuje następujące możliwości:

  • Obsługa modyfikacji, w tym zmian skórek.
  • Wskaźnik do buforowania.
  • Zewnętrzne pliki SRT dla napisów.
  • Pełny dostęp do klawiatury dzięki standardowej nawigacji opartej na zakładkach oraz czytnikowi ekranu.

Ponieważ Acorn Media Player jest w zasadzie wtyczką jQuery, aby dodać ten odtwarzacz do aplikacji, użytkownicy muszą również dołączyć jQuery, jak pokazano poniżej:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script src="/path/to/jquery.acornmediaplayer.js"></script>
 <link href="/path/to/acornmediaplayer.base.css" rel="stylesheet" type="text/css">
 <link href="/path/to/themes/acorn.theme.css" rel="stylesheet" type="text/css">
 <script>
 $(document).ready(function() {
 $('video').acornMediaPlayer();
 });
</script>
</head>
<body>
<video>
 <source src="/path/to/video.mp4" />
</video>
 </body>
</html>

Ten artykuł został przetłumaczony z angielskiego. Orygimał można znaleźć tutaj: 7 Best HTML5 Video Players Optimized for the Web


* * *

Chociaż obecnie dostępnych jest wiele różnych odtwarzaczy wideo HTML5, najprawdopodobniej nie wszystkie z nich będą odpowiednie do Twojego celu. Głównym celem tego artykułu jest wyświetlenie możliwości i ograniczeń, które mają popularne na rynku HTML5 odtwarzacze wideo. Jeśli masz jakieś sugestie lub uważasz, że nie wymieniliśmy na tej liście jakiś odtwarzacz wideo, daj nam znać w komentarzach.

Jeśli znalazłeś błąd ortograficzny, prosimy o poinformowanie nas o tym, wybierając odpowiedni fragment tekstu i naciskając Ctrl + Enter .

Zgłoś błąd w pisowni

Poniższy tekst zostanie przesłany do naszej redakcji: