video.js HTML5 player (Javascript)

Egyelőre megfeneklett a projektem. Próbáltam m3u8 stremaet életre kelteni a playerrel, de nem nagyon haladok. Osx Safarin és mobil eszközökön remekül működik az adaptív stream, de a többi böngésző nagyon nem akarja. a HLS streamet. Most megpróbálom a DASH-t, amit az összes többi támogat, kivéve a Safari és mobil eszközök…
Egyetlen nagy baja van a video.js-nek, borzasztó gyenge a dokumnetációja és ami van, az sem mindig egyértelmű vagy pontos.

Megosztod majd a végeredményt? Mármint engem is érdekelne a Dash, csak még sosem foglalkoztam vele.
Mi mobil eszközön HLS (csak Android vagy iOS, a többi nem érdekel), PC-n meg Flash alapon csináljuk.
Jó lenne a flash-t mellőzni, bár annak is van előnye. Pl ha nem szakad meg a szerverrel a kapcsolat, akkor a live videót betölti automatikusan, ha elérhető a videó. Tehát ha a kamera és a szerver között szakad meg a kapcsolat majd újra felépül, akkor a böngészőben automatikusan megjelenik a videó ismét. Gondolom javascript segítségével meg lehetne csinálni ilyesmit is, de a flash eleve tudja ezt.

Jó, ha addig nem szorul örök görcsbe az összes ujjam, megírom. Egyelőre hajkihullatós ez a dolog. :)

1 kedvelés

Végül sikerült beüzelemlni a hls streamet video.js-el és most minden böngészőben működik az adaptiv stream is. Most az a hiányosság, hogy maunálisan nem lehet állítani a minőséget, a player maga teszi, a rendelkezésre álló sávszélességnek megfelelően. Ez mobil net esetén nem túl szerencsés, egyébként oké lenne.
Közben találtam egy másik nagyon jó playert (https://github.com/clappr/clappr), ami a dvr módot is remekül futtatja. Kivéve a Safarit OS X-en, mert ott nem lehet „visszatekerni” és nincs Pause opció és minőség választás…

1 kedvelés

Nálunk ez most is így van, persze a flash playerbe be tudnám kódolni az összes elérhető minőséget. Még megoldás lehet, ha a player alá egyszerűen beteszel linket külön felbontásonként, bár gondolom az meg csúnya és nem egészen felhasználóbarát…

Az úgy csúnya, szó sem lehet róla! :)
Az rtmp linkekkel meg lehet csinálni szépen, de az m3u8 streamből nem tudja kicsomagolni és linkelni a plugin a tartalmat. Javasolták, hogy írjak ilyen plugint, egyre nagyobb igény van rá. Oké, szívesen, de egyelőre nem vagyok képes rá és nézve a .js-t, nem is leszek. Felhasználóként, bizonyos szintig elboldogulok vele, de a plugin írás már meghaladja a képességeimet. :)

Egyébként azt elfelejtettem megírni, mi volt a baj. A verziók nem stimmeltek egymáshoz, ráadásul az legutóbbi videojs-contrib-hls plugin hiányosan van fent a githubon, ezt dokumentációban nem jelezték és újra kellett fordítani. Tök véletlenül derült ki, de elnézést kértek miatta és persze nem javították, egyelőre. :)

Én azt nem tudom, hogy egyáltalán a HLS támogatja-e a több forrás közüli választást. Megnéztem egy youtube videót, ahol asztali Safarin működött a forrás kiválasztása, míg iPhone-on nem. Valószínű asztali gépen más lejátszót használnak, mint iPhone-on.

A ytb, ha jól értem, dash-t használ, most éppen ezzel küzdök. Félek, hogy open-source playerrel nem jön össze az összes funkció. A videojs most minden rendszeren, minden böngészőben fut, de nincs dvr és m3u8 esetén nincs manuális quality control.

