About Me

My photo

Senior Technical Talent Advisor and Community Development - A.I, Machine Learning and Data Science.

Director & Co-Founder @ www.Abso-Fashion-Lutely.co.uk
Director & Founder of Data Science & Big Data Analytics IT Job Board http://datasciencebigdataanalytics.jobboard.io/

Roles:

Data Scientist, Statistician, Insight Analyst, Chief Data Scientists, Data Architect, Data Engineer, Data Analyst, Statistics Consultant, Research Engineer, Quantitative Analyst, Developer, Engineer, Pre-Sales / Post Sales engineer, Sales Engineer, Software Engineer, Systems Engineer, Technical Evangelist, Client Services Engineer, Architects (Cloud, Solutions & Enterprise), Cloud & Big data Analytics, Microsoft Azure and consulting roles.

The above is not an exclusive list and I work on a diverse range of roles and technologies. Contact me:  0044 788 135 1363

I am currently studying with Udacity to further my career in Data Science, Big Data Analytics, Programming, Algorithms, Artificial Intelligence, Computer Science, Statistics, Physics, Psychology & Visualizing Algebra.

I specialise in the following:

• Talent Manager and also responsible for expanding our internal team; vetting, meeting & technically testing candidates
• Providing advice around legal, accounting and general recruitment to the community
• Utilising the latest social media strategies for recruitment Twitter,Github Etc ..
• Setting up interviews, negotiating extensions, offers & contracts
• Developing new relationships and bringing in new business
• Client & account management
• Attending and arranging technical conferences to better my understanding of the technologies and markets I specialise in

I own & run the following groups on LinkedIn:
• ASP.Net MVC 3, MVC 4 & MVC5 Ninjas
• Cloud & Big data
• Microsoft Azure Ninjas
• Data Scientist & Analytics UK
• HTML5 Ninjas
• Java Blackbelt
• Hadoop Experts UK & EMEA
You'll need Skype CreditFree via Skype

Wednesday, 14 December 2011

Working with Media in HTML5

Unless you have been living on a remote island for the past year or so, you have probably heard the buzz and hype around HTML5. No, HTML5 will not cure most illnesses, nor will it end world hunger, but it is poised to reshape the rich Internet application landscape. With all the hype over the new HTML standard, it's important to bring the discussion back down to earth. Here are the important facts you need to know about this new HTML specification:
  • HTML5 is the first new version of the specification since 1999—the Web has changed a lot since then.
  • HTML5 will be the new standard for HTML, XHTML and the HTML DOM.
  • HTML5 provides a standard way of playing media—a key benefit  because there was no standard for playing media in a Web page without a browser plug-in, and no guarantee that every browser would support the plug-in.
  • HTML5 is still a work in progress, but most modern browsers have some HTML5 tag support.
When Silverlight 1.0 shipped in 2007, Microsoft touted its video and audio playback as primary features, and a prime reason to see Silverlight as an alternative to Flash—which is supported in one version or another on 95 percent of browsers worldwide. As of this writing, Silverlight is supported on around 75 percent of browsers worldwide, or about three of every four computers. But if you’re looking to play media and you don’t want to the hassle or the dependency of a plug-in, HTML5 is the answer.
To see the difference between using the HTML5 video tag and the traditional object tag to play media, consider the example in Figure 1.
Figure 1  The HTML Video Tag vs. the Object Tag to Play Media
  1. <section>
  2.     <h1>Using the HTML5 Video tag to play video</h1>
  3.     <video src="video1.mp4" >
  4.     </video>
  5. </section>
  6. <section>
  7.     <h1>Using the Object tag to play media using the Flash plug-in</h1> 
  8.     <object type="application/x-shockwave-flash"
  9.                data="player.swf" width="290" height="24">
  10.         <param name="movie" value="player.swf">
  11.     </object>
  12. </section>
So what’s the big deal? Both examples are simple and easy to implement. But the important point here is that because the <video> tag is a standard, there will be no question that it should be used to play media. You don’t have to guess if a browser has a certain version of a particular plug-in installed to play your media. The standard part is what’s been missing from HTML.

Supported Media Formats in HTML5

To use media in your next HTML5 application, you need to know what formats are supported. HTML5 supports AAC, MP3 and Ogg Vorbis for audio and Ogg Theora, WebM and MPEG-4 for video.
Even though HTML5 supports these media formats, however, not every browser supports every format. Figure 2 shows current browsers and the media formats they support.
Figure 2 Media Support in Current Browsers

BrowserVideo FormatsAudio Formats
 Ogg TheoraH.264VP8 (WebM)Ogg VorbisMP3Wav
Internet ExplorerManual install9.0Manual installNoYesNo
Mozilla Firefox3.5No4.0YesNoYes
Google Chrome3.0No6.0YesYesYes
SafariManual install3Manual installNoYesYes
Opera10.50No10.60YesNoYes

Using the Video Tag

To play a video in an HTML5 page, just use the <video> tag, as shown here:
  1. <video src="video.mp4" controls />
The src attribute (http://www.w3.org/TR/html5/video.html#the-source-element) sets the name or names of the video to play, and the control’s Boolean switch dictates whether the default playback controls displays. You can also use two other Boolean properties—autoplay and loop—when setting up the video tag. Figure 3 lists each property attribute and its value.
Figure 3 Video Tag Properties

AttributeValueDescription
 AudioMutedDefines the default state of the audio. Currently, only muted is allowed.
 AutoplayAutoplayIf present, the video starts playing as soon as it’s ready.
 ControlsControlsAdds Play, Pause and Volume controls.
 HeightPixelsSets the height of the video player.
 LoopLoopIf present, the video will start over again every time it finishes.
 PosterurlSpecifies the URL of an image representing the video.
 PreloadPreloadIf present, the video is loaded at page load and is ready to run. It is ignored if Autoplay is present.
 SrcurlThe URL of the video to play.
 WidthPixelsSets the width of the video player.

The following code shows a few of the key properties on the video player in a common scenario that includes setting the height and width, autoplay, loop and controls properties, which will display the play, pause and volume controls as well as a fallback error message.
  1. <video src="video.mp4" width="320" height="240" autoplay controls loop>
  2.     Your browser does not support the video tag.
  3. </video>
You can also set the specific MIME typeusing the type attribute and codec in the source element. These examples use the type attribute to set the MIME type and the encoding of the media:
  1. <!-- H.264 Constrained baseline profile video (main and extended video compatible)
  2.   level 3 and Low-Complexity AAC audio in MP4 container -->
  3. <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  4. <!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity
  5.   AAC audio in MP4 container -->
  6. <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
You can set properties in either HTML or JavaScript. The following code shows how to set the Boolean controls property in HTML and JavaScript.
<!-- 3 ways to show the controls -->
<video controls>
<video controls="">
<video controls="controls">
// 2 ways to show controls in JavaScript
video.controls = true;
video.setAttribute
       ('controls',
        'controls');
When you don’t know whether a browser will render the page, you need a fallback mechanism to play your media. All you do is list the video formats you have rendered your video in, and the browser plays the first one it supports. You can also add text as a last resort to let the user know that the browser being used doesn’t support native HTML5 playback of video. The following code includes multiple video sources as well as a fallback message indicating no HTML5 support.
  1. <video controls>
  2.     <source src="video1.mp4" />
  3.     <source src="video1.ogv" />
  4.     <source src="video1.webm" />
  5.     <p>This browser does not support HTML5 video</p>
  6. </video>
If you want to make sure your video plays, you can include the object tag to play a Flash version as well, like so:
  1. <video controls>
  2.     <source src="video1.mp4" />
  3.     <source src="video1.ogv" />
  4.     <source src="video1.webm" />
  5.     <object data="videoplayer.swf">
  6.         <param name="flashvars" value="video1.mp4">
  7.         HTML5 Video and Flash are not supported
  8.     </object>
  9. </video>
You can also use JavaScript to check if a video format is supported by checking the canPlayType property, as follows:
  1. var video = document.getElementsByTagName('video')[0];
  2. if (video.canPlayType)
  3.    { // video tag supported
  4. if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
  5.       { // it may be able to play}
  6.         else
  7.       {// the codecs or container are not supported
  8.         fallback(video);
  9.   }
  10. }
If you want to do something more expressive than the simple fallback text, you can use the onerror event listener to pass the error to:
  1. <video src="video.mp4"
  2.        onerror="fallback(this)">
  3.        video not supported
  4. </video>
Using the poster property, you can specify the URL of an image to show in place of the video on the form. Usually you’re showing either a list of videos or a single video on a form, so having an easy way to show a preview of the video in the form of an image delivers a better user experience. Here is the poster property in action:
  1. <video src="video1.mp4" poster="preview.jpg" </video>
Finally, by using a bit of JavaScript and basic HTML, you can create a more interactive video player. Figure 4 shows how to add a video player to a form with JavaScript and how to respond to user input to the control.
Figure 4  Interacting with Video in JavaScript
  1. var video = document.createElement('video');
  2. video.src = 'video1.mp4';
  3. video.controls = true;
  4. document.body.appendChild(video);
  5. var video = new Video();
  6. video.src = 'video1.mp4';
  7. var video = new Video('video1.mp4')
  8. <script>
  9.     var video = document.getElementsByTagName('video')[0];
  10. </script>
  11. <input type="button" value="Play" onclick="video.play()">
  12. <input type="button" value="Pause" onclick="video.pause()">
For a complete list of events and capabilities for playing video, check out this section of the spec at http://www.w3.org/TR/html5/video.html#playing-the-media-resource.

Using the Audio Tag

Using the audio tag is much like using the video tag: you pass one or more audio files to the control, and the first one the browser supports is played.
  1. <audio src="audio.ogg" controls>
  2.  Your browser does not support the audio element.
  3. </audio>
Figure 5 lists the properties available in the audio tag. The control doesn’t need to display like a video player, so properties like height, width and poster are not included.
Figure 5 Audio Tag Properties

AttributeValueDescription
 AutoplayautoplayIf present, the audio starts playing as soon as it’s ready.
 ControlscontrolsControls, such as a play button, are displayed.
 LooploopIf present, the audio starts playing again (looping) when it reaches the end.
 PreloadpreloadIf present, the audio is loaded at page load, and is ready to run. It’s ignored if autoplay is present.
 SrcurlThe URL of the audio to play.

As with the video tag, you can pass multiple files to the audio tag and the first one that is supported will play. You can also use a fallback message when the browser doesn’t support the audio tag, like this:
  1. <audio controls autoplay>
  2.    <source src="audio1.ogg" type="audio/ogg" />
  3.    <source src="audio1.mp3" type="audio/mpeg" />
  4.     Your browser does not support the audio element.
  5. </audio>

Summary

HTML5 is the next standard for the Web, and depending on the browsers you’re targeting, you can start using some of the new tags, such as audio and video, right now. Be cautious when using HTML5, however, because not every browser supports the new tags, and even if one does, it might not support every media format. If you’re using a modern browser that does support HTML5, you still need to do the extra work to process your media in all formats to ensure user success. Here are some great Web resources that provide browser support information as well as all the other information you need to ensure HTML5 media success:

1 comment:

  1. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 audio player| html5 audio player

    ReplyDelete

Note: only a member of this blog may post a comment.