Html5 - audio and video tags

1,039 views

Published on

Staging the addition of the html5 audio and video tags

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,039
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 - audio and video tags

  1. 1. Rae Allen
  2. 2.  Treat audio / video like image element Pros • Reduce dependency on players • Reduce code weight • Consistent experience within browser Cons • Not supported by all browsers • Support is inconsistent • Limited design changes
  3. 3. <img src="/reslib/201102/r721155_5730666.jpg" alt="Mike Martin“ title="Mike Martin perfoming Fireweed“/>
  4. 4. Example: http://www.abc.net.au/local/videos/2011/02/18/3142904.htm<div class="player"> <div id="media_main"> <script src="http://www.abc.net.au/tv/cinerama2/scripts/cinerama2.js" type="text/javascript" language="JavaScript"></script> <script type="text/javascript"> //create a colour object to define the colors for the player. //highlightColour is the color of the bar that follows the play head. //backgroundColour is the colour of the page behind the player. //textColour is the colour of the title and the counters. /*The replace function replaces an element on the page with the cinerama player. The parameters are: (id, source, width, height, colour object, title, autoStart) id: (required) The id of the element to be replaced, usually an image element. The image will then be pulled into the player and displayed before the video is started. source: (required) This can be a single flv or h.264 mp4 file or a media rss file containing 1 or more items. If a media rss file does contain more that one item the multiClip section is automatically embedded next to the player. width: (required) The width of the video to be displayed. height: (required) The height of the video to be displayed. Note that the player will embed slightly higher that this to allow for the controlls. colour object: A javascript object defining the colours for the player (see above). title: The beginning title displayed on the player before a movie is played. If no title is supplied the script will attempt to use the alt text of the image it is replacing. autoStart: true tells the player to start the video as soon as it loads. false tells the player to wait for the user to initiate the video by pressing play. embedSrc: true tells the player to show the embed src for the video. false hides the embed Src. */ var title = "Mike%20Martin%20-%20Fireweed"; title = unescape(title); cinerama.ratings = false; cinerama.secure = false; cinerama.geoBlock = false; cinerama.embedSrc = true; cinerama.highlightColour = "#006CD9"; cinerama.backgroundColour = "#000000"; cinerama.textColour = "#77BBFF"; cinerama.wmode = "transparent"; // Default height and widths, overwritten by css. cinerama.embedPlayer(media_main_player,http://www.abc.net.au/reslib/201102/r721157_5730690.mp4,400,224, title,false); </script> <noscript>Javascript is currently no enabled on your browser. To view this media, please enabled Javascript in your browser setttings.</noscript> <img id="media_main_player" src="http://www.abc.net.au/reslib/201102/r721155_5730665.jpg" alt="loading video" title="loading video"/></div> </div>
  5. 5. Example: http://www.abc.net.au/local/videos/2011/02/18/3142904.htm<video src="/reslib/201102/r721157_5730690.mp4“ poster=“/reslib/201102/r721155_5730665.jpg" width="700px" controls></video>
  6. 6.  Example: http://www.abc.net.au/local/audio/2011/02/22/3145836.htm <script src="/local/includes/scripts/jquery/plugins/jquery.flash.js" type="text/javascript" language="JavaScript"></script> <script src="/local/includes/scripts/audioplayer.js" type="text/javascript" language="JavaScript"></script><noscript>Javascript is currently no enabled on your browser. To view this media, please enabled Javascript in your browser setttings.</noscript> <embed class="player_audio" flashvars="autoplay=false&amp;glassyplayer=true&amp;playerbgcolor=%23 2E2E2E&amp;volumeiconcolor=%23FFFFFF&amp;mediaURL=http%3A%2 F%2Fmpegmedia.abc.net.au%2Flocal%2Fbrisbane%2F201102%2Fr722932 _5759695.mp3" pluginspage="http://www.adobe.com/go/getflashplayer" src="http://www.abc.net.au/local/global_flash/player_mp3_v2.swf" type="application/x-shockwave-flash" height="30" width="220"><a class="color3 mp3download" href="http://mpegmedia.abc.net.au/local/brisbane/201102/r722932_5759695 .mp3">Download this mp3 file</a>
  7. 7. Example: http://www.abc.net.au/local/audio/2011/02/22/3145836a.htm<audio src=“http://mpegmedia.abc.net.au/local/bri sbane/201102/r722932_5759695.mp3” preload controls></audio>
  8. 8. mp3 ogg wavFirefox no yes yesSafari yes no yesChrome yes yes noIE8 no no noIE9 (beta) yes no yes
  9. 9. mp4 ogg/theora webmFirefox no yes yesSafari yes no maybeChrome yes yes yesIE8 no no noIE9 (beta) yes no maybe
  10. 10. example: http://www.abc.net.au/local/videos/2011/02/18/3142904b.htm
  11. 11.  begin implementing some html5 tags • Device specific use • Browser specific use make html5 default mode

×