1

Onderwerp: Video aanbieden op alle browsers

Voor een side-projectje wil ik graag video tonen aan mensen met een hedendaagse browser. Ik heb geen zin om me met Flash bezig te houden, er komt dus een downloadlink voor oude browsers. Wat ik niet wil is dat Firefox- en Opera-gebruikers zonder Flash de video moeten downloaden (ik ben zelf zo iemand namelijk). Dus: minimaal webm/ogg en mp4
Hier zijn volgens mij de opties:
Zelf hosten:
- Duur
- Veel werk (namelijk zelf alles encoderen wat vooral lang duurt met webm)
- Makkelijk

Elders hosten
- Vimeo
- Youtube

Ik zou heel graag gebruik willen maken van Vimeo, ze bieden alleen geen WebM/ogg aan.

Mijn vraag is nu eigenlijk: weten jullie hoe ik het technisch voor elkaar ga krijgen om wél Vimeo te gebruiken en toch ook een webm/ogg fallback versie aan te bieden? Of weten jullie een andere manier waarbij we geen tijd kwijt zijn aan zelf encoderen, geen geld kwijt zijn aan hosting en tóch alle hedendaagse browsers kunnen ondersteunen?

2

Re: Video aanbieden op alle browsers

Niet exact het antwoord op je vragen, maar wellicht heb je er wat aan: Recording Interviews on Skype and converting to HTML5 friendly formats the easy way + de bijbehorende screencast.

Smells like Team America

3

Re: Video aanbieden op alle browsers

Misschien is Bits on the Run iets? Hosted maar wel met nette fallback, en ze doen al het coderen voor je.

http://www.longtailvideo.com/bits-on-the-run

4

Re: Video aanbieden op alle browsers

En http://www.vid.ly/ ? Chris is daar ook nogal lovend over.

5

Re: Video aanbieden op alle browsers

Dank jullie wel voor de antwoorden. Het probleem met de diensten die jullie noemen is dat het al gauw heel duur gaat worden.

6

Re: Video aanbieden op alle browsers

Ik zwengel deze post weer eens aan. Wat ik nu wil:

Vimeo gebruiken voor bijna iedereen. Een webm fallback bieden voor mensen zonder Flash en h264 support (voornamelijk Opera en Firefox zonder Flash).
Vimeo mag je alleen via hun embed code gebruiken (een iframe in dit geval). Nu ben ik op zoek naar een manier om die fallback aan te bieden maar ik heb geen idee hoe.

Is er een manier om te detecteren dat een browser geen flash én geen h264 ondersteunt? Dat zou het ongeveer oplossen. Zo niet, is er misschien een manier om te checken wat er in dat iframe is gebeurd? Of er een video staat of alleen een zwart vlak met wat letters? Is dat wellicht met canvas te detecteren?

Pff, wat een jammerlijke, complexe rotzooi is video eigenlijk.

7

Re: Video aanbieden op alle browsers

Zou je http://camendesign.com/code/video_for_everybody niet kunnen omkeren? Dat je een <object> gebruikt om Vimeo te embedden, en binnen dat object een <video> neerzet als fallback?

8

Re: Video aanbieden op alle browsers

Had ik ook al geprobeerd. Dat werkt natuurlijk niet omdat er niet om een fallback gevraagd wordt door Firefox: er wordt gewoon een pagina geladen in het object, alleen de video in die pagina wordt niet begrepen. Firefox vindt terecht dat er geen fallback nodig is.
Ik heb ook geprobeerd om alleen de webm versie aan te bieden via het video element met het idee dat Safari dan de fallback Vimeo embed zou gaan gebruiken. Maar de fallback content wordt alleen gebruikt door browsers die het video element niet begrijpen, niet door Safari dus.
Een andere poging die ik heb gewaagd is om de webm versie als object aan te bieden, niet als video-element. Hij begint dan direct te spelen in Firefox en toont de fallback content in Safari. Helaas begint hij ook automatisch de webm versie te downloaden. Hebben we dus ook niks aan.
Misschien moet ik gaan browser sniffen? Het idee alleen al, brrr…

9

Re: Video aanbieden op alle browsers

Vasilis van Gemert schreef:

Een webm fallback bieden voor mensen zonder Flash en h264 support (voornamelijk Opera en Firefox zonder Flash).

Gewoon een vraagje; om hoeveel mensen gaat het hier? Dit percentage lijkt mij namelijk ERG minimaal...

Vasilis van Gemert schreef:

Is er een manier om te detecteren dat een browser geen flash én geen h264 ondersteunt? Dat zou het ongeveer oplossen.

Combinatie van swfobject.hasFlashPlayerVersion("9") && video.canPlayType(XXX)

var vid = document.createElement( "video" );
vid.canPlayType( "video/webm; codecs=\"vp8, vorbis\"" );

MIME types:
'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
'video/mp4; codecs="mp4v.20.8, samr"'
'video/webm; codecs="vp8, vorbis"'
'video/ogg; codecs="theora, vorbis"

canPlayType can be used to find out, if browser thinks it could support mime type passed as argument.
"" is returned if container/codec is not supported.
"Maybe" is returned if browser thinks that it may be able to show the video.
"probably"if the container format and codecs are supported.

10

Re: Video aanbieden op alle browsers

Thanks, daar kan ik wel wat mee.

Bas van Dorst schreef:

Gewoon een vraagje; om hoeveel mensen gaat het hier? Dit percentage lijkt mij namelijk ERG minimaal...

Om weinig mensen. Maar ik ben er een van. Bovendien denk ik dat dat aantal gestaag aan het toenemen is.

11

Re: Video aanbieden op alle browsers

Vasilis van Gemert schreef:

Om weinig mensen. Maar ik ben er een van.

FWIW, ik ben er ook een van, en ik ken er nog wel een paar.

12

Re: Video aanbieden op alle browsers

Dankzij jullie input heb ik een Webm fallback scriptje kunnen schrijven voor Vimeo:
https://gist.github.com/1394400

13

Re: Video aanbieden op alle browsers

Vasilis van Gemert schreef:

Dankzij jullie input heb ik een Webm fallback scriptje kunnen schrijven voor Vimeo:
https://gist.github.com/1394400

Als ik die code zo snel goed lees, dan komen mensen die cookies blocken in een oneindige loop door die reload. Uberhaupt krijg je een nutteloze reload als je geen flash hebt, want de php code poept al standaard de <video> uit. Dus zet je location.reload(true) binnen de else.

14

Re: Video aanbieden op alle browsers

Oesp, heel slordig. Ik heb de gist aangepast. De reload vindt nu alleen plaats als het cookie er daadwerkelijk is en het cookie wordt alleen gezet als je geen flash en geen h264 support hebt.
Dat houdt ook in dat ik er van uit ga dat vimeo het gewoon wel doet als er geen cookie is gezet. Die zekerheid is er absoluut niet.

15

Re: Video aanbieden op alle browsers

Waarom PHP? In JS kun je ook gewoon gebruik maken van if/else statements wink

https://gist.github.com/1398018