HTML

Part 11 عناصر ميديا متعددة – FSWD- HTML

ahmedمنذ 4 أيام

0 8 2 دقائق

أولًا: إدراج فيديو باستخدام `<video>`

تُستخدم وسم <video> لإدراج فيديو في صفحة HTML. هذا الوسم يسمح للمستخدم بمشاهدة الفيديو مباشرة على الموقع دون الحاجة إلى برنامج إضافي مثل مشغل الفيديو.

✅ السمات المهمة لـ `<video>`:

src: يُحدد مصدر الفيديو.
controls: يعرض أدوات التحكم في الفيديو مثل التشغيل، الإيقاف، مستوى الصوت، إلخ.
autoplay: يشغل الفيديو تلقائيًا عند تحميل الصفحة.
loop: يعيد تشغيل الفيديو عند انتهائه.
muted: يجعل الفيديو يعمل بدون صوت.
poster: صورة تعرض قبل تحميل الفيديو (مثل صورة المعاينة).

<video width="640" height="360" controls autoplay loop muted poster="poster-image.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  متصفحك لا يدعم تشغيل الفيديو.
</video>

في المثال:
- تم استخدام وسم <video> لعرض فيديو مع عرض أدوات التحكم.
- استخدمنا poster="poster-image.jpg" لإظهار صورة معاينة قبل تشغيل الفيديو.
- قدمنا source لدعم أنواع ملفات الفيديو المختلفة (MP4 و OGG).
- تم تفعيل autoplay و loop لجعل الفيديو يعمل تلقائيًا ويتكرر بعد انتهائه.
- تم تفعيل muted لجعل الفيديو بدون صوت.

🔸 ثانيًا: إدراج صوت باستخدام `<audio>`

يُستخدم وسم <audio> لإدراج ملفات صوتية في صفحة HTML. مثل الفيديو، يسمح للمستخدم بتشغيل الصوت مباشرة على الصفحة دون الحاجة إلى مشغل صوت خارجي.

✅ السمات المهمة لـ `<audio>`:

src: يُحدد مصدر ملف الصوت.
controls: يعرض أدوات التحكم للصوت مثل التشغيل، الإيقاف، مستوى الصوت.
autoplay: يشغل الصوت تلقائيًا عند تحميل الصفحة.
loop: يعيد تشغيل الصوت عند انتهائه.

<audio controls autoplay loop>
  <source src="song.mp3" type="audio/mp3">
  <source src="song.ogg" type="audio/ogg">
  متصفحك لا يدعم تشغيل الصوت.
</audio>

في المثال:
- تم استخدام وسم <audio> لعرض مشغل الصوت مع أدوات التحكم.
- قدمنا source لدعم أنواع ملفات الصوت المختلفة (MP3 و OGG).
- تم تفعيل autoplay لجعل الصوت يعمل تلقائيًا عند تحميل الصفحة.
- تم تفعيل loop لجعل الصوت يتكرر بعد انتهائه.

🔸 ثالثًا: إدراج iframe لعرض محتوى من مواقع أخرى (مثل يوتيوب)

يُستخدم وسم <iframe> لإدراج محتوى من موقع آخر داخل صفحتك. يُستخدم بشكل رئيسي لعرض فيديوهات من يوتيوب أو خرائط جوجل أو محتوى من مواقع أخرى.

✅ السمات المهمة لـ `<iframe>`:

src: يُحدد رابط المصدر الذي تريد عرضه داخل الـ iframe.
width و height: تحدد أبعاد العنصر المضمن.
frameborder: تُستخدم لتحديد ما إذا كان سيكون هناك إطار حول الـ iframe أم لا (غالبًا يُستخدم frameborder="0" لجعل الإطار غير مرئي).
allowfullscreen: يسمح بعرض المحتوى بملء الشاشة.
title: يُحدد عنوان الـ iframe لتحسين الوصولية

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen title="فيديو يوتيوب"></iframe>

في المثال:

تم استخدام وسم <iframe> لعرض فيديو من يوتيوب.
تم تحديد src كعنوان الفيديو على يوتيوب.
تم ضبط الأبعاد بـ width="560" و height="315" ليتناسب مع العرض في الصفحة.
تم تفعيل allowfullscreen للسماح بعرض الفيديو في وضع ملء الشاشة.
تم وضع frameborder="0" لإزالة الإطار حول الـ iframe.

🧩 مثال كامل على الميديا المتعددة في صفحة HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مثال على الميديا المتعددة</title>
</head>
<body>

  <h1>إدراج ميديا متعددة في صفحة HTML</h1>

  <section>
    <h2>الفيديو:</h2>
    <video width="640" height="360" controls autoplay loop muted poster="video-poster.jpg">
      <source src="video.mp4" type="video/mp4">
      <source src="video.ogg" type="video/ogg">
      متصفحك لا يدعم تشغيل الفيديو.
    </video>
  </section>

  <section>
    <h2>الصوت:</h2>
    <audio controls autoplay loop>
      <source src="audio.mp3" type="audio/mp3">
      <source src="audio.ogg" type="audio/ogg">
      متصفحك لا يدعم تشغيل الصوت.
    </audio>
  </section>

  <section>
    <h2>إدراج فيديو من يوتيوب:</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen title="فيديو يوتيوب"></iframe>
  </section>

</body>
</html>

💡 ملخص:

العنصر	الوصف
`<video>`	لإدراج فيديو داخل الصفحة مع أدوات التحكم
سمات الفيديو	`src`, `controls`, `autoplay`, `loop`, `muted`, `poster`
`<audio>`	لإدراج صوت داخل الصفحة مع أدوات التحكم
سمات الصوت	`src`, `controls`, `autoplay`, `loop`
`<iframe>`	لإدراج محتوى من مواقع أخرى مثل يوتيوب
سمات iframe	`src`, `width`, `height`, `frameborder`, `allowfullscreen`