Post on 18-Dec-2014
description
transcript
Rae Allen
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
<img
src="/reslib/201102/r721155_5730666.jpg"
alt="Mike Martin“
title="Mike Martin perfoming 'Fireweed'“
/>
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>
Example: http://www.abc.net.au/local/videos/2011/02/18/3142904.htm
<videosrc="/reslib/201102/r721157_5730690.mp4“
poster=“/reslib/201102/r721155_5730665.jpg"
width="700px"
controls>
</video>
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&glassyplayer=true&playerbgcolor=%232E2E2E&volumeiconcolor=%23FFFFFF&mediaURL=http%3A%2F%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>
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>
mp3 ogg wav
Firefox no yes yes
Safari yes no yes
Chrome yes yes no
IE8 no no no
IE9 (beta) yes no yes
mp4 ogg/theora webm
Firefox no yes yes
Safari yes no maybe
Chrome yes yes yes
IE8 no no no
IE9 (beta) yes no maybe
example: http://www.abc.net.au/local/videos/2011/02/18/3142904b.htm
begin implementing some html5 tags• Device specific use
• Browser specific use
make html5 default mode