Kérdezni akartam, hogy fizetős palyer nem játszhat szerepet?
Mert ott van a JWPlayer. Úgy tudom az mindenen működik. Mi most fogjuk élesben használni, rövid tesztre volt csak időnk.
Bár nem közvetlenül a JWPlayert használjuk, hanem a Wowza Cloud-ját.
Már évek óta Wowza szervert használunk. Van is most is működő szerverünk az Amazon EC2-n, de ettől függetlenül bérelni fogunk szervert a Wowza-tól (van kuponunk, amivel kb ingyenes lesz ez a kis streamelés).
Wowza Cloud-ot először néztük tegnap este. Első kattintásokkal tök egyszerűen össze lehet rakni egy streamet. Nagyon egyszerű.
Ezután láttam az áttekintés oldalon egy html beágyazott kódot. A kód egy div volt egy id-val. Ezen a diven belül volt egy script tag ami a wowza egy oldalán lévő js-re mutatott. Kipróbáltam, hogy betettem egy full alap html tagek közé, feltöltöttem egy szerverre és működött.
Mármint nem teszteltük le minden egyes browseren vagy rendszeren. De működik Windowson (7, 64bit) Firefox, Chorme és IE(11) alatt. Persze jó lett volna mindegyik rendszeren tesztelni, de gondolom ha megy Win7-en, akkor menni fog az újabb rendszereken is.
OSx-en Safari és Chrome alatt működött, Firefox kiírta, hogy nincs elérhető stream.
iOS-en próbáltuk még (iOS9) és ott is működött az alap Safarival. Persze itt sem próbáltuk több böngészővel.
És Androidon egyáltalán nem teszteltük még. De valószínű, hogy ha iOS-en ment, akkor megy Androidon is.

1 kedvelés

Újabb tesztet csináltunk néhány mobil eszközzel. Tesztelt készülékek és azokon milyen böngészőn teszteltük:
iPhone 6 Plus, iOS9.1: Safari, Firefox
iPad Mini 1, iOS8.4.1: Chrome
Samsing Galaxy Tab 2 (asszem), Android 4.2.2: Alap böngésző, Chrome, Firefox

Ezek közül egyedül az Android Firefox fagyott ki minduntalan. Pedig elvileg ugyanazt a lejátszót használja, mint a másik kettő, de mégis kiakadt teljesen 3x indításra.
Hátrány viszont elég sok van, de ez bármelyik lejátszóval/böngészővel így van ezeken a rendszereken:

  • Nem indul automatikusan a videó. Nem tudom, hogy a player direkt csinálja-e Androidon, de eddig úgy tudtam ez az automatikus lejátszás csak iOS-en van letiltva. De egyik módszerrel sem indult el Androidon automatikusan. Az is lehet azért nem, mert bármelyiken elindítottam a videót, akkor megkérdezte, hogy mivel akarom látszani.
  • Android alap böngészője 2 kérdést tett fel: egyik a letöltés a másik az Audio lejátszás. Itt majdnem elakadtam, de Audio lejátszás után felkínálta a videó lejátszást is (másik két nem emlékszem milyen opció mellett). Chrome és Firefox már csak ezt az utóbbi hármas lehetőséget ajánlotta fel, igaz a Firefox ebbe bele is halt mindig.
  • iPad Minin több olyan felugró értesítés volt beállítva, amire reagálni kellett (pl sms, fontosabb levél) és ilyenkor megállt a videó automatikusan. Igazából ezt nem tudom, hogy hátrány-e vagy előny-e, de tény, hogy megakadt a videózás és lehet ez zavarna valakit.
  • Ezzel a lejátszóval (vagy lehet inkább, hogy a streaming szerver miatt) elég sok a késleltetési idő, talán van 80-90 másodperc is. RTMP-vel sikerült 1-2 másodpercet csinálnunk, Adobe HDS-sel kb 5-6 másodpercet. Bár akkor is a HLS legalább 30 másodpercet késett, de ez a 80-90 másodpercet nagyon soknak érzem.

