الصوت و الفيديو والفريم

في هذا الدرس سنتعلم كيف نضيف الصوت والفيديو من جهازنا أو من الإنترنت إلى صفحات الانترنت، وكيف نضع أي موقع آخر داخل موقعنا باستخدام الـ iframe (مثل يوتيوب، خرائط جوجل، تويتر، واتساب، إلخ).

تخيّل أن زائر موقعك يسمع صوتك، يشاهد فيديو درسك، أو يرى موقعك على خريطة جوجل…
كل هذا بثلاث وسوم فقط: <audio>، <video>، <iframe>

وسم الصوت <audio> –

صوت من جهازك (الطريقة الصحيحة)

لاحظ هنا بالكود التالي: الملف الذي اسمه my-voice.mp3 يجب أن يكون موجودا عندنا بالجهاز وأن يكون هذا الملف موجود في مجلد اسمه audio وهذا المجلد يجب أن يكون بجانب الصفحة ( أي بجانب ملف الصفحة الالكترونية الذي امتداده .html ) وإلا فلن يشتغل معك ملف الصوت بالموقع الالكتروني.

<audio controls>
  <source src="audio/my-voice.mp3" type="audio/mp3">
  <source src="audio/my-voice.ogg" type="audio/ogg">
  المتصفح لا يدعم الصوت
</audio>

أعيد واكرر على نقطة مهمة نحن هنا افترضنا ان ملف الصوت موجود في مجلد اسمه audio فعلى سبيل المثال لو كان عندك مجلد اسمه my وبداخله ملف الصوت فيجب ان تضع my/my-voice.mp3 داخل قيمة src أعلاه

شرح كل سمة في وسم <audio>:

<audio> ← الوسم الرئيسي لتشغيل الصوت
controls ← يظهر شريط التحكم (تشغيل، إيقاف، الصوت، الوقت)
<source> ← نحدد فيه ملف الصوت (يمكن أكثر من صيغة)
src="" ← مسار الملف الصوتي
type="" ← نوع الملف (mp3, ogg, wav) – مهم للمتصفحات القديمة
autoplay ← يشغّل الصوت تلقائيًا عند تحميل الصفحة
loop ← يعيد الصوت من الأول عند الانتهاء
muted ← الصوت مكتوم (ضروري مع autoplay في كل المتصفحات الحديثة)
preload="auto|metadata|none" ← كم يحمل المتصفح من الصوت قبل الضغط على تشغيل

صوت تلقائي + حلقة (للخلفيات الموسيقية)

<audio autoplay loop muted>
  <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>

ملاحظة مهمة: كل المتصفحات (كروم، سفاري، فايرفوكس) تمنع التشغيل التلقائي بالصوت إلا إذا كان muted أولًا.

وسم الفيديو <video>

فيديو من جهازك (كامل التحكم)

أيضا هنا ملاحظة مهمة قبل أن تطلع على الكود التالي ، ألا وهي قيمة src وهي بمعنى اخر أين يوجد هذا الملف ؟ سواء ملف صورة أو ملف صوت أو ملف فيديو ، فهنا افترضنا ان لدينا مجلد اسمه video وبداخله ملف الفيديو intro.mp4 فيجب وضع اسم المجلد واسم الملف بامتداد الصحيح وإلا فلن يستطيع المتصفح التعرف أو استعراض الملف سواء كان ملف صورة أو ملف صوت أو ملف فيديو

<video controls width="100%" poster="images/thumbnail.jpg">
  <source src="video/intro.mp4" type="video/mp4">
  <source src="video/intro.webm" type="video/webm">
  متصفحك لا يدعم الفيديو
</video>

شرح كل سمة في وسم <video>:

<video> ← الوسم الأساسي للفيديو
controls ← شريط التحكم الكامل
width / height ← حجم الفيديو (استخدم width="100%" للتمدد)
poster="" ← صورة تظهر قبل التشغيل (مثل غلاف الفيديو)
autoplay ← يشتغل تلقائيًا
loop ← يكرر الفيديو إلى ما لا نهاية
muted ← صوت مكتوم (ضروري مع autoplay)
playsinline ← مهم جدًا للجوال (يمنع الفيديو من الفتح بملء الشاشة تلقائيًا)
preload ← كم يحمل من الفيديو مسبقًا

