Controls and attributes for multimedia elements in html
While inserting multimedia object in any HTML web page, you can insert or embed multimedia object like particular <video> and <audio> tag in your desired web page anytime. While embedding multimedia audio and video object in any HTML web page, we can manually manage and control many audio and video controls and attributes as per our requirement.
Audio and Video Different Controls and Attributes in HTML Web Page.
Multimedia <video> Tag Attributes
Video tag main attributes.
Video src attributes – Defines the storage location or path of the video file embedded in the existing HTML web page. Here you can add the video to the existing web page through both online and offline medium.
Video src source example.
<video src=”videoname.mp4″ controls></video>
video controls attributes – Display and manage video playback controls, such as play, pause, and volume, in an embedded HTML web page.
Video control example.
<video src=”videoname.mp4″ controls></video>
video autoplay attributes – Set the default play mode of a video inserted in a web page to autoplay. In video autoplay mode, the video will automatically play when the web page loads.
Video autoplay example.
<video src=”videoname.mp4″ autoplay></video>
video loop attributes – When a video embedded in an HTML web page terminates, it loops repeatedly in the web page for an infinite amount of time, unless the attribute is manually terminated by the web user.
Video loop example.
<video src=”videoname.mp4″ loop></video>
video muted attributes – If you want, mutes the video sound in the preview when the video file embedded in the web page is played.
Video muted example.
<video src=”videoname.mp4″ muted></video>
video poster attributes – If you want, display a graphical image or posture above the video file before it plays in your web page.
Video posture example.
<video src=”videoname.mp4″ poster=”movie.jpg” controls></video>
video width or height attributes – Configure the properties here to tell the video embedded in the current web page to display in pixel dimensions or resolution in terms of height and width in the video player.
Video width or height example.
<video src=”videoname.mp4″ width=”400″ height=”280″ controls></video>
video <source> Element example.
video src attributes – You can embed the path or location of different video file extensions in your HTML web page as per your requirement.
different Video embed example.
<video controls width=”400″ height=”340″>
<source src=”videoname.flv” type=”video/flv”>
<source src=”videoname.mkv” type=”video/mkv”>
if video not played, your web browser is too old to update.
</video>
video type attributes – Display the media extension type of the video file embedded in the current web page.
Video type example.
<source src=”video.mp4″ type=”video/mp4″>
Html Video Tag Attributes 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 Play Some Online Random Video</h2>
<video controls autoplay loop width=”600″ height=”450″ poster=”movieimage.jpg”>
<source src=”https://videos.pexels.com/video-files/18239063/18239063-hd_1920_1080_24fps.mp4″ type=”video/mp4″>
If Video Not Played, Your Web Browser Is Too Old, Update It.
</video>
<video controls autoplay loop width=”600″ height=”450″ poster=”movieimage.jpg”>
<source src=”https://videos.pexels.com/video-files/27378651/12129341_2560_1440_30fps.mp4″ type=”video/mp4″>
If Video Not Played, Your Web Browser Is Too Old, Update It.
</video>
</body>
</html>
multimedia <audio> tag attributes.
Audio tag main attributes.
audio src attributes – The src audio attributes defines the storage path or source location of the embedded audio file in the current HTML web page.
audio src attributes example.
<audio src=”audioname.mp3″ controls></audio>
audio controls attributes – You can manage audio playback controls such as play, pause, and volume in the current HTML web page.
audio controls attributes example.
<audio src=”audioname.mp3″ controls></audio>
audio autoplay attributes – If you want to enable autoplay features in the audio file embedded in your web page. Audio autoplay control will autoplay your audio file when the web browser loads.
audio autoplay attributes example.
<audio src=”audioname.mp3″ autoplay></audio>
audio loop attributes – These audio features allow you to repeat an audio file infinitely when the audio ends in your HTML web page.
audio loop attributes example.
<audio src=”audioname.mp3″ loop></audio>
audio mute attributes – The audio file displayed in the web browser can be displayed muted by default.
audio mute attributes example.
<audio src=”audio.mp3″ muted></audio>
audio <source> element example.
audio src attributes – You can embed the location or path of many types of audio file extensions in your custom HTML web page. Insert the currently popular audio file extensions in the web page as per your requirement.
<audio controls>
<source src=”audioname.mp3″ type=”audio/mp3″>
<source src=”audioname.ogg” type=”audio/ogg”>
if audio file extension not played, your web browser is too old.
</audio>
audio type attributes – Indicates the type of audio file extension to be embedded in your HTML web page.
audio type attributes example.
<source src=”audioname.mp3″ type=”audio/mp3″>
Html Audio Tag Attributes 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>Lets Play Some Audio Files </h2>
<audio controls autoplay loop muted>
<source src=”audiofilename.mp3″ type=”audio/mp3″>
If Audio Is Not Played, Your Web Browser Is Too Old, Update It.
</audio>
<audio controls autoplay loop muted>
<source src=”audiofilename.mp3″ type=”audio/mp3″>
If Audio Is Not Played, Your Web Browser Is Too Old, Update It.
</audio>
</body>
</html>
