*Video Tag ۽ Source Tag (HTML)* Web Development Course Class 18
*1. Video Tag (`<video>`)*
*انگريزي:*
The `<video>` tag is used to embed video files in an HTML document. It allows playing videos directly in the browser without using external plugins.
*سنڌي:*
`<video>` ٽيگ HTML ۾ وڊيو داخل ڪرڻ لاءِ استعمال ڪيو ويندو آهي. ان سان برائوزر اندر وڊيو کي بغير ڪنهن اضافي پلگ ان جي هلائي سگهون ٿا.
*Example:*
“`html
<video controls width=”500″>
<source src=”video.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>
“`
—
*2. Source Tag (`<source>`)* Web Development Course Class 18
*انگريزي:*
The `<source>` tag is used inside the `<video>` tag to specify multiple video formats, ensuring compatibility across different browsers.
*سنڌي:*
`<source>` ٽيگ `<video>` جي اندر استعمال ٿيندو آهي، ته جيئن مختلف برائوزرن سان مطابقت لاءِ وڊيو جا مختلف فارميٽ مهيا ڪري سگهجن.
*Example:*
“`html
<video controls width=”500″>
<source src=”video.mp4″ type=”video/mp4″>
<source src=”video.webm” type=”video/webm”>
Your browser does not support the video tag.
</video>
“`
—
*3. Attributes of Video Tag* Web Development Course Class 18
*انگريزي:*
Attributes define the behavior and appearance of the `<video>` tag.
*سنڌي:*
اٽريبيوٽس (`attributes`) وڊيو ٽيگ جي خاصيتن ۽ ڏسڻ جو انداز مقرر ڪن ٿا.
*Important Attributes of `<video>`*
1. *controls* – Displays video controls like play, pause, volume.
*مثال:* `<video controls>`
2. *autoplay* – Starts playing the video automatically.
*مثال:* `<video autoplay>`
3. *loop* – Repeats the video continuously.
*مثال:* `<video loop>`
4. *muted* – Starts video with no sound.
*مثال:* `<video muted>`
5. *poster* – Displays an image before the video starts.
*مثال:* `<video poster=”thumbnail.jpg”>`
6. *width / height* – Sets video dimensions.
*مثال:* `<video width=”600″ height=”400″>`
—
*Final Example (Complete Video Player in HTML)* Web Development Course Class 18
“`html
<video controls width=”600″ height=”400″ poster=”thumbnail.jpg”>
<source src=”video.mp4″ type=”video/mp4″>
<source src=”video.webm” type=”video/webm”>
Your browser does not support the video tag.
</video>
“`
*وضاحت:*
– *controls* سان پلے، پاز ۽ واليم جا بٽڻ نظر ايندا.
– *poster* وڊيو شروع ٿيڻ کان اڳ تصوير ڏيکاريندو.
– *source* ٽيگ مختلف وڊيو فارميٽ مهيا ڪندو، جيئن هر برائوزر تي ڪم ڪري.
*Bonus Tip for Students:*
– *MP4* فارميٽ سڀ کان وڌيڪ سپورٽ ٿيل آهي.
– *WebM ۽ Ogg* بهتر compression سان هلڪو وزن وڊيو مهيا ڪن ٿا.
– وڊيو سائيز گهٽ رکڻ لاءِ *compress* ڪرڻ سٺو هوندو.
*Audio Tag ۽ Source Tag (HTML)*
*1. Audio Tag (`<audio>`)*
*انگريزي:*
The `<audio>` tag is used to embed audio files in an HTML document. It allows playing sound files directly in the browser without additional plugins.
*سنڌي:*
`<audio>` ٽيگ HTML ۾ آڊيو شامل ڪرڻ لاءِ استعمال ٿيندو آهي، جيڪو بغير ڪنهن اضافي پلگ ان جي برائوزر ۾ سڌو آڊيو هلائڻ جي اجازت ڏئي ٿو.
*Example:*
“`html
<audio controls>
<source src=”audio.mp3″ type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>
“`
—
*2. Source Tag (`<source>`)* Web Development Course Class 18
*انگريزي:*
The `<source>` tag is used inside the `<audio>` tag to specify multiple audio formats, ensuring compatibility across different browsers.
*سنڌي:*
`<source>` ٽيگ `<audio>` جي اندر استعمال ٿئي ٿو ته جيئن مختلف برائوزرن لاءِ مختلف آڊيو فارميٽ مهيا ڪري سگهجن.
*Example:*
“`html
<audio controls>
<source src=”audio.mp3″ type=”audio/mpeg”>
<source src=”audio.ogg” type=”audio/ogg”>
Your browser does not support the audio tag.
</audio>
“`
—
*3. Attributes of Audio Tag*
*انگريزي:*
Attributes define the behavior and appearance of the `<audio>` tag.
*سنڌي:*
اٽريبيوٽس (`attributes`) آڊيو ٽيگ جي خاصيتن ۽ ان جي هلڻ جو طريقو مقرر ڪن ٿا.
*Important Attributes of `<audio>`*
1. *controls* – Displays audio controls like play, pause, volume.
*مثال:* `<audio controls>`
2. *autoplay* – Starts playing the audio automatically.
*مثال:* `<audio autoplay>`
3. *loop* – Repeats the audio continuously.
*مثال:* `<audio loop>`
4. *muted* – Starts audio with no sound.
*مثال:* `<audio muted>`
5. *preload* – Defines how the audio file should be loaded.
– *”auto”* (default) – Loads the full audio file.
– *”metadata”* – Loads only basic info (duration, size).
– *”none”* – Doesn’t load until played.
*مثال:* `<audio preload=”auto”>`
—
*Final Example (Complete Audio Player in HTML)*
“`html
<audio controls autoplay loop>
<source src=”music.mp3″ type=”audio/mpeg”>
<source src=”music.ogg” type=”audio/ogg”>
Your browser does not support the audio tag.
</audio>
“`
*وضاحت:*
– *controls* سان پلے، پاز ۽ واليم جا بٽڻ نظر ايندا.
– *autoplay* آڊيو کي پاڻمرادو هلائڻ شروع ڪندو.
– *loop* آڊيو کي بار بار هلائيندو.
– *source* ٽيگ مختلف آڊيو فارميٽ مهيا ڪندو، جيئن هر برائوزر تي ڪم ڪري.
*Bonus Tip for Students:*
– *MP3* سڀ کان وڌيڪ سپورٽ ٿيل آڊيو فارميٽ آهي.
– *Ogg ۽ WAV* ڪجهه برائوزرن تي بهتر ڪم ڪن ٿا.
– *preload=”metadata”* اختيار ڪرڻ سان ويب سائيٽ تيز لوڊ ٿيندي.
