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>.
- Google Chrome v4.0+
- Mozilla Firefox v3.5+
- Safari v4.0+
- Internet Explorer v9.0+
- 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:
- Parametry, które modyfikują szablony skórek, wyświetlanie tytułów i napisów oraz podobne podstawowe preferencje użytkownika.
- Zdarzenia, które umożliwiają użytkownikom wykonywanie operacji z poziomu interaktywnego, jak również pasywnego i działań w odtwarzaczu.
- 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 jplayerMożesz również użyć PHP:
composer require happyworm/jPlayerJPlayer 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 installJeśli chcesz przesyłać filmy zbiorczo za pomocą Flowplayer, możesz użyć
flowplayer -U <username> -P <password> videos/*.movAby 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.
Czytaj także
W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.