Video on the web


Published on

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

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Video on the web

  1. 1. Video on the web – the EU-OSHA experience Speaker: GORKA MORAL (EU-OSHA webmaster) 23rd September 2011 | WMN meeting - Helsinki
  2. 2. <ul><li>When Youtube did not even exist </li></ul><ul><li>Note that the domain &quot;; was activated on February 14, 2005, and the website was developed over the subsequent months (Source: wikipedia) </li></ul><ul><li>One only option: </li></ul><ul><li>Upload a video file to our servers and add a link to download </li></ul><ul><ul><li>Need for space </li></ul></ul><ul><ul><li>Need big bandwidth </li></ul></ul><ul><ul><li>Need for different formats </li></ul></ul><ul><ul><li>No preview </li></ul></ul><ul><ul><li>No streaming </li></ul></ul><ul><ul><li>No sharing </li></ul></ul><ul><ul><li>Time to download </li></ul></ul><ul><ul><li>… </li></ul></ul>Video on the web – the EU-OSHA experience Image:
  3. 3. <ul><li>YOUTUBE: the (r)evolution 1 </li></ul><ul><li>DO NOT store your videos in your servers any more. Why? </li></ul><ul><li>It’s free </li></ul><ul><ul><li>Set up an account, upload your video, and you’re done </li></ul></ul><ul><ul><li>It converts your video into a web-friendly format (Flash, and now html5 too) </li></ul></ul><ul><ul><li>It optimizes your video for fast streaming, and allows you to embed it into your web pages. </li></ul></ul><ul><li>Broad audience  </li></ul><ul><ul><li>Youtube is the third most visited website (after google and facebook) </li></ul></ul><ul><ul><li>Tag your videos with the appropriate keywords, and be found. </li></ul></ul><ul><ul><li>Drive traffic back to your website </li></ul></ul><ul><ul><li>You can send a bulletin to your suscribers and friends in youtube and create a community </li></ul></ul>Video on the web – the EU-OSHA experience
  4. 4. <ul><li>YOUTUBE: the (r)evolution 2 </li></ul><ul><li>Search engine positioning </li></ul><ul><ul><li>Google has purchased Youtube </li></ul></ul><ul><ul><li>This means more importance for Google’s rank (links from a rank 10 to your website) </li></ul></ul><ul><li>So do not forget to add your URL in your Youtube account, and proper tags to your videos! </li></ul><ul><li>Time limits  </li></ul><ul><ul><li>YouTube doesn’t allow videos longer than 15 minutes and 2GB (20 GB if Java-based Advanced Uploader is used) </li></ul></ul><ul><li>Quality </li></ul><ul><ul><li>Nowadays Youtube supports full HD videos, and even 4K videos (Double resolution than 1080 HD) </li></ul></ul><ul><li>Multi-platform </li></ul><ul><ul><li>Youtube videos can be viewed through any mobile device, game consoles, and TV devices with Google TV or Apple TV </li></ul></ul>Video on the web – the EU-OSHA experience
  5. 5. <ul><li>YOUTUBE: the (r)evolution 3 </li></ul><ul><li>Not everything is good </li></ul><ul><li>Download </li></ul><ul><ul><li>For the moment, Youtube doesn’t allow to download videos </li></ul></ul><ul><li>Copyrights  </li></ul><ul><ul><li>The big media lobyists have a big power in Youtube. They may claim rights for any music, for instance, even if it is self-created. You will have to prove that you have permissions to use the music. Otherwise, your video will be silenced. </li></ul></ul><ul><li>Branding </li></ul><ul><ul><li>Youtube branding is present everywhere. Probably, not a big problem, but still you will be making publicity of the service. </li></ul></ul><ul><li>Not an EU company </li></ul><ul><ul><li>A silly observation, but this means that Youtube videos are (or might be) physically hosted outside the EU. In case of problems, you should probably appeal to an US court. </li></ul></ul>Video on the web – the EU-OSHA experience
  6. 6. EU-OSHA YouTube channel http:// /EUOSHA Video on the web – the EU-OSHA experience
  7. 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:// /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. 8. Playing with HTML5 For tablets, for instance. 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. 9. Playing with HTML5 the code of our test page Video on the web – the EU-OSHA experience
  10. 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. 11. Video on the web – the EU-OSHA experience Questions? Gorka MORAL [email_address] Follow @eu_osha