EZ

EZNotes

🎬 Practical 81: HTML code for adding video to a webpage

Learn how to embed videos in HTML using the <video> tag with attributes like src, controls, autoplay, loop, and poster.

🎯 Aim

To create an HTML webpage that demonstrates how to embed videos using the <video> tag with attributes like src, controls, autoplay, loop, muted, poster, and width/height.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • A video file (MP4, WebM, or OGG) or use an online video URL

📖 Introduction

The <video> tag is used to embed video content in HTML. Key attributes:

  • src — Specifies the video file path or URL.
  • controls — Displays play/pause, volume, and timeline controls.
  • autoplay — Starts playing automatically when the page loads.
  • loop — Repeats the video indefinitely.
  • muted — Mutes the audio by default.
  • poster — Displays a thumbnail image before the video plays.
  • width and height — Controls the video dimensions.
💡 Tip: Use autoplay with muted to comply with browser policies. Most modern browsers only allow autoplay for muted videos. Always include controls for better user experience.

📊 Preview of the Output

🎬 Video Embedding Demo

🎞️ Sample Video Player
🎥
Sample Video
MP4 | 720p | 30fps
▶ Play ⏸ Pause 🔊 Volume ⏹ Stop
▶▶▶▶▶▶▶▶▶▶◀◀◀◀◀◀◀◀◀◀
📐 Video Attributes
🎯 src Video file path
🎮 controls Playback controls
▶️ autoplay Auto-start playback
🔄 loop Repeat video
🔇 muted Mute audio
🖼️ poster Thumbnail image

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following simplified HTML code:
<!-- Practical 81: Adding Video to a Webpage --> <html> <head> <title>Video Embedding Demo</title> <style> body { font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } .video-container { margin: 15px 0; background: #1a2a3a; border-radius: 8px; padding: 10px; text-align: center; } .video-container video { max-width: 100%; border-radius: 6px; } .note { font-size: 0.85em; color: #888; margin-top: 4px; } </style> </head> <body> <h1>🎬 Adding Video to a Webpage</h1> <!-- ===== BASIC VIDEO WITH CONTROLS ===== --> <h2>📹 Basic Video with Controls</h2> <div class="video-container"> <video src="sample.mp4" controls width="100%" height="auto"> <p>Your browser does not support the video tag.</p> </video> </div> <!-- ===== VIDEO WITH POSTER IMAGE ===== --> <h2>🖼️ Video with Poster Image</h2> <div class="video-container"> <video src="sample.mp4" controls poster="thumbnail.jpg" width="100%" height="auto"> <p>Your browser does not support the video tag.</p> </video> <p class="note">Poster image shown before playback</p> </div> <!-- ===== VIDEO WITH AUTOPLAY AND MUTED ===== --> <h2>▶️ Autoplay (Muted)</h2> <div class="video-container"> <video src="sample.mp4" controls autoplay muted width="100%" height="auto"> <p>Your browser does not support the video tag.</p> </video> <p class="note">Video plays automatically (muted as per browser policy)</p> </div> <!-- ===== VIDEO WITH LOOP ===== --> <h2>🔄 Video with Loop</h2> <div class="video-container"> <video src="sample.mp4" controls loop width="100%" height="auto"> <p>Your browser does not support the video tag.</p> </video> <p class="note">Video repeats automatically when it ends</p> </div> <!-- ===== VIDEO WITH MULTIPLE SOURCES ===== --> <h2>📁 Multiple Sources (Fallback)</h2> <div class="video-container"> <video controls width="100%" height="auto"> <source src="sample.mp4" type="video/mp4"> <source src="sample.webm" type="video/webm"> <source src="sample.ogg" type="video/ogg"> <p>Your browser does not support the video tag.</p> </video> <p class="note">Browser chooses first supported format (MP4, WebM, or OGG)</p> </div> <!-- ===== EMBEDDED YOUTUBE VIDEO ===== --> <h2>📺 Embedded YouTube Video</h2> <div class="video-container"> <iframe width="100%" height="400" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen> </iframe> <p class="note">Embedding YouTube videos using <iframe></p> </div> </body> </html>

Step 2: Save the File

  1. Go to File → Save As… (or press Ctrl+Shift+S).
  2. Choose a location (e.g., Desktop).
  3. Name the file: "video_demo.html" or "practical81.html".
  4. In "Save as type", select All types (*.*).
  5. Click Save.

Step 3: Add Video Files

  1. Place your video file (e.g., "sample.mp4") in the same folder as your HTML file.
  2. If using a poster image, place "thumbnail.jpg" in the same folder.
  3. Alternatively, use online video URLs or YouTube embed code.

Step 4: Open in Browser

  1. Navigate to the folder where you saved the file.
  2. Double‑click the video_demo.html file.
  3. It will open in your default web browser.
  4. You will see the video player with controls.

📊 <video> Tag Attributes

Attribute Purpose Example
src Video file path or URL src="video.mp4"
controls Shows playback controls controls
autoplay Starts playing automatically autoplay
loop Repeats video loop
muted Mutes audio muted
poster Thumbnail image before playback poster="thumb.jpg"
width Video width (pixels or percentage) width="640"
height Video height (pixels or percentage) height="360"
preload Preload options (auto, metadata, none) preload="auto"

📊 Supported Video Formats

Format Extension MIME Type Browser Support
MP4 .mp4 video/mp4 ✅ All modern browsers
WebM .webm video/webm ✅ Chrome, Firefox, Edge, Opera
OGG .ogv video/ogg ✅ Firefox, Chrome, Opera
AVI .avi video/x-msvideo ⚠️ Limited support
MOV .mov video/quicktime ⚠️ Safari, limited

📊 Using Multiple <source> Tags

<!-- Multiple sources for cross-browser compatibility --> <video controls width="100%"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <p>Your browser does not support HTML5 video.</p> </video>
💡 Tip: Always provide multiple video formats (MP4, WebM, OGG) to ensure compatibility across all browsers. The browser will use the first format it supports.

📊 Embedding YouTube Videos

<!-- Embedding a YouTube video --> <!-- Get the embed URL from YouTube: Share → Embed --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> <!-- YouTube with autoplay (muted) --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" frameborder="0" allowfullscreen> </iframe>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Missing controls attribute User can't control playback Always add controls
Using autoplay without muted Auto-play blocked by browsers Use autoplay muted
Wrong file path Video won't load Check file path and extension
Only one video format Limited browser support Provide MP4, WebM, and OGG
Forgetting </video> closing tag Invalid HTML Always close with </video>

📊 Observations

  • <video> is the standard tag for embedding videos in HTML.
  • controls is essential for user interaction (play, pause, volume).
  • autoplay requires muted in most modern browsers.
  • poster provides a thumbnail before the video loads or plays.
  • Using multiple <source> tags ensures cross-browser compatibility.
  • YouTube and other platforms can be embedded using <iframe>.
  • Always include a fallback message for browsers that don't support the <video> tag.

✅ Result

You have successfully:

  • Created an HTML webpage that embeds videos using the <video> tag.
  • Used attributes like controls, autoplay, loop, muted, and poster.
  • Used multiple <source> tags for format fallback.
  • Embedded a YouTube video using <iframe>.
  • Viewed the video player in a browser.
📌 Important: Always use controls for better user experience. Use autoplay muted to comply with browser policies. Provide multiple video formats (MP4, WebM, OGG) for maximum compatibility. Include a fallback message for older browsers.
💡 Next Steps: Try adding custom video controls using JavaScript. Experiment with CSS styling for the video player. Create a video gallery with multiple videos. Learn about video events (play, pause, ended) using JavaScript!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو <video> ٹیگ کے ساتھ src، controls، autoplay، loop، muted، poster، اور width/height جیسی صفات کا استعمال کرتے ہوئے ویڈیوز ایمبیڈ کرنے کا طریقہ ظاہر کرتا ہے۔

🛠️ آپ کو کیا چاہیے

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر
  • ایک ویڈیو فائل (MP4، WebM، یا OGG) یا آن لائن ویڈیو URL

📖 تعارف

<video> ٹیگ HTML میں ویڈیو مواد ایمبیڈ کرنے کے لیے استعمال ہوتا ہے۔ اہم صفات:

  • src — ویڈیو فائل کا راستہ یا URL مخصوص کرتا ہے۔
  • controls — پلے/پاز، والیوم، اور ٹائم لائن کنٹرولز ظاہر کرتا ہے۔
  • autoplay — صفحہ لوڈ ہوتے ہی خود بخود چلنا شروع کرتا ہے۔
  • loop — ویڈیو کو لامحدود طور پر دہراتا ہے۔
  • muted — آڈیو کو ڈیفالٹ طور پر خاموش کرتا ہے۔
  • poster — ویڈیو چلنے سے پہلے ایک تھمب نیل تصویر ظاہر کرتا ہے۔
  • width اور height — ویڈیو کے طول و عرض کو کنٹرول کرتے ہیں۔
💡 مشورہ: براؤزر پالیسیوں کی تعمیل کے لیے autoplay کو muted کے ساتھ استعمال کریں۔ زیادہ تر جدید براؤزر صرف خاموش ویڈیوز کے لیے آٹو پلے کی اجازت دیتے ہیں۔ بہتر صارف تجربے کے لیے ہمیشہ controls شامل کریں۔

📊 آؤٹ پٹ کا پیش منظر

🎬 ویڈیو ایمبیڈنگ کا ڈیمو

🎞️ نمونہ ویڈیو پلیئر
🎥
نمونہ ویڈیو
MP4 | 720p | 30fps
▶ پلے ⏸ پاز 🔊 والیوم ⏹ روکیں
▶▶▶▶▶▶▶▶▶▶◀◀◀◀◀◀◀◀◀◀
📐 ویڈیو کی صفات
🎯 src ویڈیو فائل کا راستہ
🎮 controls پلے بیک کنٹرولز
▶️ autoplay خود بخود چلنا
🔄 loop ویڈیو دہرائیں
🔇 muted آڈیو خاموش کریں
🖼️ poster تھمب نیل تصویر

📝 مرحلہ وار: HTML صفحہ بنانا

پہلا قدم: Notepad++ کھولیں اور کوڈ لکھیں

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 81: Adding Video to a Webpage --> <html> <head> <title>Video Embedding Demo</title> <style> body { font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } .video-container { margin: 15px 0; background: #1a2a3a; border-radius: 8px; padding: 10px; text-align: center; } .video-container video { max-width: 100%; border-radius: 6px; } .note { font-size: 0.85em; color: #888; margin-top: 4px; } </style> </head> <body> <h1>🎬 ویب صفحے میں ویڈیو شامل کرنا</h1> <!-- ===== کنٹرولز کے ساتھ بنیادی ویڈیو ===== --> <h2>📹 کنٹرولز کے ساتھ بنیادی ویڈیو</h2> <div class="video-container"> <video src="sample.mp4" controls width="100%" height="auto"> <p>آپ کا براؤزر ویڈیو ٹیگ کو سپورٹ نہیں کرتا۔</p> </video> </div> <!-- ===== پوسٹر امیج کے ساتھ ویڈیو ===== --> <h2>🖼️ پوسٹر امیج کے ساتھ ویڈیو</h2> <div class="video-container"> <video src="sample.mp4" controls poster="thumbnail.jpg" width="100%" height="auto"> <p>آپ کا براؤزر ویڈیو ٹیگ کو سپورٹ نہیں کرتا۔</p> </video> <p class="note">پلے بیک سے پہلے پوسٹر امیج ظاہر ہوتی ہے</p> </div> <!-- ===== آٹو پلے اور خاموش کے ساتھ ویڈیو ===== --> <h2>▶️ آٹو پلے (خاموش)</h2> <div class="video-container"> <video src="sample.mp4" controls autoplay muted width="100%" height="auto"> <p>آپ کا براؤزر ویڈیو ٹیگ کو سپورٹ نہیں کرتا۔</p> </video> <p class="note">ویڈیو خود بخود چلتی ہے (براؤزر پالیسی کے مطابق خاموش)</p> </div> <!-- ===== لوپ کے ساتھ ویڈیو ===== --> <h2>🔄 لوپ کے ساتھ ویڈیو</h2> <div class="video-container"> <video src="sample.mp4" controls loop width="100%" height="auto"> <p>آپ کا براؤزر ویڈیو ٹیگ کو سپورٹ نہیں کرتا۔</p> </video> <p class="note">ویڈیو ختم ہونے پر خود بخود دہرائی جاتی ہے</p> </div> <!-- ===== متعدد ذرائع کے ساتھ ویڈیو ===== --> <h2>📁 متعدد ذرائع (فال بیک)</h2> <div class="video-container"> <video controls width="100%" height="auto"> <source src="sample.mp4" type="video/mp4"> <source src="sample.webm" type="video/webm"> <source src="sample.ogg" type="video/ogg"> <p>آپ کا براؤزر ویڈیو ٹیگ کو سپورٹ نہیں کرتا۔</p> </video> <p class="note">براؤزر پہلی سپورٹ شدہ شکل کا انتخاب کرتا ہے (MP4، WebM، یا OGG)</p> </div> <!-- ===== ایمبیڈڈ یوٹیوب ویڈیو ===== --> <h2>📺 ایمبیڈڈ یوٹیوب ویڈیو</h2> <div class="video-container"> <iframe width="100%" height="400" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen> </iframe> <p class="note"><iframe> کا استعمال کرتے ہوئے یوٹیوب ویڈیوز ایمبیڈ کرنا</p> </div> </body> </html>

دوسرا قدم: فائل محفوظ کریں

  1. File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
  2. ایک مقام منتخب کریں (مثلاً Desktop)۔
  3. فائل کا نام رکھیں: "video_demo.html" یا "practical81.html"۔
  4. "Save as type" میں All types (*.*) منتخب کریں۔
  5. Save پر کلک کریں۔

تیسرا قدم: ویڈیو فائلیں شامل کریں

  1. اپنی ویڈیو فائل (مثلاً "sample.mp4") کو اپنی HTML فائل والے فولڈر میں رکھیں۔
  2. اگر پوسٹر امیج استعمال کر رہے ہیں تو "thumbnail.jpg" کو اسی فولڈر میں رکھیں۔
  3. متبادل طور پر، آن لائن ویڈیو URLs یا یوٹیوب ایمبیڈ کوڈ استعمال کریں۔

چوتھا قدم: براؤزر میں کھولیں

  1. اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
  2. video_demo.html فائل پر ڈبل‑کلک کریں۔
  3. یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
  4. آپ کو کنٹرولز کے ساتھ ویڈیو پلیئر نظر آئے گا۔

📊 <video> ٹیگ کی صفات

صفت مقصد مثال
src ویڈیو فائل کا راستہ یا URL src="video.mp4"
controls پلے بیک کنٹرولز ظاہر کرتا ہے controls
autoplay خود بخود چلنا شروع کرتا ہے autoplay
loop ویڈیو دہراتا ہے loop
muted آڈیو خاموش کرتا ہے muted
poster پلے بیک سے پہلے تھمب نیل تصویر poster="thumb.jpg"
width ویڈیو کی چوڑائی (پکسلز یا فیصد) width="640"
height ویڈیو کی اونچائی (پکسلز یا فیصد) height="360"
preload پری لوڈ کے اختیارات (auto، metadata، none) preload="auto"

📊 سپورٹ شدہ ویڈیو فارمیٹس

فارمیٹ ایکسٹینشن MIME قسم براؤزر سپورٹ
MP4 .mp4 video/mp4 ✅ تمام جدید براؤزرز
WebM .webm video/webm ✅ کروم، فائر فاکس، ایج، اوپیرا
OGG .ogv video/ogg ✅ فائر فاکس، کروم، اوپیرا
AVI .avi video/x-msvideo ⚠️ محدود سپورٹ
MOV .mov video/quicktime ⚠️ سفاری، محدود

📊 متعدد <source> ٹیگز کا استعمال

<!-- کراس براؤزر مطابقت کے لیے متعدد ذرائع --> <video controls width="100%"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <p>آپ کا براؤزر HTML5 ویڈیو کو سپورٹ نہیں کرتا۔</p> </video>
💡 مشورہ: تمام براؤزرز میں مطابقت کو یقینی بنانے کے لیے ہمیشہ متعدد ویڈیو فارمیٹس (MP4، WebM، OGG) فراہم کریں۔ براؤزر پہلی سپورٹ شدہ شکل کا استعمال کرے گا۔

📊 یوٹیوب ویڈیوز ایمبیڈ کرنا

<!-- یوٹیوب ویڈیو ایمبیڈ کرنا --> <!-- یوٹیوب سے ایمبیڈ URL حاصل کریں: شیئر → ایمبیڈ --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> <!-- آٹو پلے کے ساتھ یوٹیوب (خاموش) --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" frameborder="0" allowfullscreen> </iframe>

📊 عام غلطیاں جن سے بچنا ہے

غلطی یہ کیوں غلط ہے صحیح طریقہ
controls صفت غائب صارف پلے بیک کو کنٹرول نہیں کر سکتا ہمیشہ controls شامل کریں
muted کے بغیر autoplay کا استعمال براؤزرز کی طرف سے آٹو پلے بلاک autoplay muted استعمال کریں
غلط فائل پاتھ ویڈیو لوڈ نہیں ہوگی فائل پاتھ اور ایکسٹینشن چیک کریں
صرف ایک ویڈیو فارمیٹ محدود براؤزر سپورٹ MP4، WebM، اور OGG فراہم کریں
</video> بند کرنے والا ٹیگ بھول جانا غلط HTML ہمیشہ </video> کے ساتھ بند کریں

📊 مشاہدات

  • <video> HTML میں ویڈیوز ایمبیڈ کرنے کا معیاری ٹیگ ہے۔
  • controls صارف تعامل کے لیے ضروری ہے (پلے، پاز، والیوم)۔
  • autoplay کو زیادہ تر جدید براؤزرز میں muted کی ضرورت ہوتی ہے۔
  • poster ویڈیو لوڈ ہونے یا چلنے سے پہلے ایک تھمب نیل فراہم کرتا ہے۔
  • متعدد <source> ٹیگز کا استعمال کراس براؤزر مطابقت کو یقینی بناتا ہے۔
  • یوٹیوب اور دیگر پلیٹ فارمز کو <iframe> کا استعمال کرتے ہوئے ایمبیڈ کیا جا سکتا ہے۔
  • ان براؤزرز کے لیے ہمیشہ فال بیک پیغام شامل کریں جو <video> ٹیگ کو سپورٹ نہیں کرتے۔

✅ نتیجہ

آپ نے کامیابی سے:

  • <video> ٹیگ کا استعمال کرتے ہوئے ویڈیوز ایمبیڈ کرنے والا ایک HTML ویب صفحہ بنایا۔
  • controls، autoplay، loop، muted، اور poster جیسی صفات کا استعمال کیا۔
  • فارمیٹ فال بیک کے لیے متعدد <source> ٹیگز کا استعمال کیا۔
  • <iframe> کا استعمال کرتے ہوئے یوٹیوب ویڈیو ایمبیڈ کی۔
  • ویڈیو پلیئر کو براؤزر میں دیکھا۔
📌 اہم: بہتر صارف تجربے کے لیے ہمیشہ controls استعمال کریں۔ براؤزر پالیسیوں کی تعمیل کے لیے autoplay muted استعمال کریں۔ زیادہ سے زیادہ مطابقت کے لیے متعدد ویڈیو فارمیٹس (MP4، WebM، OGG) فراہم کریں۔ پرانے براؤزرز کے لیے فال بیک پیغام شامل کریں۔
💡 اگلے اقدامات: جاوا اسکرپٹ کا استعمال کرتے ہوئے حسب ضرورت ویڈیو کنٹرولز شامل کرنے کی کوشش کریں۔ ویڈیو پلیئر کے لیے CSS اسٹائلنگ کے ساتھ تجربہ کریں۔ متعدد ویڈیوز کے ساتھ ویڈیو گیلری بنائیں۔ جاوا اسکرپٹ کا استعمال کرتے ہوئے ویڈیو ایونٹس (پلے، پاز، ختم) کے بارے میں جانیں!
⬅ Back to Practical Notebooks