Video and audio tag in html
If you want to insert or embed multimedia features in HTML5 web page. Then you can directly embed video and audio multimedia object in webpage using HTML5 <video> and <audio> tags. Video and audio HTML web page can be used to add multimedia object directly in web page using audio and video tags.
Use of video and audio tags in HTML5 web page.
HTML <video> tag.
Video multimedia object is embedded in the desired webpage using <video> tag in HTML web page. Here embedded video can be local offline and online video URL source link path.
Video tag basic syntax.
<video src=”videoname.mp4″ controls width=”400″ height=”240″>
if video not start, your web browser not compatible
</video>
Video tag main features.
Video src – Video src attributes defines the video source location to be inserted in HTML web page. Here you can add online and offline video object source path location.
Video src attributes Example.
<video src=”moviename.mp4″ controls></video>
Video controls – Desire HTML uses video multimedia control attributes in the web page to display multimedia controls like video playback controls (play, pause, volume) in the playing video player in the browser.
Video controls Example.
<video src=”videoname.mkv” controls></video>
Video width and height – Web developer defines the height and width of the video displayed in the web page and the video dimensions in the playing video player as per their requirement using video width and height attributes.
Video width and height Example.
<video src=”videoname.mp4″ controls width=”300″ height=”300″></video>
Video Autoplay Features – If you want to automatically play a video when it loads in your web page, then the video will start automatically in the web browser. By default this feature is turned off in videos.
Video Autoplay Features Example.
<video src=”videoname.mp4″ autoplay></video>
Video Loop – If you want to loop the video file playing in the current web page, then this property will automatically start or loop the video again after the video ends.
Video Loop Example.
<video src=”videoname.mp4″ loop></video>
Video Mute – If you want to display your desired video in the web browser with mute properties, then you can use video mute properties.
Video Mute Example.
<video src=”videoname.mp4″ muted></video>
Video Poster – If you want to display an image or poster at the beginning of a video displayed in your web browser, you can use video poster attributes.
Video poster example.
<video src=”videoname.mp4″ controls poster=”movieposter.jpg”></video>
Video <source> elements.
You can add various video formats to your HTML web page and display them individually. Currently, many popular video formats such as flv, mp4, mkv, avi, mov, wmv, webm, etc. can be added and played.
<video controls width=”300″ height=”300″>
<source src=”video1.mp4″ type=”video/mp4″>
<source src=”video2.flv” type=”video/flv”>
<source src=”video3.mov” type=”video/mov”>
<source src=”video4.webm” type=”video/webm”>
if video not preview, your web browser not compatible to preview
</video>
Html web page video tag example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title> Html Video Tag </title>
</head>
<body>
<h2>Let Tray Some Video In Html Web Page</h2>
<video controls width=”400″ height=”300″ poster=”movieposter.jpg”>
<source src=”https://cdn.pixabay.com/video/2024/06/17/217115_large.mp4″ type=”video/mp4″>
if video file not display, your web browser is too old.
</video>
</body>
</html>
<audio> tag.
If you want to add and display an audio file in your web page, you can add the desired audio file extension using <audio> tag in HTML web page and preview it in web browser.
Audio tag basic syntax.
<audio src=”audioname.mp3″ controls>
if audio file not preview, your web browser is too old
</audio>
Audio tag main attributes.
Audio src – You can define the source location of the audio file to be added to your web page. Here your audio file source location can be an online web server or local computer offline storage path.
Audio src attributes example.
<audio src=”audioname.mp3″ controls></audio>
Audio controls – Previews audio playback controls (play, pause, volume) features in the audio player of the audio file being played in the web page.
Audio controls example.
<audio src=”audioname.mp3″ controls></audio>
Audio autoplay – The audio to be played in the desired web page can be set with autoplay attributes when the audio is loaded in the web page, so that this audio file will play automatically as soon as the web page is previewed. By default these audio properties are turned off.
Audio autoplay Example.
<audio src=”audioname.mp3″ autoplay></audio>
Audio loop – This audio property loops your audio file, so that the audio will keep playing automatically when the file terminates.
Audio loop attributes Example.
<audio src=”audioname.mp3″ loop></audio>
Audio muted – If you want to mute the preview audio file during preview time in the web browser, then you can use audio muted attributes.
Audio muted attributes Example.
<audio src=”audioname.mp3″ muted></audio>
Using audio <source> elements.
You can display a website in your web browser by adding various audio file extensions as per your requirement, such as mp3, ogg, wav, etc.
<audio controls>
<source src=”audio1.mp3″ type=”audio/mp3″>
<source src=”audio2.wav” type=”audio/wav”>
<source src=”audio3.flac” type=”audio/flac”>
<source src=”audio4.ogg” type=”audio/ogg”>
if audio file not preview, your web browser is not compatible
</audio>
Html audio tag example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Audio Tag</title>
</head>
<body>
<h2>Let Tray Some Audio file</h2>
<audio controls>
<source src=”audioname.mp3″ type=”audio/mpeg”>
if audio file not display, your web browser is too old.
</audio>
</body>
</html>
