Post
Ask Question

Inserting Video and Audio in a Website

Introduction

 
A website is more attractive when it contains a lot of graphic design or elements and extra. Playing video and audio is also one of the ways to attract the attention of the people. The process of adding video and audio in a webpage is not a tedious process. It can be easily done only by a few lines of coding. Based on your requirement you can add a video or audio or both at the same time, that is based on the user and their requirement. Let us discuss how to insert video and audio in a website in an easy manner.
 

IDE Used For Development

 
For developing this site, I am using Adobe Dreamweaver. It is a special tool built for web development. It is unique in its own way when compared to other tools. It has various options, such as drag and drop for developing. Here, you can easily import the template file for your web site. To learn more about Dreamweaver, do not forget to check my article about DreamWeaver here. The main reason for using this tool is that it will allow you to drag and drop video and audio files wherever you want.
 

Steps For Inserting Video and Audio

 
Step 1
 
As I said in my older article, you can create a file and attach the template files to that file. Make sure that the file is saved under an .HTML extension.
 
Inserting Video And Audio In A Website
 
Step 2
 
After that an empty file will open on the screen. You can code on that, based on your requirements.
 
Inserting Video And Audio In A Website
 
Step 2.a
 
During the time when you need to insert only the video file, you can use the code given below:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body>  
  4.         <video width="1000" controls>  
  5.             <source src="E:\Movies\The Expendables 3 (2014) HD (640x360).mp4" type="video/mp4">  
  6.             </video>  
  7.         </audio>  
  8.     </body>  
  9. </html>  
Step 2.b
 
When you need to insert only an audio file, you can use the code given below:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body>  
  4.         <audio width="200" controls>  
  5.             <source src="E:\Download_2\Penne En Kannae Final Track.wav" type="audio/mpeg">  
  6.             </audio>  
  7.         </body>  
  8.     </html>  
Step 2.c
 
When you need to insert both a video and audio file, you can use the code below:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body>  
  4.         <video width="1000" controls>  
  5.             <source src="E:\Movies\The Expendables 3 (2014) HD (640x360).mp4" type="video/mp4">  
  6.             </video>  
  7.             <audio width="200" controls>  
  8.                 <source src="E:\Download_2\Penne En Kannae Final Track.wav" type="audio/mpeg">  
  9.                 </audio>  
  10.             </body>  
  11.         </html>   
The alignment of video and audio tag may change based on your needs.
 
Be aware of the extension of the file you are using. When you are using the do not forget to change the type = video/ogg.
 
Step 3
 
Now you can save the file. That file will be available at the place where you chose as the destination of the file.
 
Inserting Video And Audio In A Website
 
Now you can click and open it in a browser, there you can play those two media.
 
Inserting Video And Audio In A Website
 
You are able to view the video in full-screen mode also.
 
BACKGROUND COLOUR
 
You can add the background colour for the page by using bgcolor within the body tag. The code for the page with background colour is:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body bgcolor="#888">  
  4.         <video width="1000" controls>  
  5.             <source src="E:\Movies\The Expendables 3 (2014) HD (640x360).mp4" type="video/mp4">  
  6.             </video>  
  7.             <audio width="200" controls>  
  8.                 <source src="E:\Download_2\Penne En Kannae Final Track.wav" type="audio/mpeg">  
  9.                 </audio>  
  10.             </body>  
  11.         </html>   
You can change the background colour based on your wish. You no need to worry about the background colour when you are having a template for the web site or web page. Additionally, in Dreamweaver, you are able to attach the style sheet for the web page individually, even before creating the page in the beginning setup itself.
 

Conclusion

 
The video and audio will add some more attraction to the site. It will help you to increase your attention to your product and help you attract more customers.


Similar Articles