الفيديو في HTML
أشارت نظرة Media العامة إلى عدة عائلات. تركّز هذه الجلسة على واحدة: عنصر video للمقاطع والعروض التي تستضيفها بنفسك. امنح الزائر واجهة تشغيل وإيقاف بـ controls بدل مفاجأته بصوت يبدأ تلقائيًا.
ماذا يفعل video
يخبر video المتصفح أن يجلب ملف فيلم ويرسمه في الصفحة. يمكنك الإشارة إلى ملف واحد بـ src، أو سرد عدة أبناء <source> ليختار المتصفح صيغة مدعومة. السمات الاختيارية تحجز الحجم (width / height)، وتعرض إطارًا ثابتًا قبل التشغيل (poster)، وتُظهر عناصر التحكم الأصلية.
إجابة مباشرة
استخدم <video controls src="movie.mp4"> أو ضمّن أبناء <source> لعدة صيغ. أضف صورة poster لإطار معاينة قبل التشغيل. ضع نصًا احتياطيًا قصيرًا (وربط تنزيل اختياريًا) داخل video للوكلاء التي لا تستطيع تشغيل الوسائط. فضّل ملفات مضغوطة بحجم معقول.
فيديو بسيط مع controls
ملف MP4 واحد مع controls وعرض كافٍ لكثير من صفحات التعليم.
فيديو بسيط مع controls
html<video controls width="480" src="media/demo.mp4">
Sorry, your browser does not support this video.
</video>قراءة العينة البسيطة
controlsيطلب من المتصفح واجهة تشغيل/إيقافwidth="480"يساعد على حجز مساحة التخطيط أثناء تحميل الملفsrcيشير إلى ملف الفيلم في مجلدmedia- النص داخل
videoمحتوى احتياطي عندما لا يُدعم العنصر
مصادر متعددة وposter
تختلف المتصفحات في راحة الصيغ. سرد WebM وMP4 مع تلميحات type، مع صورة ثابتة poster، نمط عملي شائع.
مصادر متعددة وposter
html<video controls width="480" poster="media/demo-poster.jpg">
<source src="media/demo.webm" type="video/webm">
<source src="media/demo.mp4" type="video/mp4">
Download the <a href="media/demo.mp4">MP4</a> instead.
</video>قراءة عينة المصادر المتعددة
posterيعرض صورة معاينة حتى يبدأ التشغيل- كل
sourceيسمّي ملفًا ونوع MIME عبرtype - يختار المتصفح أول مصدر يستطيع تشغيله
- رابط التنزيل داخل العنصر يساعد عندما يكون التشغيل غير متاح
حجم الملف والصيغ
تصديرات الكاميرا الضخمة تتعثر على الشبكات البطيئة. صدّر MP4 بحجم ويب (واختياريًا WebM) يناسب الحاجة التعليمية — العروض القصيرة أفضل من ملفات master متعددة الجيجابايت على صفحة درس. لا تحتاج كل الحاويات في اليوم الأول؛ شغّل MP4 واضحًا واحدًا، ثم أضف صيغة ثانية إن احتاجها جمهورك.
Autoplay: تعلّم controls أولًا
التشغيل التلقائي مع الصوت غالبًا محجوب وعادة غير مهذّب. توجد حيل muted autoplay لأبطال التسويق، لكن المبتدئين يجب أن يتقنوا controls والتشغيل الذي يبدأه المستخدم أولًا. عندما تحتاج autoplay لاحقًا، اقرأ سياسات المتصفح بعناية وأبقِ مسار إيقاف متاحًا.
الترجمة وإمكانية الوصول (عادة)
إذا كان المحتوى المنطوق يعلّم شيئًا مهمًا، خطّط لترجمة أو نص مكتوب — حتى لو ربطت عناصر track كاملة في مرور لاحق. لا تعتمد على صورة poster وحدها كالملخّص الوحيد المتاح لدرس talking-head.
العرض والارتفاع والتخطيط
تعيين width (وheight المطابق عندما تعرف نسبة العرض إلى الارتفاع) يقلل قفز التخطيط أثناء تحميل بيانات الفيديو الوصفية. التمديد بأرقام غير متطابقة يبدو خاطئًا؛ احتفظ بنسبة العرض إلى الارتفاع الحقيقية كما فعلت مع الصور.
تمرين في المحرر
- ضع ملف
.mp4قصيرًا في مجلدmedia. - ضمّنه بـ
video+controls+ عرض معقول. - أضف نصًا احتياطيًا داخل العنصر.
- اختياريًا أضف صورة
posterوصيغةsourceثانية. - افتح الصفحة، شغّل وأوقف، ثم اختبر مع تقييد الشبكة إن أمكن — لاحظ لماذا يهم حجم الملف.
أخطاء سهلة
- غياب
controlsفيصعب على المستخدمين التشغيل بسهولة - شحن ملفات ضخمة غير مضغوطة تتعثر على الشبكات البطيئة
- نسيان النص الاحتياطي أو رابط التنزيل
- اللجوء إلى autoplay مع الصوت قبل فهم الأساسيات
- وضع
altعلىvideoكما تفعل علىimg(استخدم الترجمة/النص المكتوب والأوصاف المرئية بدلًا من ذلك) - الخلط بين تضمين YouTube (
iframe) وملفاتvideoالمستضافة ذاتيًا
ملخص
videoيضمّن ملفات الفيلم التي تستضيفها- استخدم
controlsلواجهة التشغيل - عدة وسوم
sourceتحسّن دعم الصيغ posterيعرض إطار معاينة قبل التشغيل- فضّل الملفات المضغوطة وتجنّب صوت autoplay المفاجئ
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى