Skip to main content
HTML5 features, include native audio and video support without the need for Flash.
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.

Embedding Video

Here is the simplest form of embedding a video file in your webpage −
<video src="foo.mp4"  width="300" height="200" controls>
   Your browser does not support the <video> element.   
</video>
The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are −
  • Ogg − Ogg files with Thedora video codec and Vorbis audio codec.
  • mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.
You can use <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format −
<!DOCTYPE HTML>
<html>
   <body>
      
      <video  width="300" height="200" controls autoplay>
         <source src="/html5/foo.ogg" type="video/ogg" />
         <source src="/html5/foo.mp4" type="video/mp4" />
         Your browser does not support the video element.
      </video>
      
   </body>
</html>
This will produce following result −

Video Attribute Specification

The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control −
AttributeDescription
autoplayThis boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
autobufferThis boolean attribute if specified, the video will automatically begin buffering even if it's not set to automatically play.
controlsIf this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback.
heightThis attribute specifies the height of the video's display area, in CSS pixels.
loopThis boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end.
preloadThis attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present.
posterThis is a URL of an image to show until the user plays or seeks.
srcThe URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed
widthThis attribute specifies the width of the video's display area, in CSS pixels.

Embedding Audio

HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows.
<audio src="foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>
The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.
You can use <source> tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format −
<!DOCTYPE HTML>
<html>
   <body>
      
      <audio controls autoplay>
         <source src="/html5/audio.ogg" type="audio/ogg" />
         <source src="/html5/audio.wav" type="audio/wav" />
         Your browser does not support the audio element.
      </audio>
      
   </body>
</html>
This will produce following result −

Audio Attribute Specification

The HTML5 audio tag can have a number of attributes to control the look and feel and various functionalities of the control:
AttributeDescription
autoplayThis boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
autobufferThis boolean attribute if specified, the audio will automatically begin buffering even if it's not set to automatically play.
controlsIf this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
loopThis boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end.
preloadThis attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
srcThe URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed

Handling Media Events

The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using Javascript −
EventDescription
abortThis event is generated when playback is aborted.
canplayThis event is generated when enough data is available that the media can be played.
endedThis event is generated when playback completes.
errorThis event is generated when an error occurs.
loadeddataThis event is generated when the first frame of the media has finished loading.
loadstartThis event is generated when loading of the media begins.
pauseThis event is generated when playback is paused.
playThis event is generated when playback starts or resumes.
progressThis event is generated periodically to inform the progress of the downloading the media.
ratechangeThis event is generated when the playback speed changes.
seekedThis event is generated when a seek operation completes.
seekingThis event is generated when a seek operation begins.
suspendThis event is generated when loading of the media is suspended.
volumechangeThis event is generated when the audio volume changes.
waitingThis event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).
Following is the example which allows to play the given video −
<!DOCTYPE HTML>
<html>
   <head>
   
      <script type="text/javascript">
         function PlayVideo(){
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video  width="300" height="200" src="/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         
         <input type="button" onclick="PlayVideo();"  value="Play"/>
      </form>
      
   </body>
</html>
This will produce following result −

Configuring Servers for Media Type

Most servers don't by default serve Ogg or mp4 media with the correct MIME types, so you'll likely need to add the appropriate configuration for this.
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

Comments

Post a Comment

Popular posts from this blog

The Windows Firewall with Advanced Security is a firewall that runs on the Windows Server 2012 and is turned on by default. The Firewall settings within Windows Server 2012 are managed from within the  Windows Firewall Microsoft Management Console . To set Firewall settings perform the following steps − Step 1  − Click on the Server Manager from the task bar → Click the Tools menu and select Windows Firewall with Advanced Security. Step 2  − To see the current configuration settings by selecting  Windows Firewall Properties  from the MMC. This  allows access to modify the settings  for each of the three firewall profiles, which are –  Domain, Private and Public  and IPsec settings. Step 3  − Applying custom rules, which will include the following two steps − Select either  Inbound Rules  or  Outbound Rules  under  Windows Firewall with Advanced Security  on the left side of the management console...
Post a Comment
Read more
In this chapter, we will see how to enable remote desktop application. It is important because this enables us to work remotely on the server. To do this, we have the following two options. For the first option, we have to follow the steps given below. Step 1  − Go to Start → right click “This PC” → Properties. Step 2  − On Left side click “Remote Setting”. Step 3  − Check radio button “Allow Remote connection to this computer” and Check box “Allow connection only from computers running Remote Desktop with Network Level Authentication (recommended)” → click “Select Users”. Step 4  − Click Add. Step 5  − Type user that you want to allow access. In my case, it is administrator → click OK. For the  second option , we need to follow the steps given below. Step 1  − Click on “Server Manage” → Local Server → click on “Enable” or Disable, if it is Disabled.
Post a Comment
Read more
In this chapter, we will see how to configure WSUS and tune it. The following steps should be followed for configuring it. Step 1  − When you open it for the first time, you should do it by going to “Server Manager” → Tools → Windows Server Update Services, then a Configuration wizard will be opened and then click → Next. Step 2  − Click “Start Connecting” → Wait until the green bar is full and then → Next. Step 3  − Check the box for which the updates want to be taken, I did for English and then → Next. Step 4  − Check the box for all the products which you want to update. It is just for Microsoft products and it is recommended to include all the products related to Microsoft and then → Next. Step 5  − Choose the classification updated to be downloaded, if you have a very good internet speed, then check all the boxes, otherwise just check “Critical Updates”. Step 6  − Now we should schedule the updates which I will recommend to do it a...
Post a Comment
Read more