Live streamen naar iPhone en iPad via SURFnet #2

SURFnet Live Stream to iPad Dit is even een bericht voor mijn eigen archief (zodat ik het niet vergeet). In mijn vorige bericht over het live streamen van video naar de iPhone en/of iPad via SURFnet verwees ik op het einde naar een URL die je dan aan iPhone/iPad gebruikers kon geven om de live stream te bekijken.

Maar, je zult natuurlijk niet vaak uitsluitend voor iPhone en iPad gebruikers alleen een stream opzetten. Het is ook wel zo handig als ‘gewone’ kijkers op een laptop/desktop in hun browser de stream kunnen bekijken.
Ook dat kan en is niet zo heel moeilijk te realiseren.
In de beheeromgeving van de livestream bij SURFnet vind je een optie “embedcode/URL”. Als je daar op klikt dan krijg je een venster waar je nog wat opties voor de stream in kunt stellen.


In mijn geval kies ik daar voor de instellingen zoals hierboven aangegeven in de screenshot.

Je moet er ook aan denken om (via de knop rechts) de javascript-bestanden die je nodig hebt te downloaden en te uploaden naar de map waar je een pagina maakt voor de viewer.
Dat kan een gewone HTML-pagina zijn met (o.a.) de door de beheeromgeving gegenereerde code er in.
Je kunt hier een voorbeeld van een complete pagina bekijken.

Het standaard script van SURFnet werkt echter alleen goed voor browsers die Flash ondersteunen. En de iPad en iPhone doen dat niet.
Voor die twee apparaten heb ik de “div” die in de standaardcode zit een beetje aangepast. Normaal staat daarin alleen de tekst “player should load here”. Maar zoals je in het voorbeeld kunt zien, heb ik daar een HTML-5 videotag aan toegevoegd met een verwijzing naar de URL van de livestream zoals ik die in de vorige post al noemde.

De pagina met de embedded livestream er in zal nu werken in browsers die Flash-ondersteunen én op browsers die geen Flash ondersteunen, maar wel HTML5-video. Het betekent wel dat bijvoorbeeld Google Chrome ook de Flash-viewer gebruikt en niet de HTML5-video (hoewel die wel ondersteund wordt) maar dat lijkt me geen probleem.
Nu heb je dus één bestand en één stream die in een groot aantal browsers en op een groot aantal apparaten te bekijken is.

0 0 stemmen
Bericht waardering
1 Reactie
Inline Feedback
Bekijk alle reacties
trackback

[…] 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 […]