HTML 5

HTML 5 Elements in a Look: Part 3

Introduction

If you are new to HTML 5, I suggest you to read my other article parts here:

  1. HTML 5 Elements in a Look: Part 1
  2. HTML 5 Elements in a Look: Part 2

Introduction to HTML5 Video

Before going through the video part, let us return to our previous version of HTML and discuss what all the issues are that we have encountered with those versions for playing the videos.

I will list the following problems:

  • We wanted to have an external plug in like Flash to play the video in our page.
  • There were no specific standard tags for playing the video.

HTML5 has introduced a new element <video>. Let us see how to use that element.

  1. <video width="500" controls>  
  2. <source src="sibi.mp4" type="video/mp4">  
It seems your browser is an outdated one, be new year.
  1. </video>  
Please find that I have added only a MP4 type. You can add the ogg type as follows:
  1. <source src="mov_bbb.ogg" type="video/ogg">  
Complete Markup
  1. <!DOCTYPE html>  
  2. <html>  
  3. <title>HTML5 Video -Sibeesh Passion</title>  
  4. <body>  
  5.   
  6.     <div>  
  7.         <video width="500" controls>  
  8.             <source src=" sibi.mp4" type="video/mp4">  
  9.             It seems your browser is outdated one, be new yaar.  
  10.         </video>  
  11.   
  12.         <div>  
  13.             <a href="Your video URL here">Your video URL here</a>.  
  14.         </div>  
  15.   
  16. </body>  
  17. </html>  
Please note that this tag won't be supported in IE 8 and below.

Points to remember

Here are some points that you must remember:

 

  1. The text “controls“ in the video markup is for adding the video player controls like play, pause and so on.

  2. The text “It seems your browser is outdated one, be new yaar.” Will display only if your browser won't support HTML5.

  3. It is always good to set the width for the video element to avoid the flickering in the browser.

Adding your own controls (play, pause and so on)

You can also add your own controls like play and pause to the video element, if you don't want to have the built-in control functionality.

Procedure:

  • You must remove the text controls from the element first.

  • Add the video tag.
    1. <video id="video1" width="500">  
    2. <source src="sibi.mp4" type="video/mp4">  
    3. <source src="sibi.ogg" type="video/ogg">  
    It seems your browser is outdated one, be new yaar.
    1. </video>  
  • Add UI elements
    1. <table>  
    2.        <tr>  
    3.            <td>  
    4.                <div onclick="playOrpause()">Play/Pause</div>  
    5.            </td>  
    6.            <td>  
    7.                <div onclick="big()">Big</div>  
    8.            </td>  
    9.            <td>  
    10.                <div onclick="small()">Small</div>  
    11.            </td>  
    12.            <td>  
    13.                <div onclick="normal()">Normal</div>  
    14.            </td>  
    15.        </tr>  
    16.    </table>  
  • Create the functions in the scripts.
    1. <script>  
    2.         var myVideo = document.getElementById("video1");  
    3.   
    4.         function playOrpause() {  
    5.             if (myVideo.paused)  
    6.                 myVideo.play();  
    7.             else  
    8.                 myVideo.pause();  
    9.         }  
    10.   
    11.         function big() {  
    12.             myVideo.width = 560;  
    13.         }  
    14.   
    15.         function small() {  
    16.             myVideo.width = 320;  
    17.         }  
    18.   
    19.         function normal() {  
    20.             myVideo.width = 420;  
    21.         }  
    22.     </script>  
Complete Markup
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.     <script src="jquery-1.9.1.js"></script>  
  5.     <div>  
  6.         <table>  
  7.             <tr>  
  8.                 <td>  
  9.                     <div onclick="playOrpause()">Play/Pause</div>  
  10.                 </td>  
  11.                 <td>  
  12.                     <div onclick="big()">Big</div>  
  13.                 </td>  
  14.                 <td>  
  15.                     <div onclick="small()">Small</div>  
  16.                 </td>  
  17.                 <td>  
  18.                     <div onclick="normal()">Normal</div>  
  19.                 </td>  
  20.             </tr>  
  21.         </table>  
  22.         <br>  
  23.         <video id="video1" width="500">  
  24.             <source src="sibi.mp4" type="video/mp4">  
  25.             <source src="sibi.ogg" type="video/ogg">  
  26.             It seems your browser is outdated one, be new yaar.  
  27.         </video>  
  28.     </div>  
  29.     <script>  
  30.         var myVideo = document.getElementById("video1");  
  31.         function playOrpause() {  
  32.             if (myVideo.paused)  
  33.                 myVideo.play();  
  34.             else  
  35.                 myVideo.pause();  
  36.         }  
  37.         function big() {  
  38.             myVideo.width = 560;  
  39.         }  
  40.         function small() {  
  41.             myVideo.width = 320;  
  42.         }  
  43.         function normal() {  
  44.             myVideo.width = 420;  
  45.         }  
  46.     </script>  
  47. </body>  
  48. </html>  

Wow, we have created our own controls.

Cool. That is all for today.

See you soon in the next part with another control. Please provide your valuable comments.

Kindest regards,

Sibeesh Venu.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs