Adobe HTML5 Video Player widget

 Gepubliceerd door om 07:24  Internet, iTouch, MacOS, Video
okt 232010
 

Dat Apple in de persoon van Steve Jobs een soort heilige oorlog aan het voeren is tegen het gebruik van Flash op internet zal iedereen inmiddels wel duidelijk zijn. Niet alleen op de iPhone, iPod Touch en iPad wordt Flash geweerd, ook nieuwe Macs (te beginnen met de nieuwe MacBook Air) wordt zonder Flash geleverd. Natuurlijk, daar kunnen gebruikers dat dan alsnog wel op installeren, maar je kunt je voorstellen dat het er zeker voor zal zorgen dat Flash onder Mac gebruikers een minder logische keuze zal worden.

En wat doet Adobe? Gaan ze bij de pakken neer zitten? Klagen ze alleen maar dat Apple zo flauw en oneerlijk doet? Nee. Ze zorgen er voor dat ontwikkelaars het niet moeilijker krijgen hierdoor. Een voorbeeld daarvan is de “HTML5 Video Player widget” die ze nu beschikbaar stellen.

Met die, gratis te gebruiken, widget (stukje code) kan een ontwikkelaar heel eenvoudig en met weinig code in de pagina een videoplayer beschikbaar stellen die gebruik maakt van Flash als dat aanwezig is, maar ook automatisch overschakelt naar HTML5 als dat niet het geval is. Natuurlijk moet je dan wel de video in de juiste formaten beschikbaar stellen, maar dat is geen probleem dat Adobe op kan lossen.

Aardig daarbij is dat je gebruik maakt van de standaard HTML5-video tag. Die werkt nu nog niet in Internet Explorer, maar dat is dan dus geen probleem, je zult daar dan terugvallen op Flash. Ik kreeg overigens wel de vraag of ik de VLC-videoplugin wilde gebruiken daarbij. Ik weet niet of dat iets specifiek voor mijn laptop was.
Op de iPad, zonder Flash-ondersteuning, krijg je dan de HTML5 video te zien.

Net als bij de code die ik gebruik voor het embedden van een live stream van SURFnet, is het hier overigens zo dat Google Chrome, bij aanwezigheid van Flash, gebruik zal maken van Flash en niet HTML5. Maar ja, dat zal een gebruiker denk ik op dit moment niet veel uitmaken. De video speelt af. En daar gaat het mij in ieder geval in zo’n geval wel om.

Ik heb de demo die Adobe er bij levert even online gezet zodat je het zelf kunt testen.

[update 20:07] Naar aanleiding van de reactie(s) van Evert van Malkenhorst op dit bericht heb ik nu ook een voorbeeld online gezet van de JWPlayer versie 5.3 die dezelfde functionaliteit bezit als de Adobe optie, maar bijvoorbeeld ook de optie biedt om een eigen skin toe te voegen. Werkt inderdaad heel mooi, en als ik eerlijk ben inderdaad mooier dan de Adobe optie. Evert bedankt voor de tip!

Deel dit bericht:

  12 reacties aan “Adobe HTML5 Video Player widget”

