- 3 years ago
- Shahzad Gujjar
- 4,196 Views
-
2
You can learn how to embed audio into an HTML document in this tutorial.
Embedding Audio in HTML Document
Previously, inserting audio into a web page was difficult due to the lack of a uniform standard for defining embedded media files like audio in web browsers.
We’ll show you how to insert sound in your webpage in a number of ways in this chapter, from using a simple link to using the latest HTML5 audio> element.
Using the HTML5 audio Element
The HTML5 audio> element, which was recently introduced, provides a standard way to insert audio on web pages. The audio element, on the other hand, is relatively new, but it works in most modern web browsers.
The example below simply inserts audio into an HTML5 document using the browser’s default controls and one source defined by the src attribute.
<audio controls="controls" src="media/birds.mp3">
Your browser does not support the HTML5 Audio element.
</audio>
Audio with alternate sources, using the browser’s default settings.
<audio controls="controls">
<source src="media/birds.mp3" type="audio/mpeg">
<source src="media/birds.ogg" type="audio/ogg">
Your browser does not support the HTML5 Audio element.
</audio>
In the above example, the ‘ogg’ track works in Firefox, Opera, and Chrome, while the same track in the’mp3′ format is used in Internet Explorer and Safari to make the audio work.
Linking Audio Files
By ticking on your audio files, you can create links to them and play them.
To see how this works in practice, consider the following example:
<a href="media/sea.mp3">Track 1</a>
<a href="media/wind.mp3">Track 2</a>
Using the object Element
The <object> element is used in HTML documents to embed various types of media files. Originally, this element was used to insert ActiveX controls, but the specification states that an object may be any type of media object, including audio, video, PDF files, Flash animations, and even images.
A simple audio file is embedded in a web page using the example code below.
<object data="media/sea.mp3"></object>
<object data="media/sea.ogg"></object>
The <object> element isn’t commonly supported, and its use is highly dependent on the type of object being inserted. In certain cases, other methods such as the HTML5 <audio> element or third-party HTML5 audio players may be a better option.
Using the embed Element
To embed multimedia content into an HTML document, use the <embed> element.
The code fragment below inserts audio files into a web page.
<embed src="media/wind.mp3">
<embed src="media/wind.ogg">
Despite the fact that the embed> element is widely supported in modern browsers and is specified as a standard in HTML5, your audio which not play due to a lack of browser support for that file format or the lack of plugins.
HTML5 Video
You can learn how to insert a video into an HTML document in this tutorial.
Embedding Video in HTML Document
Since web browsers did not have a uniform standard for describing embedded media files like video, embedding video into a web page was not simple.
From the new HTML5 <video> element to famous YouTube videos, we’ll demonstrate some of the many ways to add videos to web pages in this chapter.
Using the HTML5 video Element
The HTML5 <video> element, which was recently released, provides a standard way to embed video in web pages. The video element, on the other hand, is relatively new, but it works in most modern web browsers.
The following example simply inserts a video into an HTML document with one source specified by the src attribute, using the browser’s default controls.
<video controls="controls" src="media/shuttle.mp4">
Your browser does not support the HTML5 Video element.
</video>
A video with alternate sources, using the browser’s default controls.
<video controls="controls">
<source src="media/shuttle.mp4" type="video/mp4">
<source src="media/shuttle.ogv" type="video/ogg">
Your browser does not support the HTML5 Video element.
</video>
Using the object Element
The <object> element is used in HTML documents to embed various types of media files. Originally, this element was used to insert ActiveX controls, but the specification states that an object may be any type of media object, including video, audio, PDF files, Flash animations, and even images.
The code fragment below inserts a Flash video into a web page.
<object data="media/blur.swf" width="400px" height="200px"></object>
This video will only play in Flash-enabled browsers or applications.
CAUTION: The <object> element isn’t commonly supported, and its use is highly dependent on the type of object being inserted. In certain cases, alternative methods may be preferable. Flash videos aren’t supported by the iPad or iPhone.
Using the embed Element
To embed multimedia content into an HTML document, use the <embed> element.
The code fragment below inserts a Flash video into a web page.
<embed src="media/blur.swf" width="400px" height="200px">
Despite the fact that the <embed> element is widely supported in modern web browsers and is specified as a standard in HTML5, your video may not play due to a lack of browser support for Flash or the lack of plugins.
Embedding the YouTube Videos
This is the simplest and most common method of embedding video files on web pages. Simply upload the video to YouTube and use HTML code to embed it in your website.
Here’s a live example, followed by an explanation of the entire process:
Step 1: Upload video
To upload your video to YouTube, go to the upload video page and follow the instructions.
Step 2: Creating the HTML Code to embed the video
When you open your uploaded video on YouTube, you’ll see something similar to the image below at the bottom. On YouTube, find and open the video you just uploaded. Now, as shown in the figure, look for the share button, which is located just below the video.
When you click the sharing button, a share panel with additional buttons appears. When you click the Embed button, the HTML code for directly embedding the video into web pages will be generated. Just copy and paste that code into your HTML document where you want to display the video and you’re all set. By default, video is embedded inside an iframe.
By selecting the customization option just below the embed-code input box, you can further customize this embed code, such as changing the video size.
The following example simply embeds a YouTube video. Let’s put it to the test:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YouTube Video</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7gyDSun7pCw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
- 3 years ago
- Shahzad Gujjar
- 4,196 Views
-
2
