---
title: "HTML5 Audio and Video Player"  
description: "Hi everyone in this blog I’m explaining about custom html 5 video player.  Description:There were nearly negligible media elements in previous version"  
author: "Anonymous User"  
published: 2015-01-31  
updated: 2015-01-31  
canonical: https://www.mindstick.com/blog/751/html5-audio-and-video-player  
category: "asp.net"  
tags: ["html5", "html5 video", "html5 audio"]  
reading_time: 2 minutes  

---

# HTML5 Audio and Video Player

Hi everyone in this blog I’m explaining about custom html 5 video player.\

##### Description:

There were nearly negligible media [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) in [previous versions](https://www.mindstick.com/forum/157962/what-is-bootstrap-5-and-how-does-it-differ-from-previous-versions-of-bootstrap) of HTML, yet those were still very helpful and handy. With the rise of HTML5, several media elements have also come into the light. \
\
These media elements will change the entire [scenario](https://yourviews.mindstick.com/view/81221/sports-will-change-the-education-scenario) of designing and [development](https://www.mindstick.com/articles/65309/importance-of-ux-design-in-the-development-of-mobile-apps) using HTML. This article will provide an [introduction](https://www.mindstick.com/articles/13122/an-introduction-to-network-cables) and a little description of these elements.

\
Media Elements:

The following are the 5 most popular media elements.

Audio:

1. Audio element is used for defining or creating a music element in your simple HTML page.
2. It [supports](https://www.mindstick.com/blog/12043/how-to-create-a-killer-mobile-app-that-supports-your-brand) all the browsers like [Internet](https://www.mindstick.com/articles/44650/what-should-you-do-during-an-internet-outage) [Explorer](https://www.mindstick.com/forum/34658/want-to-developed-windows-explorer-without-using-telerik) 9.0 and above, Chrome, Opera, Firefox and Safari.
3. This tag defines music or any other audio streams formats.

![HTML5 Audio and Video Player](https://www.mindstick.com/blogs/b8659034-54b1-4801-938e-88d8f0c4c765/images/f89e1f72-9d75-4f4f-96e6-34cc7fe5cf3e.png)

##### Code:

```
<audio controls>    <source src="1.mp3" type="audio/mpeg">    <source src="2.mp3" type="audio/mpeg">    <source src="3.amr" type="audio/amr">    <source src="4.amr" type="audio/amr"></audio>
```

##### Outcome

##### Video:

The Video element creates a video element in your HTML page. It supports

all the browsers like Internet Explorer 9.0 and above, Chrome, Opera,

Firefox and Safari. This tag defines music or any other video streams

formats.

![HTML5 Audio and Video Player](https://www.mindstick.com/blogs/b8659034-54b1-4801-938e-88d8f0c4c765/images/7b2c546c-9b1e-4844-b832-cf7dc405db55.png)

##### \
Code:

```
<div style="width:50%;margin:100px auto;height:400px;">    <video controls preload="none" style="width:100%;max-width:100%;">        <source src="~/Content/Video/1.mp4" type="video/mp4">    </video></div>
```

in my next post i'll explain about [Combining ASP.Net MVC With SQL Server Reporting Services](https://www.mindstick.com/blog/752/Combining%20ASP%20Net%20MVC%20With%20SQL%20Server%20Reporting%20Services#.VP_fSPmUdz8)

---

Original Source: https://www.mindstick.com/blog/751/html5-audio-and-video-player

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.