Közben még ez a Wowza Cloud tud még olyat, hogy meg lehet adni neki a kezdő időpontot, azaz mikor kezdődik az esemény. Ilyenkor ha van beállítva Poster kép, akkor azt kirakja, valamint megjelenik egy visszaszámláló, hogy mennyi idő van még hátra az eseményig és az esemény pontos kezdő időpontja. A rossz ebben a visszaszámlálóban, hogy egyáltalán nem lehet testre szabni. Azt sem, hogy hol jelenjen meg, vagy hogy milyen betűtípussal, netán milyen színnel jelenjenek meg a betűk. Volt is ebből probléma, mert nagyon világos képet kellett kitenni Poster-nek és a visszaszámláló is egyszerű fehér színű betűk, amik ráadásul nem nagyon illeszkedtek az oldal dizájnjához. Viszont az előnye az, hogy már ha megy előtte is a stream, akkor sem jelenik meg a felhasználóknak, csak pontban a kezdési időpontban. Tehát ekkor automatikusan elindul a számítógép böngészőjében a videó, a mobil oldalon meg megjelenik egy play gomb. Nos még igencsak nagy hátrány akkor van, ha nem pontosan kezdődik az esemény, hanem mondjuk 10 másodperccel hamarabb. Nincs semmilyen gomb, hogy én most azonnal szeretnék váltani, mert kezdődik az esemény. Így ugye azt lehet tenni, hogy hamarabbi időpontra állítjuk az időzítőt. De akkor meg nem jól mutatja az esemény kezdő időpontját.

A lényeg, hogy itt van ez a fizetős streaming szolgáltatás, amit pofonegyszerű beállítani, valamint ingyen jár hozzá a jwplayer, ami minden egyes böngészőn fut.

Egyébként a jwplayer fizetős változatában is van DVR. persze nem próbáltam még, de van.
Amúgy a Flash HDS is tudja a DVR-t, egyszer próbáltuk, jó volt, de mi feleslegesnek éreztük.
HLS-en (azaz iOS-en) meg elvileg a legalább 30 másodperces késleltetés miatt meg vissza lehet tekerni alapból 30 másodpercet, bár most ezen a wowzás jwplayeren nem láttam ilyen opciót.

Hát röviden ennyit a tesztelésről. Csütörtökön lesz az éles bevetés :D

1 kedvelés

Munkában JWplayer megy, de a „hobbiplayer” az egy nonprofit egyesület honlapja kapcsán lett fontos. A wowzát mindenképpen ki kell váltani az ára miatt, a jw még kifizethető, de ha meg tudom oldani költség nélkül, akkor az lenne a nyerő. A clappr nem lenne rossz, könnyű életre kelteni, csak a HLS streammel egy bajuk van, hogy a Safari és iOS natívan kezeli és nem tudják rákényszeríteni a clappr saját vezérlését, ha jól értettem. A video.js a Brightcovehoz kötődik és ott is működik minden feature, úgyhogy előbb-utóbb csak belekerülnek a video.js-be is valamilyen plugin formájában, legalábbis remélem.
Hogy sikerült az indulás?

