Create a Simple Video Player Using Html and Javascript | TechNepal

0
video-player-using-html-and-javascript

If you are into web development and designing, a Video Player Project can come very handy in learning and understanding the basics of HTML and JavaScript functioning. In this article, We will be providing you the code of building a simple video player which will have features like resizing, controlling and and adjusting the video.

Here is the video link where we have clearly explained the codes in Nepali. Do give it a watch for better understanding.

Code for Video Player Using Html and JavaScript:

  1. <!DOCTYPE html>
    <html>
    <head>
    <title>Video demo</title>
    </head>
    <body>
    <style>
    body { text-align:center; }
    body {background-color: lightgray;}
    button{background-color: yellow;}
    button{border: 3px solid white;}
    button{border-radius: 10px;}
    button{font-size: 14px;}
    button{margin-top: 30px;}
    </style>
    <button onclick=”playPause()”>Play/Pause</button>
    <button onclick=”makeSmall()”>Small</button>
    <button onclick=”makeNormal()”>Normal</button>
    <button onclick=”makeBig()”>Big</button>
    <button onclick=”makeLarge()”>Large</button>
    <br><br>
    <video id=”video1″ width=”600″ controls=”” controls poster=”image.jpeg” controls loop>

    <source src=”video.mp4″ type=”video/mp4″>
    </video>
    <script>
    var myVideo=document.getElementById(“video1”);
    function playPause() {
    if(myVideo.paused)
    myVideo.play();
    else
    myVideo.pause();
    }
    function makeSmall(){
    myVideo.width= 200;
    }
    function makeNormal(){
    myVideo.width= 400;
    }
    function makeBig(){
    myVideo.width= 800;
    }
    function makeLarge(){
    myVideo.width= 1500;
    }

    </script>
    </body>
    </html>

Output:

video-player-using-html-and-js

Code Explanation for creating a video player in Html and JavaScript:

  1. Every code written in HTML must be started with <html> tag and ended with </html> tag. We write it to define the root of a HTML document. The <!DOCTYPE HTML> tag tells the compiler that the code written is in HTML and follows all the rules of writing a HTML code.
  2. <head> tag contains the metadata for the code(file). It tells the compiler the code between <head> and </head> tag is to be displayed at the top. <title> tag defines the title for the document. It can be seen in the top of the browser that you are using.
  3. <body> tag includes everything that is to be shown on the website after the <head> tag.
  4. <style> tag is used to insert CSS codes inside it. It tells the compiler that we are willing to insert CSS codes inside this tag so it will compile the code accordingly.
  5. <script> tag is used to insert JavaScript codes in your file. Without specifying it, the compiler would not know that the code is JavaScript.
  6. <button> tag is used to create a button. We have included “onclick” event in <button>, which means that if a user click on that particular button then it will implement the JS code that we have written and linked with it.
  7. <video> tag tells the compiler that we are inserting video in this code. To insert a video, we must specify the video name and its extension as done above. We have also created an ID so that it can later be implemented with the JS code. The attributes used in <video> tag are:
  • Width:  Specifies the size(width) of the video.
  • Controls=””: Provides a feature to the user to control the basics of the player.
  • Controls poster=””: Shows a thumbnail for the video.
  • Controls loop: Loops the video.

8. For the JavaScript code after <video>, we have created a variable(var) “myVideo” and linked it with our video. That means, whatever changes we apply in “myVideo” will be implemented to our video. Each functions created in <button> tag has been called and changes have been done accordingly to each buttons.

We hope this project was helpful for you and the tutorial was affective as well.

Also read:

How to create a form using HTML only

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here