Embedding audio and video with audio and video
In HTML5 web page, <audio> tag and <video> tag is used to directly embed or insert multimedia content including sound and video objects in web pages and websites. In HTML5, as compared to HTML4 version, media and audio object files can be inserted and played and controlled directly without any third-party plugins or support. Currently, the multimedia tags available in HTML5 provide audio, video, animation, and 2D and 3D object insert features in the website.
Embedding audio in HTML5 web page <audio> tag.
In HTML5 web page, you can embed desired audio file, recorded podcast sound, or any other type of audio files directly in the desired web page using <audio> tag and manage play, pause, mute and sound effect controls in the existing web browser as per the need. Currently, you can play and control various supported audio formats or extensions including MP3 audio files, WAV audio files and Ogg audio files in your HTML5 web page by embedding them in the existing web page.
Audio tag basic syntax in HTML5 web page.
<audio src=”path/to/test.mp3″ controls>
Your web browser not supported audio extension, you need to update, upgrade it first then paly.
</audio>
Audio tag attributes in HTML5.
- Audio src attributes – Defines the online and offline source path of the audio file to be inserted or embedded.
- Audio control attributes – Displays playback controls such as play, pause, volume, etc. in the audio player along with the audio file.
- Audio autoplay attributes – Inserting embedded audio automatically starts the audio in autoplay mode when the web page loads. You can customize it as per your requirement.
- Audio loop attributes – Starts and plays the audio file repeatedly from the start, looping it once the current audio file ends like a continuous loop.
- Audio preload attributes – You can manage how to preload and manage audio files in the web browser.
- audio auto attributes – When the web page is loaded in the web browser, the web browser auto loads and starts the entire audio file.
- audio metadata attributes – Loads only the metadata information of the audio file in the web browser.
- audio none attributes – Non attributes in audio tag do not apply preload attributes to the audio file in the web browser.
Audio tag attributes example.
<audio src=”audio/sound.mp3″ controls autoplay loop>
Your web browser not supported audio extension, you need to update, upgrade it first then play.
</audio>
HTML5 Audio Tag Detail Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Audio Tag Attributes</title>
</head>
<body>
<h1>Let Tray Audio Tag </h1>
<audio controls>
<source src=”audio1.mp3″ type=”audio/mpeg”>
<source src=”audio2.ogg” type=”audio/ogg”>
Your web browser not supported audio extension, you need to update, upgrade it first then play.
</audio>
</body>
</html>
Embedding video in HTML5 web page with <video> tag.
The <video> tag is used in HTML5 web page to insert or embed different types of video format or video extension video files in the existing web page, such as film or movie, educational video tutorial, blog video, video instruction, video guide, or any other type of video file. Currently, you can insert, embed and manage and control the playback of various types of video file formats including MP4 video, WebM video extension, and Ogg video files in your HTML5 web page.
Video tag basic syntax in HTML5 web page.
<video src=”path/to/movie.mp4″ controls width=”500″ height=”250″>
Your web browser not supported video extension, you need to update, upgrade it first then play.
</video>
HTML5 video tag attributes.
- Video src attributes – Indicates the default storage location path of the inserted embedded video file in the HTML5 web page. This location can be absolute or relative.
- Video controls – You can control and manage play, pause, volume in the playback controls of the video player inserted in the web page.
- Video autoplay – Automatically starts the embedded video file when the web page loads in the web browser.
- Video loop – The current web page keeps looping repeatedly after the video finishes.
- Video mute – Displays the audio of the video file with the audio muted by default in the current web page.
- Video poster – Adds or displays an image or posture file to be shown before the embedded video starts in the web page. It previews the video posture image before the video plays in the web browser.
- Video width and height – Defines the pixel dimensions of the video player playing in the current web page in height and width.
- Video preload – Defines the video load attributes of the web page in the web browser.
- Video auto – The complete video file is loaded in the web browser when the web page is loaded.
- Video metadata – The web browser only loads the video file’s metadata information, video time, in the current web page.
- Video none – The web browser does not apply the preload attribute to the video file in the web page.
Example of the HTML5 video tag.
<video src=”video/film.mp4″ controls width=”1920″ height=”1080″ poster=”film1.jpg”>
Your web browser not supported video extension, you need to update, upgrade it first then play.
</video>
HTML5 video extension Example.
<video controls width=”700″ height=”450″>
<source src=”video/video1.mp4″ type=”video/mp4″>
<source src=”video/ video2.webm” type=”video/webm”>
<source src=”video/ video3.ogv” type=”video/ogg”>
Your web browser not supported video extension, you need to update, upgrade it first then play.
</video>
HTML5 Video Tag Detail Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Video Attributes</title>
</head>
<body>
<h1>Let Tray Some Video Attributes</h1>
<video width=”1920″ height=”1080″ controls>
<source src=”movie1.mp4″ type=”video/mp4″>
<source src=”movie2.ogg” type=”video/ogg”>
Your web browser not supported video extension, you need to update, upgrade it first then play.
</video>
</body>
</html>
