A short case study on the ways to display videos on the web. It shows the advantages of youtube, and how to play video with html5

1. Video on the web – the EU-OSHA experience Speaker: GORKA MORAL (EU-OSHA webmaster) 23rd September 2011 | WMN meeting - Helsinki

6. EU-OSHA YouTube channel http:// www.youtube.com /EUOSHA Video on the web – the EU-OSHA experience

7. The “in house” option We don’t want (cannot) use youtube, but we want to display videos on our website Simple link We upload a video file to our server, and create a link to download it. In which format? WMV is for windows only, AVI doesn’t allow streaming, MPEG is propietary, MOV needs quicktime or an extra player, … So you will need to make it available in more than one format You can make streaming (a window like Youtube’s with controls), using already existing programmes (search for “web video players”) EU-OSHA uses (in testing) JWPlayer http:// www.longtailvideo.com /players/ This player delivers in flash and html5. You choose the default, and if the browser is not compatible, it plays the other format. Video on the web – the EU-OSHA experience

8. Playing with HTML5 For tablets, for instance. http://www.test.osha.syslab.com/en/videodemo/video-demo-part-1/ This is a demo page with the different possibilities we have to display videos Two main options: with and without JWPlayer (pure html5) For the Player we need a javascript. For HTML5, just the <video> tag Video on the web – the EU-OSHA experience

9. Playing with HTML5 the code of our test page Video on the web – the EU-OSHA experience

10. Playing with HTML5 The <video> tag Example: <video width=&quot;600&quot; height=&quot;338&quot; id=&quot;oggvideo&quot; src=&quot;/en/videodemo/3-Poor-maintenance.ogv/&quot; controls=&quot;controls&quot;> </video> Attributes for <video> tag Video on the web – the EU-OSHA experience

11. Video on the web – the EU-OSHA experience Questions? Gorka MORAL [email_address] Follow @eu_osha