-->

HTML Media

You can show videos and audios on the webpage i.e. called as HTML Media. Browser support some predefined formats of audio and videos which are listed in last. Let's see how to show audios and videos in a html page.

HTML Audio

If you want show / run a audio file you have to use <audio> tag. Here is a syntax :

<audio controls>
  <source 
src="Audio_File_Pathtype="Audio_File_Format">
</audio>

Example:

<audio controls>
  <source 
src="fluteTune.mp3type="audio/mpeg">
</audio>

You can use control to show controls for the audio. You can use autoplay attribute to auto start the audio.

Example :

<audio controls autoplay>
  <source 
src="fluteTune.mp3type="audio/mpeg">
</audio>

 

HTML Videos

If you want show / run a video file you have to use <video> tag. Here is a syntax :

<video controls>
  <source 
src="Video_File_Pathtype="Video_File_Format">
</video>

Example:

<video height="400px" width="600pxcontrols>
  <source 
src="shortfilm.mp4type="video/mp4">
</video>

You can use control to show controls for the video. You can use autoplay attribute to auto start the video.

HTML Code:

<!DOCTYPE html>

<html>

                             <head>

                                                <title> HTML Media </title>

                                                <meta charset="UTF-8">

                             </head>

                             <body>

                                                <h1>HTML Media</h1>

                                                <h3>Audio with controls</h3>

                                                <audio controls>
                                                            <source 
src="fluteTune.mp3type="audio/mpeg">
                                                </audio>

                                                <h3>Video with controls</h3>

                                                <video height="400px" width="600pxcontrols>
                                                            <source 
src="shortfilm.mp4type="video/mp4">
                                                </video>

                        </body>

</html>

Output :


HTML Media

आप वेबपेज पर वीडियो और ऑडियो दिखा सकते हैं जिसे एचटीएमएल मीडिया के नाम से जाना जाता है। ब्राउज़र ऑडियो और वीडियो के कुछ पूर्वनिर्धारित स्वरूपों का समर्थन करता है आइए देखें कि एक html पेज में ऑडियो और वीडियो कैसे दिखाएं।

HTML Audio

यदि आप एक ऑडियो फ़ाइल दिखाना / चलाना के लिए चाहते हैं ,तो <audio> टैग का उपयोग करना चाहते हैं। यहाँ एक वाक्यविन्यास है:

<audio controls>
  <source 
src="Audio_File_Pathtype="Audio_File_Format">
</audio>

उदाहरण:

<audio controls>
  <source 
src="fluteTune.mp3type="audio/mpeg">
</audio>

आप ऑडियो के लिए नियंत्रण दिखाने के लिए control attribute का उपयोग कर सकते हैं। ऑडियो अपने आप चालू करने के लिए आप autoplay attribute का उपयोग कर सकते हैं।

उदाहरण:

<audio controls autoplay>
  <source 
src="fluteTune.mp3type="audio/mpeg">
</audio>

HTML Videos

यदि आप एक वीडियो फ़ाइल दिखाना / चलाना के लिए चाहते हैं ,तो <video> टैग का उपयोग करना चाहते हैं। यहाँ एक वाक्यविन्यास है:

<video controls>
  <source 
src="Video_File_Pathtype="Video_File_Format">
</video>

उदाहरण:

<video height="400px" width="600pxcontrols>
  <source 
src="shortfilm.mp4type="video/mp4">
</video>

आप वीडियो के लिए नियंत्रण दिखाने के लिए control attribute का उपयोग कर सकते हैं। वीडियो अपने आप चालू करने के लिए आप autoplay attribute का उपयोग कर सकते हैं।

HTML Code:

<!DOCTYPE html>

<html>

                             <head>

                                                <title> HTML Media </title>

                                                <meta charset="UTF-8">

                             </head>

                             <body>

                                                <h1>HTML Media</h1>

                                                <h3> ऑडियो नियंत्रण के साथ</h3>

                                                <audio controls>
                                                            <source 
src="fluteTune.mp3type="audio/mpeg">
                                                </audio>

                                                <h3> वीडियो नियंत्रण के साथ </h3>

                                                <video height="400px" width="600pxcontrols>
                                                            <source 
src="shortfilm.mp4type="video/mp4">
                                                </video>

                        </body>

</html>

Output :

Common Video Format:

Format

File

Description

MPEG

.mpg
.mpeg

MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4).

AVI

.avi

AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.

WMV

.wmv

WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.

QuickTime

.mov

QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4)

RealVideo

.rm
.ram

RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers.

Flash

.swf
.flv

Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.

Ogg

.ogg

Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.

WebM

.webm

WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.

MPEG-4
or MP4

.mp4

MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube. 

 

Common Audio Format :

Format

File

Description

MIDI

.mid
.midi

MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers.

RealAudio

.rm
.ram

RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers.

WMA

.wma

WMA (Windows Media Audio). Developed by Microsoft. Commonly used in music players. Plays well on Windows computers, but not in web browsers.

AAC

.aac

AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers.

WAV

.wav

WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5.

Ogg

.ogg

Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.

MP3

.mp3

MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.

MP4

.mp4

MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video format on the internet. This leads to automatic support for MP4 audio by all browsers.

 

Comments


ravi ( Date :12 Feb,2018) :
Good Tutorial kyuki ye hindi or english dono me h