HTML 5 TutorialsHTML5 Multimedia Part - 2

HTML5 Multimedia Part – 2

We are aware of including video and audio using HTML5 by the theory learned in last session. Today we are going to try it practically.
Through the theory, we now know that same HTML tags are used for both video and audio. So, in this tutorial we will see how to include video practically. As, including audio is same as including video, it is your homework to try including audio in a webpage yourself.
We will once again use our “Blue Developer Directory” website to demonstrate video. In this tutorial we are going to add a video to our “About Us” webpage in “Blue Developer Directory”. So, let’s start our job.

  1. Create a new folder on the desktop and name it as “blue_developer_video”. We are creating a new folder just to keep our previous work untouched.
  2. Now open the previous folder of “Blue Developer Directory” and copy all its content to the new created folder “blue_developer_video”.
  3. Now create another folder “video” in the “blue_developer_video” folder. Get any Mp4 video and copy it in the “video” folder.
  4. We have added a video file named as “ad.mp4” to our “video” folder. Now the contents of your “blue_developer_video” folder are as shown below.
  5. blue_developer_video_folder
    fig 1

  6. Now next step is to open the “about.html” webpage with notepad++.
  7. You have to place a video in this page below the text written.
  8. After opening the “about.html” page, you understand that the text seen on the “About Us” webpage in browser is written in the
    <section>------</section>

    tags. Just below the text written inside the section tags you need to place the video.

  9. So, write the following code below the text inside the
    <section>-------</section>

    tags.

  10. <video id="ad" width="420" height="290" controls>
     <source src="video/ad.mp4" type="video/mp4">
     Please update your browser
    </video>

    Explanation of the above code:

    • The above code is to include a video in your webpage, that uses only HTML5.
    • You have a video tag to include a video. Attributes of video tag are “id”, “width” and “height”. It is given an id as “ad”, width of 420 pixels and a height of 290 pixels.
    • You get to see “controls” written in the video tag, we will see it later.
    • To provide a source file that is a video file, source tag is used along with the video tag.
    • Attributes of source tag are “src” which provides the source file and “type” which specifies the type of file included as the source.
    • In our project, our source file is the “ad.mp4” which is in the “video“ folder in our “blue_developer_video” folder itself. And type of the file is “video.mp4”.
    • In the code the statement “Please update your browser” is written for the browsers that do not support the video/audio i.e. the low version browsers.
    • The “About Us” webpage after including video, looks as follows:
    • about_us_webpage_with_video
      fig 2

    • We had talked about discussing “controls” in video tag later. This is the time to discuss it.
    • Can you see the play button, a fore-back slider, a volume button and a forescreen button below the video?
    • These buttons come by default with the video only if you include the attribute “controls” in the video tag.
    • If you don’t include “controls” attribute in video tag, all the buttons specified and shown above will not appear with the video and your video will be seen, but not work.
    • We finished including video, you see, it is so simple.

    Now, I would like to do something more. I will add some buttons that will control the video. But this is something extra function that I want to implement. So, now I will require javascript with HTML5.
    So let’s add buttons using HTML5 and use javascript for working of the buttons.

  11. Write the following code below the end of video tag in the
    <section>--------</section>

    tags to include buttons on our webpage.

  12. <div style="width:400px">
      <button onclick="playPause()">Play/Pause</button>
      <button onclick="makeBig()">Big</button>
      <button onclick="makeSmall()">Small</button>
      <button onclick="makeNormal()">Normal</button>
    </div>

    Explanation of the above code:

    • Here, we have defined a div block that contains 4 buttons.
    • button tag is used to create a button. We have created buttons for “Play/Pause”, “Big”, “Small” and “Normal”.
    • “onclick” in the button tag is the “event” that calls various functions written in javascript. This event occurs when we click the button. That means, when we click the button, the specified function will be executed.
    • The “About Us” webpage after including the buttons is shown below.
    • buttons_on_about_us_page
      fig 3

    We finished with the designing part. Now it is time to make the buttons work. For this we have to write functions that are called at the “onclick” event. We are going to write these functions in javascript.
    Let’s write the function in

    <script>---------</script>

    tags as we know, server side languages are to be written inside script tag in .html pages.

  13. Write the following code below the div block for buttons in “about.html” page.
  14. <script>
     var myvideo=document.getElementById('ad');
    				
     function playPause()
     {
       if(myvideo.paused)
       {
         myvideo.play();
       }
       else
       {
         myvideo.pause();
       }
     }
    				
     function makeBig()
     {
       myvideo.width=560;
     }
    				
     function makeSmall()
     {
       myvideo.width=320;
     }
    				
     function makeNormal()
     {
       myvideo.width=420;
     }
    </script>
    

    Explanation of the above code:

    • The above code contains the functions that should be executed when the “onclick” event of the buttons occur.
    • We will see the functions one by one.
    • Before the functions we have declared a variable “myvideo” and have assigned the video as an object to it.
    • This is done by the following line of code:
    • var myvideo=document.getElementById('ad');
    • When we use “myvideo” in our coding, we are actually referring to our video “ad.mp4”.
    • Now the functions.
    1. playPause() function:
      • playPause() function is to be executed when “Play/Pause” button is clicked.
      • This function allows the user to play the video or to pause the video in between.
      • For this we need to know the current status of the video i.e. whether the video is in the play state or in the pause state.
      • To check this myvideo.paused condition is checked in the “if” statement.
      • If this is true; I mean if the video is in paused state, we call the inbuilt function play() to resume the video otherwise we call the inbuilt function pause() to pause the video.
    2. makeBig() function:
      • makeBig() function is to be executed when “Big” button is clicked.
      • This function allows the user to increase the size of the video.
      • To increase its size, we just need to increase the width of the video. This is done by the following statement:
      • myvideo.width=560;
      • The width of the video will increase upto 560 pixels, making it bigger.
    3. makeSmall() function:
      • makeSmall() function is to be executed when “Small” button is clicked.
      • This function allows the user to decrease the size of the video.
      • To decrease its size, we just need to decrease the width of the video. This is done by the following statement:
      • myvideo.width=320;
      • The width of the video will decrease upto 320 pixels, making it smaller.
    4. makeNormal() function:
      • makeNormal() function is to be executed when “Normal” button is clicked.
      • This function allows the user to bring the video to its normal size.
      • To reset its size, we just need to reset the width of the video. This is done by the following statement:
      • myvideo.width=420;
      • The width of the video will reset upto 420 pixels, bringing it to its original size.

Our webpage is ready with the video and some functioning buttons that control the video. When you click on the buttons, you will see all the operations happening as stated above.
Thus we finished with our video. Now its your turn to try audio in the same way.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -