dinsdag 22 mei 2012

Test case #3

Ik ben van scratch begonnen aan een nieuwe testcase waarin net voor de initialisatie van de speler de playlist wordt ingeladen en de video-tag met bronnen dynamisch wordt gegenereerd en in het document geplaatst, gevolgd door een aanroep van de load()-functie op de video-tag om de speler te initialiseren. Voor het inlezen van de playlist heb ik zelf een parser geschreven in javascript om het cache-probleem van de google feed (test case #1 - bug#5) te elimineren.


Naderhand werden buttons voorzien op dezelfde methode als in test case #1. Bij klik op de buttons wordt de respectievelijke playlist-data opgevraagd en meegegeven aan de functie "src", voorzien door het VideoJS-API om de nieuwe bron aan de speler te koppelen en de speler te herladen (zonder refresh).

Report:

bug#1 Ajax-request naar rss-playlist faalt: data.responseXML geeft geen resultaat.
Oorzaak: Ajax-request kunnen enkel gemaakt worden naar de eigen server, geen andere server. Vermits de rss-playlist zich op een andere server kan bevinden moet we hiervoor een oplossing zoeken.
Oplossing: Omwille van snelheids-overwegingen en ontlasting van de server heb ik de rss-parser geschreven in javascript (client-side execution), maar om deze fout op te lossen kunnen we niet anders dan een call doen naar een script op de eigen server, die vervolgens de playlist op de remote server opvraagt en terugstuurt naar de client. Hiervoor heb ik een php-script geschreven dat d.m.v. een curl-commando de playlist die de client als parameter in de ajax-call meegeeft controleert op bestaan, opvraagt en xml-bestandsindeling en syntaxfouten controleert, en ten slotte de inhoudt van het bestand met xml-header terugstuurt naar de client. De cliënt ontvangt op deze manier wel playlist. We hebben nu ook volledige controle over caching, dat geforceerd vermeden kan worden door bij elke aanroep een unieke dummy-parameter mee te geven aan de URL-zodat deze nooit hetzelfde is. (Deze methodiek is momenteel nog niet toegevoegd omdat het zo al werkt).

SOLVED

bug#2 De speler blijft de lader weergeven en begint niet met spelen in Chrome
Oorzaak: Error treedt op bij initialisatie. Het TECH-playback engine van VideoJS plaatst het eerste videobestand dat ondersteund wordt door de gebruikte browser als src-attribuut bij de video-tag en verwijderd niet alle source-tags tussen de videotag. (Het engine doet dit omdat het gebruik van source-tags tussen de video-tag leidt tot fouten of onnodige video-objecten in het DOM bij een dynamische reload (de videobronnen aanpassen zonder de pagina te vernieuwen), het engine uitschakelen is dus geen oplossing). Hierdoor treedt een bronnenconflict op: zowel het src-attribuut als een source-tag zijn gedefinieerd en bevatten beide een verschillend bestand (resp. mp4 en ogg), waarmee Chrome problemen heeft.
Bij het statische reload van dezelfde videobron zijn wel alle source-tags verdwenen. Dit lijkt een bug in de VideoJS-library.
Oplossing: Na aanpassing van enkele regels code in de library worden de source-tags wel correct verwijderd en werkt de speler in Chrome.

SOLVED

bug#3 Speler verschijnt niet in IE
Oorzaak: Speler initialiseert niet. Error treedt op in de parser. De DOM-functies getElementsByNameNS om nodelist te verkrijgen (als een namespace gebruikt wordt) en hasAttribute zijn niet in alle browsers ondersteund, waaronder IE.
Oplossing: In de browsers waarin getElementsByNameNS niet is ondersteund kan een node met namespace ook opgevraagd worden met de standaard getElementsByName. Wanneer deze functie dus niets teruggeeft, moet de NS-specifieke functie gebruikt worden. De hasAttribute-functie kan vervangen worden door een test met getAttribute op null.

SOLVED

bug#4 Speler blijft lader weegeven en begint niet te spelen in IE

Oorzaak: Na research op het internet blijkt dat een videobron die zich bevindt op de eigen webserver relative gedefinieerd moeten zijn, op een externe server absoluut moet gedefinieerd zijn.
Oplossing: Videobronnen plaatsen op andere webserver, .htaccess file voorzien op de server (in de map met videobestanden) en URL's van de bronnen absoluut maken in de rss-playlist.

SOLVED

bug#5 Flash-probleem treedt nog steeds op: videospeler bevriest enkele seconden tot minuten alvorens de video begint te spelen.
Oorzaak: Vermoedelijk downloadt het videobestand eerst volledig in het cache voordat de speler pas begint te spelen; dit omdat korte video's (zoals ook de demo op videojs.com) nagenoeg onmiddellijk beginnen te spelen en de vertraging bij grotere video's langer is. Na research op het internet blijkt dit inderdaad het geval én dat MP4-bestanden kunnen geoptimaliseerd worden voor het web (waarbij een bestand met metadata over het laden van het bestand niet achteraan de videofile, maar vooraan de videofile wordt geplaatst in de container), waardoor de Flash-speler onmiddellijk toegang heeft tot de laad-informatie zodat het deze direct kan toepassen en reeds met afspelen kan worden begonnen alvorens de video volledig gedownload is.
Oplossing: Video's opnieuw converteren met behulp het programma "Handbrake" dat een optie "optimaliseren voor het web" bevat. Het resultaat blijkt zeer positief!

SOLVED

De speler lijkt nu in alle browsers te werken, zowel in HTML5- als Flash-modus. Een demo kan hier bekeken worden: http://mvcpeer.be/uhbpmedia/demo3/video.html

2 opmerkingen:

  1. Hey Steven,

    Ik heb het zonet getest met Firefox 12.0, en de playback lijkt inderdaad te werken. Wel is er bij een aantal van de videoclips sprake van serieuze haperingen, terwijl andere clips relatief vlot afspelen. Concreet speelt de eerste clip in de video playlist bijvoorbeeld heel vlot af, terwijl de tweede clip nagenoeg "onbekijkbaar" is door de continue visuele schokken en sprongen. Opmerkelijk is bovendien dat de audio wel steeds vlot afspeelt. Heb je hier een mogelijke verklaring voor?

    BeantwoordenVerwijderen
  2. Firefox gebruikt het OGG-bestandsformaat. De eerste video in de playlist (Big Buck Bunny) heb ik in de drie formaten gedownload, en deze lijkt wel vlotjes te lopen. De andere video's heb ik zelf geconverteerd naar OGG en bij deze loopt de playback niet zo vlot. Vermoedelijk ligt het probleem dus aan een slechte compressie van het OGG-bestand. M'n "free videoconverter"-tooltje lijkt niet al te best te presteren, de mp4-conversie was ook niet web-optimized.

    BeantwoordenVerwijderen