الدرس 13 · الوحدة 4: بناء عناصر الواجهة الأمامية

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

نضيف الفيديو والصوت إلى صفحاتنا بوسم واحد. ⏱ نحو 15 دقيقة.

بعد هذا الدرس ستستطيع أن:

تضيف فيديو بأزرار تحكم وصورة غلاف.
تضيف ملفًّا صوتيًّا.
تستخدم autoplay و muted و loop في مكانها.
تضمّن فيديو من يوتيوب بـ iframe.

١الفيديو

قبل HTML5 كان تشغيل الفيديو يحتاج برامج إضافية. الآن يكفي الوسم <video>:

<video src="media/intro.mp4" controls width="320" poster="media/poster.jpg">  متصفحك لا يدعم الفيديو.</video>

index.html

السمة	وظيفتها
`src`	مكان ملف الفيديو.
`controls`	يُظهر أزرار التشغيل والإيقاف والصوت. بدونها لا يستطيع الزائر التحكم!
`width`	العرض بالبكسل.
`poster`	صورة تظهر قبل بدء التشغيل.

النص بين وسمي الفتح والإغلاق يظهر فقط في المتصفحات القديمة جدًّا التي لا تعرف <video>.

٢الصوت

<p>صوت الجرس:</p><audio src="media/bell.mp3" controls></audio>

index.html

سمات <audio> مثل الفيديو تقريبًا: src و controls.

٣التشغيل التلقائي والتكرار

السمة	معناها	ملاحظة
`autoplay`	يبدأ التشغيل وحده.	المتصفحات تمنعه إلا إذا كان الصوت مكتومًا.
`muted`	يبدأ مكتوم الصوت.	يُستخدم مع autoplay للفيديو الخلفي.
`loop`	يعيد التشغيل من البداية عند الانتهاء.

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

index.html

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

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

<video controls width="320">  <source src="media/intro.webm" type="video/webm">  <source src="media/intro.mp4" type="video/mp4">  متصفحك لا يدعم الفيديو.</video>

النوع	الصيغ الشائعة
فيديو	MP4 (الأوسع دعمًا) و WebM
صوت	MP3 (الأوسع دعمًا) و OGG و WAV

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

الفيديوهات الكبيرة لا نضعها في موقعنا، بل نرفعها إلى يوتيوب ونضمّنها بالوسم <iframe> (إطار يعرض صفحة داخل صفحتك):

<iframe width="560" height="315"  src="https://www.youtube.com/embed/رمز-الفيديو"  title="شرح الدرس" allowfullscreen></iframe>

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

توقّع وتحقّق

أي سمة تُظهر أزرار التحكم؟

controls.

صورة تظهر قبل تشغيل الفيديو:

poster.

متى يسمح المتصفح بالتشغيل التلقائي؟

autoplay مع muted.

لعرض فيديو يوتيوب في صفحتك نستخدم:

كود التضمين iframe.

الخلاصة

video و audio يشغّلان الوسائط دون برامج إضافية.
controls للأزرار، و poster لصورة الغلاف، و width للعرض.
autoplay يعمل فقط مع muted، و loop للتكرار.
source لأكثر من صيغة، و iframe لتضمين يوتيوب.

تحدٍّ برمجي: صفحة درس مصوّر

سهل

اكتب صفحة لدرس مصوّر في مركز التدريب: عنوان، وفيديو الدرس، وتسجيل صوتي لملخصه. الملفات جاهزة في مجلد media: intro.mp4 و poster.jpg و bell.mp3.

المطلوب:

عنوان h1 للدرس.
فيديو media/intro.mp4 بأزرار تحكم وعرض 320.
صورة غلاف للفيديو media/poster.jpg.
صوت media/bell.mp3 بأزرار تحكم.
الصوت لا يعمل تلقائيًّا.

👀 اعرض شكل الناتج المطلوب

الناتج المطلوب

✓ التحقق الآلي من حلّك:

عنوان h1.
فيديو intro.mp4 بأزرار تحكم.
عرض الفيديو 320.
صورة غلاف poster.jpg.
صوت bell.mp3 بأزرار تحكم، وليس تلقائيًّا.

💡 تلميح 1

<video src="media/intro.mp4" controls width="320" poster="media/poster.jpg"></video>

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

<h1>الدرس الأول: مقدمة في الويب</h1> <video src="media/intro.mp4" controls width="320" poster="media/poster.jpg"></video> <h2>الملخص الصوتي</h2><audio src="media/bell.mp3" controls></audio>

انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←