فيديو -Mobile (مثل تيك توك وإنستقرام)

<video autoplay loop muted playsinline class="w-full rounded-2xl">
  <source src="https://cdn.coverr.co/videos/coverr-city-traffic-4372/1080p.mp4">
</video>

وسم الاطار الداخلي <iframe>

الـ iframe يعني "إطار داخلي"، يعني تضع موقع كامل داخل موقعك! يوتيوب، خرائط، واتساب، تويتر، تيك توك… كلهم يعطونك كود iframe جاهز.

YouTube

<iframe width="100%" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="فيديو يوتيوب"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

Google Maps

<iframe src="https://www.google.com/maps/embed?pb=..."
width="100%" height="400" style="border:0;"
allowfullscreen="" loading="lazy"></iframe>

<a href="https://wa.me/966500000000?text=مرحبا" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg"
width="70" alt="واتساب">
</a>

شرح كل سمة في الـ <iframe>:

src="" ← الرابط اللي بداخل الإطار
width / height ← أبعاد الإطار
title="" ← وصف للمكفوفين (مهم لـ SEO)
allow="" ← الأذونات (autoplay, كاميرا، ميكروفون...)
allowfullscreen ← يسمح بملء الشاشة (ضروري ليوتيوب)
loading="lazy" ← يحمل الإطار لما يقرب منه (يسرّع الموقع)
sandbox ← أمان إضافي (يمنع الإطار من عمل أشياء خطيرة)

تمرين اليوم: صفحة "تعرف على مدرستنا" (كاملة + ميديا)

تم النسخ ✓

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8"><meta name="viewport" 
content="width=device-width, initial-scale=1.0">
<title>مدرستنا الحبيبة</title>
</head>
<body>
<h1 style="background:#ea580c;text-align:center;color:white;
padding:30px;">
 مرحبًا بكم في مدرستنا
</h1>

<!-- فيديو تعريفي -->
<video controls width="100%" poster="https://picsum.photos/800/400">
<source src="https://cdn.coverr.co/videos/coverr-school-kids-running-5828/1080p.mp4">
</video>

<!-- نشيد المدرسة -->
<h2 style="text-align:center;margin:30px;">نشيد المدرسة</h2>
<audio controls style="width:100%;">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>

<!-- موقعنا على الخريطة -->
<h2 style="text-align:center;margin:30px;">موقعنا</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3624.5!2d39.6!3d24.47!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15e368e0f9b7e07d%3A0x880ec5d9c99e8a09!2sالمسجد الحرام!5e0!3m2!1sar!2ssa!4v1700000000000"
width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>
</body>
</html>

خلاصة الدرس في ٣ وسوم فقط:

<audio> ← للصوت
<video> ← للفيديو
<iframe> ← لأي موقع آخر

بهذه الثلاثة أصبح موقعك حيًّا ومتكاملاً 100%!

من خبرتي: نصائح احترافية للوسائط في موقعك

الوسوم الثلاثة بسيطة، لكن من واقع عملي على مواقع حقيقية، هناك نصائح حول استخدامها تفرّق بين موقع سريع محترف وموقع ثقيل يهرب منه الزائر:

للفيديو: لا ترفع الفيديوهات الثقيلة على استضافتك مباشرة، لأنها تبطئ موقعك وتستهلك مواردك. الأفضل رفعها على منصة مثل يوتيوب وتضمينها عبر <iframe> — فهي تتكفّل بالأداء والجودة المتغيّرة نيابةً عنك.

للأداء: تجنّب التشغيل التلقائي للوسائط الثقيلة، فهو يزعج الزائر ويستهلك بياناته، وقد يضرّ ترتيبك في محرّكات البحث.

لإمكانية الوصول: أضف نصًا بديلًا أو ترجمة للفيديو حين تستطيع، ليستفيد ضعاف السمع، وليفهم محرّك البحث محتواك.

ونصيحة أخيرة تعلّمتها: اجعل الـ<iframe> متجاوبًا مع حجم الشاشة بدل تثبيت أبعاده، حتى يظهر بشكل سليم على الجوال — فأغلب زوّارك اليوم يتصفّحون من هواتفهم.

الدرس القادم: مراجعة جميع وسوم وخصائص HTML5