Az igazság az, hogy nem tudom pontosan. Röviden a sztori, hogy miért: A szállodában már 9. éve volt megrendezve ez az esemény. Mindig is gond volt a technikai felszereléssel. Idén megígérték, hogy lesz normális internet és a feltöltési sebesség meg lesz amit kértünk (sőt a szervezők a szerződésbe háromszoros sebességet írtak be, mint amit kértünk). Tehát bőven jónak kellett volna lennie. Erre 0,5Mbit/s sebességet mértünk fölfelé. Mindezt a rendezvény napján, mert előző este már senki sem volt, aki netet varázsolt volna nekünk. Erre mondja az ottani technikus, hogy hát de wifin megy fölfelé 5Mbit-tel. Kérdezem tőle, hogy mi van, ha a rendezvényen megjelent 160 ember közül csak minden tizedik rácsatlakozik és nem csinál semmit sem. Működni fog. Erre ő esküszik, hogy wifivel semmi probléma nem lesz… persze az egész szálloda ezt a hálózatot használta, szóval valószínű nem csak az a 160 ember lett volna rá.
Mint kiderült utólag ez a srác egy balf… volt és megvolt rendelve a megfelelő net, csak nem kötötte be (hogy miért, az nem derült ki számomra), a lényeg, hogy miután elindultunk döcögve, egy fél órával később már működött volna, csak akkor meg meg kellett várni az első szünetet, hogy újraindítsuk a stream-et.
A lényeg, hogy ezek után ugyebár wifin néztük vissza az adást, és nem vagyok benne biztos, hogy mi miatt volt baj. Ugyanis a kép néha megakadt. Vagyis nem néha, hanem néhány másodpercenként. Ami zavaró volt. De rendszeresen akadt. Jó lett volna kívülről látni, hogy kívül rendben van-e.
A másik ami probléma volt (és nem tudom megint, hogy a wifi miatt vagy a lejátszó hibája volt), hogy néha kiírta, hogy nem elérhető a stream. És harmadik frissítésre jó volt.
Egyébként miután megcsinálták a netet, utána 40Mbit-et mértünk fölfelé.

Szóval ezek voltak a tapasztalatok. :)

Egyelőre mégis a video.js lett a nyerő, ha megfelelően van telepítve minden, akkor megbízhatóan működik, minden rendszeren, minden böngészőben. Most beraktam a „profi” jw helyére is a vjs-t, mert ott elég nagy a forgalom, de eddig még nem érkezett panasz. A HLS stream remekül működik, quality controllal.

1 kedvelés

Egyébként egy évvel ezelőtt pont emiatt ugrottam neki a Flash lejátszónak, mert meg tudtam oldani vele az igényünket elég rövid idő alatt… ingyen… :smiley:
Azóta más munkahelyen dolgozok, és ott a stream csak nagyon ritkán fordul elő. Lehet mire legközelebb kelleni fog, addigra már a dash-t is támogatni fogja minden böngésző :smiley:

1 kedvelés

Valahogy lemaradtam. Most olvastam a Netflix developer blogjában, hogy már a Firefox is támogatja a HTML5 videót teljes egészében: http://techblog.netflix.com/2015/12/html5-video-is-now-supported-in-firefox.html
http://techblog.netflix.com/2013/04/html5-video-at-netflix.html
Részletesebb html5 lejátszás (Netflix szemszögéből).

Érdemes megnézni a HTML5 Premium Video Extensions leírásait. Ha minden igaz, akkor most már minden nagyobb böngésző támogatja Windowson és OSx-en. Sajnos Linuxról nem tesz említést, valamint OSx Firefox böngészőben idén lesz támogatva csak.

A Firefox elvileg képes mp4/H264/AAC kódolásra. Erről írnak itt bővebben:

Érdekes, hogy azt írja, hogy az ogg formátumot tölti be és ha a rendszer nem támogatja, akkor kezdi el lejátszani csak mp4 formátumban. De ezek alapján támogatja.

Bővebben a html5 videó támogatásról minden nagyobb böngészőhöz:

Itt ami érdekes az ez a rész (Firefox):

[11] AAC is only supported in the MP4 container.
To avoid patent issues, support for MPEG 4, H.264 and AAC is not built directly into Firefox.
Instead it relies on support from the OS or hardware
  (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).
Firefox supports these formats on the following platforms:
  Windows Vista+ since Firefox 22.0,
  Android since Firefox 20.0,
  Firefox OS since Firefox 15.0,
  Linux since Firefox 26.0 (relies on GStreamer codecs) and
  OS X 10.7 since Firefox 35.0.

Ha jól értem csak akkor működik az mp4, ha hardveresen támogatva van. De a lényeg, hogy meg fog szűnni a Silverlight a Flash és látszik a fény az alagút végén! :smiley:

2 kedvelés