Introduction

Audio & video are the most essential part for a website. You can promote your business using video and audio.  It is simple and easy to use.

Well HTML stands for Hyper Text Markup Language. It shows the structure of a web page. You can display your document on webpage using HTML. In this tutorial we will be learning about inserting audio and video on webpage. These both items are very useful for promoting web pages. You can take example of famous websites you tube and sound cloud. You tube uses video and sound cloud uses sounds. For inserting these items all you need is html tags. Using audio and video tags you can easily upload on the webpage.

Let’s upload video first to our webpage. You need a small video clip on your folder. For uploading video on you must create html page first. I add death bed video inside code. Then you have to write some code inside that page. Follow the source code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video</title>
</head>
<body>
    <video width="540" height="320" controls>
        <source src="p.webm" type="video/webm">
      </video>
    
</body>
</html>

Further Audio & video

The width and height represent the width and height of the video. Likewise, the control displays the video controller buttons. Html supports various video formats. See the output below.

Audio & video - img1

Now let’s insert audio. We use html tags. You need to have audio clip on your specific folder. It is very simple. Just use audio tag only. Have a look at the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio</title>
</head>
<body>
    <audio controls>
        <source src="Jason.mp3" type="audio/mp3">
      </audio>
    
</body>
</html>

The control displays the audio control. Such as volume, play, pause, timer and seek bar. See the output below.

Audio & video - img2

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •