अभीतक हमने देखा कि simple text और images को webpage पर add कैसे किया जाता है | अब इस topic में हम पढेंगे कि, Webpage पर audio और video को add कैसे किया जाता है |

Multimedia का मतलब कई रूपों को इकठ्ठा करना होता है | For Example, audio, video, animation, graphics, pictures, recordings, etc.

कुछ वक्त webpage पर audio या video file को embed करने की जरुरत पड़ती है |

Multimedia files के कुछ अलग-अलग formats होते है | For Example, .mp3, .mp4, .avi, .flv, .swf, .mkv, .ogg, .mpg, .mpeg, .mov, .aac

HTML Page पर कुछ multimedia files को embed करने के लिए कुछ elements का इस्तेमाल किया जाता है | Multimedia files को embed करने वाले सभी HTML Elements निचे दिए गये है |

• <audio>
• <video>
• <source>
• <embed>
• <object>
• <picture>

<audio> Element

<audio> Element से सामान्य तरीके से audio को अपने webpage पर embed किया जाता है |

<audio> element के controls attribute का इस्तेमाल audio को control करने के लिए किया जाता है |

example पर mp3 format के audio file को webpage पर embed किया गया है |

आप .wav, .mp4, .ogg, .WebM, .flac जैसे audio file format का भी इस्तेमाल कर सकते है |

<audio controls>
<source src="sample.mp3" type="audio/mpeg">
Current browser does not support audio element. <a href="sample.mp3">click here to download</a>
</audio>

Output :

<video> Element

<video> Element से सामान्य तरीके से video को अपने webpage पर embed किया जाता है |

<video> element के controls attribute का इस्तेमाल video को control करने के लिए किया जाता है |

example पर mp4 format के video file को webpage पर embed किया गया है |

आप .ogg, .webm जैसे video file format का भी इस्तेमाल कर सकते है |

<video width="320px" height="240px">
<source src="waterfall.mp4" type="video/mp4">
Current browser does not support video element. <a href="waterfall.mp4">click here to download</a>
</video>

Output :

<source> Element

<source> Element ये <audio>, <video> और <picture> element का child element होता है |

<source> Element का इस्तेमाल <audio>, <video> और <picture> element पर एक या उससे ज्यादा multimedia files को embed करने के लिए किया जाता है |

<audio controls>
<source src="sample.mp3" type="audio/mpeg">
<source src="sample.ogg" type="audio/ogg">
Current browser does not support audio element. <a href="sample.mp3">click here to download</a>
</audio>

Output :

<embed> Element

<embed> element ये non-HTML external application या interactive content को HTML Webpage पर embed करने के लिए इस्तेमाल किया जाता है |

<embed> element को अलग से closing element नहीं होता है |

<embed src="waterfall.mp4" width="320" height="240">
<embed src="sample.mp3">

Output :

<object> Element

HTML Document पर Object को embed करने के लिए <object> element का इस्तेमाल किया जाता है |

Object ये audio, video, Java Applet, Flash या PDF File हो सकती है |

आप <param> element का इस्तेमाल embed किये हुए <object> element के लिए भी कर सकते है |

<object data="mypdf.pdf" width="100%" height="240">
</object>

Output :

<object> Element with <param> Element

Example पर video को embed किया गया है और <param> element पर autoplay की value true दी गयी है |

<object data="waterfall.mp4" width="320" height="240">
<param name="autoplay" value="true">
</object>

Output :

<picture> Element

Responsive Image

<picture> element के जरिये आप Webpage पर responsive images को display कर सकते है |

<picture> element ये <audio> और <video> elements के जैसा होता है |

<picture> element पर दिए जानेवाले multiple sources/images को अपने हिसाब से width के जरिये images के लिए responsiveness प्रदान कर सकते है |

<picture> element पर media sources के लिए <source> element का इस्तेमाल किया जाता है |

<picture> element का आखिरी element ये <img> element होता है , ये by default होता है |

<picture>
<source media="(max-width: 500px)" srcset="mobile.png">
<source media="(max-width: 800px)" srcset="tablet.jpg">
<img src="computer.png" width="50%" alt="Default Image">
</picture>

Output :