الصوت والفيديو و iframe في HTML

الصفحات ليست نصوصاً وصوراً فقط. درس مسجَّل بالصوت، وفيديو يشرح المنتج، وخريطة تدل على مكان المحل: كل هذا يمكن وضعه في صفحتك بوسوم بسيطة. في هذا الدرس ستتعلم الوسوم الثلاثة المسؤولة عن ذلك: <audio> و <video> و <iframe>.

الصوت: audio

<audio src="lesson.mp3" controls></audio>

• src: مسار الملف الصوتي، بنفس قواعد مسار الصورة.
• controls: تُظهر أزرار التحكم: التشغيل والإيقاف وشريط التقدم ومستوى الصوت.

لا تنسَ controls

بدون هذه الخاصية لا يظهر أي شيء في الصفحة، فلا يجد الزائر زراً يضغطه.

وهذه خصائص أخرى مفيدة، وكلها تُكتب بلا قيمة:

الخاصية	تأثيرها
loop	يعيد التشغيل من البداية كلما انتهى الملف
muted	يبدأ والصوت مكتوم
autoplay	يبدأ التشغيل تلقائياً عند فتح الصفحة

لماذا يمنع المتصفح التشغيل التلقائي؟

تخيّل أنك فتحت موقعاً في مكتبة هادئة، فانطلق صوت عالٍ من هاتفك. تجربة مزعجة، ولهذا تمنع المتصفحات الحديثة التشغيل التلقائي إذا كان فيه صوت. الخاصية autoplay تعمل غالباً مع muted فقط:

<video src="intro.mp4" autoplay muted loop></video>

والأفضل دائماً أن تترك قرار التشغيل للزائر.

الفيديو: video

<video src="trailer.mp4" controls width="640" height="360" poster="cover.jpg"></video>

يقبل <video> كل خصائص <audio> السابقة، ويزيد عليها:

• width و height: أبعاد مشغّل الفيديو. كتابتهما تحجز المكان فلا تقفز الصفحة عند التحميل.
• poster: صورة تُعرض قبل أن يبدأ التشغيل، مثل غلاف الفيلم.

أكثر من صيغة: source

ليست كل المتصفحات تدعم كل الصيغ. لذلك يمكنك أن تقدّم الملف بأكثر من صيغة داخل وسوم <source>، والمتصفح يأخذ أول صيغة يستطيع تشغيلها:

<video controls width="640" height="360">
  <source src="trailer.webm" type="video/webm">
  <source src="trailer.mp4" type="video/mp4">
  متصفحك لا يدعم تشغيل الفيديو.
</video>

النص المكتوب في آخر الوسم يظهر فقط في المتصفحات القديمة جداً التي لا تعرف الوسم أصلاً.

النوع	الصيغ الأكثر دعماً
صوت	MP3، ثم WAV و OGG
فيديو	MP4، ثم WebM

إذا أردت صيغة واحدة تعمل في كل مكان، فهي MP3 للصوت و MP4 للفيديو.

الترجمة والنص المكتوب: track

لإضافة ترجمة أو نص مكتوب للفيديو استخدم <track>، وهو يشير إلى ملف نصي بصيغة VTT فيه الجمل وتوقيتاتها:

<video src="lesson.mp4" controls>
  <track src="lesson-ar.vtt" kind="subtitles" srclang="ar" label="العربية" default>
</video>

الترجمة ليست رفاهية: يحتاجها ضعاف السمع، ويحتاجها من يشاهد في مكان عام والصوت مغلق.

صفحة داخل صفحة: iframe

<iframe> يفتح نافذة في صفحتك تعرض صفحة أخرى كاملة.

<iframe src="https://example.com" width="600" height="400" title="موقع المثال"></iframe>

تخيّل شاشة تلفاز معلقة على جدار المحل: الجدار جدارك، لكن ما يُعرض على الشاشة يأتي من قناة أخرى لا تتحكم أنت في محتواها.

• src: عنوان الصفحة المعروضة.
• width و height: أبعاد النافذة.
• title: وصف لمحتوى النافذة يقرؤه قارئ الشاشة. اكتبه دائماً.

تضمين فيديو يوتيوب

رفع الفيديو على خادمك يستهلك مساحة وسرعة. لذلك تضع أغلب المواقع الفيديو على يوتيوب ثم تضمّنه في الصفحة. افتح الفيديو على يوتيوب، واضغط «مشاركة» ثم «تضمين»، فيعطيك كوداً مثل هذا:

<iframe
  width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="شرح الدرس الأول"
  loading="lazy"
  allowfullscreen></iframe>

• VIDEO_ID هو رمز الفيديو، وستجده في رابطه.
• allowfullscreen تسمح بزر ملء الشاشة.
• loading="lazy" تؤجل تحميل النافذة حتى يقترب الزائر منها، فتفتح صفحتك أسرع.

وبالطريقة نفسها تضمّن خريطة من خرائط Google: اختر «مشاركة» ثم «تضمين خريطة»، وانسخ الكود.

ليست كل المواقع تقبل

كثير من المواقع، مثل البنوك وشبكات التواصل، تمنع عرض صفحاتها داخل iframe لحماية مستخدميها. إذا ظهرت النافذة فارغة فهذا غالباً هو السبب.

جرّب بنفسك

شغّل المقطع الصوتي، ثم أضف له الخاصية loop. بعد ذلك غيّر ارتفاع النافذة إلى 250 وعرضها إلى 300:

جرّب بنفسكHTML

محرر الكود (HTML)<h3>مقطع صوتي</h3> <audio src="/samples/melody.wav" controls></audio> <h3>صفحة داخل الصفحة</h3> <iframe src="/samples/hello.html" width="100%" height="120" title="صفحة تجريبية"></iframe>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان controls: المشغّل لا يظهر، أو يظهر الفيديو بلا أي زر.
• الاعتماد على autoplay: المتصفح يمنعه مع الصوت، فيبقى الفيديو واقفاً. أضف muted أو اترك التشغيل للزائر.
• رفع فيديو ثقيل على موقعك مباشرة: الصفحة تصبح بطيئة وتستهلك باقة الزائر. اضغط الفيديو قبل رفعه، أو ضمّنه من يوتيوب.
• iframe بلا title: مستخدم قارئ الشاشة لا يعرف ما بداخل النافذة.

اختبر نفسك

سؤال

كتبت <audio src='song.mp3'></audio> ولم يظهر شيء في الصفحة. ما السبب؟

يجب استخدام <video> بدلاً منهتنقص الخاصية controlsصيغة MP3 غير مدعومة

سؤال

ما وظيفة الخاصية poster في وسم الفيديو؟

تضيف ترجمة مكتوبةتعرض صورة قبل بدء التشغيلتحدد جودة الفيديو

الخلاصة

• <audio> للصوت و <video> للفيديو، ولا يظهر المشغّل بدون controls.
• poster غلاف الفيديو، و loop للتكرار، و muted لكتم الصوت.
• المتصفحات تمنع autoplay مع الصوت.
• <source> يقدّم الملف بأكثر من صيغة، و <track> يضيف الترجمة.
• <iframe> يعرض صفحة أخرى داخل صفحتك، مثل فيديو يوتيوب أو خريطة.