Reacties (12)
  1. Ik vind het zorgwekkend als grote bedrijven (of het nou Apple, MS of Google is) hun macht zo misbruiken, en daar nog geen eens voor uitkomen, maar het verpakken in verhalen “onhandig”, “niet goed geschreven” enz.

  2. Ik begrijp het niet zo goed. Adobe komt met iets nieuws? De Kaltura player die ze gebruiken bestaat al veel langer. Zie bijvoorbeeld
    Vorige week heb ik een blogbericht gewijd aan de nieuwe JW player 5.3.
    Deze is simpel én uiterst krachtig.
    Eerst een check voor de flash-plugin, daarna een html5 configuratie. Eén javascript nodig en één mp4 video. Simpeler kan het bijna niet.
    Dat lijkt me veel aantrekkelijker voor webdesigners (ik ben er ook één) die met dreamweaver cs mooie dingen maken.
    Bovendien is de fullscreen écht fullscreen en niet tussen de balken van de browser, naast andere voordelen als skinning, closed captions en audiodescriptie. Misschien heeft de Kaltura dat ook dat heb ik niet onderzocht.
    Benieuwd naar reacties hierop.

  3. Hoi Evert,

    Enige eerlijke antwoord daarop dat ik kan geven is dat ik het bericht bij jou niet gezien had én niet wist dat de nieuwe JW player dit kon. Jouw voorbeeldpagina werkt inderdaad ook op de iPad met iOS 3.2.2 (kun je bij deze dus aan de lijst met geteste configuraties toevoegen).

    Dank voor de tip! 🙂

  4. Nog een kleine aanvulling. Er zijn ook ,vind ik, storende verschillen. Keek net in de IE8 dan zie je dat de menubalk hoger wordt en het totale videobeeld is anders geschaald. Als menubalk verdwijnt houd je twee nutteloze zwarte balken boven én onder over.
    Nog een correctie op het stuk van Pierre, bij mij pakt die eerst html5 en schakelt naar flash indien nodig, zoals bij IE8.
    Zonder gekheid je gaat toch niet meerdere video-formaten aanbieden?
    De JW player 5.3 icm een mp4 video speelt prima af op IE.
    Wel is het belangrijk de conversie zorgvuldig te doen. Heb daar nu een profiel voor ontwikkeld, omdat het anders óf niet streaming is, óf niet afspeeld op de iphone/ipad.
    Met andere woorden het juiste H264 profiel.
    Ben benieuwd naar reacties op dit blog.
    Op de Edugram Website staat een demo met de JW player 5.3
    Twee artikelen op de Edugram Blog.
    Hier zijn reacties ook welkom.

  5. Inderdaad. Ik wilde een MP4 van de video die bij het Adobe voorbeeld zit afspelen in de JW Player 5.3 maar die deed/doet het niet op de iPad. Ik neem aan probleem met de conversie.

  6. Ah, het probleem was dat de Adobe code en de JW Player code niet braaf samen op één pagina kunnen. Het voorbeeld werkt nu probleemloos. Evert, nogmaals bedankt voor de tip!

  7. @Evert Nog een laatste vraag/opmerking: in welke browser laat hij bij jou dan de HTML5 video zien (anders dan iPhone/iPad)? In Google Chrome 7 gebruikt hij bij mij gewoon de Flash-versie, zowel de Adobe viewer als de JW Player doen dat.

  8. In Google Chrome zie ik html5 (!)
    Hoe kan dat nou?
    Als ik jouw jw voorbeeld bekijk in Chrome dan is het wel flash.
    Gek…..

  9. Ik snap het ook niet meer. Ook op jouw pagina zie ik in Google Chrome en in Firefox 3.6 de Flash player (zie beide gelinkte screenshots). Heb jij soms geen Flash geïnstalleerd staan?

    Overigens komt het gedrag dat ik zie overeen met de tekst die op jouw pagina staat: “Eerst wordt er gekeken of de flash plugin aanwezig is, zoniet wordt er omgeschakeld naar een pure HTML5 configuratie waarvoor geen flash plugin noodzakelijk is.”
    Ik heb flash geïnstalleerd staan op mijn Windows 7 laptop en die wordt als eerste gebruikt.

  10. Pierre, dat ik op jouw “Adobe-voorbeeld” pagina HTML5 zie is simpel te verklaren achteraf. Jij biedt het videoformaat .ogv aan én je gebruikt de nieuw tags . Dat is de reden. Heb vandaag een voorbeeld gebouwd met de JW player 5.3 met het zogenaamde “players block”. Dit is een optie waarmee ik kan afdwingen dat er eerst een HTML 5 configuratie gemaakt wordt, als dat niet kan een flash-omgeving. De omgekeerde weg dus. Eén bug heb ik al gevonden dat je plugins bijvoorbeeld Closed Captions of Facebook niet meer werken. De skin lijkt het ook niet te doen, maar dat is ene kwestie van de uitgepakte bestanden naast de zip file op de server zetten. Wat Adobe dus doet, is wat de JW player HTML 5 Bèta deed. Beter is de JW player 5.3 te gebruiken, maar wel vanaf versie 1397 (die jij hebt) omdat daar de bugs die er eerst waren met de Players Block zijn opgelost. Nu nog en update voor de plugins!

    Groet, Evert

  11. Kleine update vorige bericht. Bedoeld is in het begin de Firefox 3.6.

Sorry, het reactieformulier is momenteel gesloten.