Polski Blog TemplateMonster

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

Katarzyna Pawłowska
  1. Video JS
  2. Cloudinary Video Player
  3. JW Player
  4. jPlayer
  5. Flowplayer
  6. Projekktor Player
  7. Acorn Media Player

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ą:

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:

jPlayer

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

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:

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:

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:

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.

Czytaj także