Web pages often contain multimedia elements of various types and formats like images, sounds, videos, animations, etc. In general, multimedia is everything you can hear or see.
Most of the multimedia formats (file extension types) are not supported by all browsers. Some browsers display it properly while others won't. But, there are a few multimedia formats which are supported by all browsers which you'll see here.
You can find a huge number of video file formats like mpg, mpeg, avi, wmv, mov, ram, flv, ogg, webm, mp4, etc. Flv file requires an additional plugin installed in web browsers to run it while webm and ogg files are supported by most of the browsers but still not by all.
mp4 is the only video file type supported by all browsers and it is the one recommended by youtube too.
The <video> element is used to embed video files in a web page.
<video width="320" height="240" controls="controls"> <source src="webtricksintro.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
The width and height attribute defines the size of the video. Without the width and height attribute the browser will display its original size which might be too big for the browser to display it properly. The controls attribute adds video control options like play, pause, volume, full screen, download and picute-in-picture.
The <source> element allows you to add multiple video sources within the <video> element from which the browser chooses the first file format it can serve well on the web page.
The text below the video sources work as alternative texts which will only be displayed if none of the video file type could be displayed on the browser.
Audio files too come in different file formats like midi, rm, wma, aac, wav, ogg, mp4, etc. The term mp3 has already become the synonym of digital music and it is the only one supported by all browsers while most of the browsers support wav and ogg file types too.
The <audio> element is used to embed audio files in a web page.
<audio controls="controls"> <source src="into-deep.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio>
The controls attribute adds control options like play, pause, volume and download.
The <source> element allows you to add multiple audio sources within the <audio> element from which the browser chooses the first file format it can serve well on the web page.
The text below the audio sources work as alternative texts which will only be displayed if none of the audio file type could be displayed on the browser.
The <object> element can be used to embed any object within an HTML document. It is supported by all browsers and generally used to embed plugins like Java applets, PDF readers, Flash Players, etc in web pages but can be used to embed images, or even another html file too.
<object width="100%" height="400" data="demo.html"></object>
The <embed> element is an empty tag which is supported by all major browsers. This element can also be used to embed any object in a web page like object element.
<embed width="100%" height="400" src="demo.html">
The easiest way to play videos in HTML is to use YouTube. YouTube will display an id on the URL (like esCzuD5QLQ8) when you play a video. You can use this id and refer to the video in your HTML code or click on the share option from youtube video page and select embed. An HTML iframe code will be displayed. Copy it and paste it in your webpage and you are done.
<iframe width="100%" height="420" src="https://www.youtube.com/embed/esCzuD5QLQ8"></iframe>
You can make your video start playing automatically when a user visits the page by adding a simple parameter to your YouTube URL.
<iframe width="100%" height="420" src="https://www.youtube.com/embed/esCzuD5QLQ8?autoplay=1"></iframe>
Value 0: Player controls does not display.
Value 1 (default): Player controls display.
<iframe width="100%" height="420" src="https://www.youtube.com/embed/esCzuD5QLQ8?controls=0"></iframe>
Google Maps allows you to display geographical locations on your web page. Similar to the youtube share / embed option you can find the share or embed option in google maps too. Click on it and select the size of the map you want for your webpage. Copy it and paste it in your webpage and a fully functional google map will appear on your web page. Here's an example of google map iframe tag.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d56516.31625953146!2d85.29111308854205!3d27.708955944370498!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb198a307baabf%3A0xb5137c1bf18db1ea!2sKathmandu+44600!5e0!3m2!1sen!2snp!4v1500113237412" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
You can redefine the height and width of the map to adjust it properly in your webpage.
An iframe is used to display a web page within a web page. Similar to the <object> and <embed> elements, it can also be used to display any content like images or multimedia files too. An HTML iframe is defined with the <iframe> tag.
<iframe src="URL"></iframe>
The src attribute defines the URL (web address) of the content to be displayed initially in the iframe.
You can define the size of an iframe using width and height attributes.
You can add a name to the iframe to make it load other contents after the page is loaded.
<iframe name="target_frame" src="demo.html" width="300" height="300"></iframe> <a href="https://localhost/webtrix" target="target_frame">Visit Webtrickshome</a>
The iframe will load demo.html file initially on page load. But, once the link to webtrickshome is clicked, the iframe will load the new content instead as the target for the link to webtrickshome is defined to be the iframe using its name.
Leave a comment