حلول مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

إدراج الفيديو HTML

إدراج الفيديو | <video>

قبل ظهور معيار HTML5، كان عرض الفيديو على الويب يعتمد بشكل شبه كامل على إضافات (Plugins) خارجية، وأشهرها Adobe Flash. كانت هذه الطريقة تعاني من مشاكل أمنية عديدة، وضعف في الأداء، ولم تكن مدعومة على نطاق واسع (خاصة على أجهزة الهواتف الذكية مثل iPhone).

جاء الوسم <video> كحل "أصلي" ودلالي مدمج في المتصفح. إنه يتيح لنا تضمين وبث ملفات الفيديو مباشرة، مع توفير واجهة تحكم، ودعم للشاشات الكاملة، وإمكانيات هائلة لإمكانية الوصول. هذا الدرس سيشرح بالتفصيل البنية الأساسية، وخصائص التحكم، ومشكلة التنسيقات، وكيفية إضافة الترجمة، والممارسات الفضلى لاستخدامه.

ما هو الوسم <video>؟ (وسم حاوٍ)

الوسم <video> هو وسم دلالي (Semantic) من HTML5 يُستخدم لتضمين محتوى مرئي وصوتي (فيديو) في المستند.

تماماً مثل شقيقه <audio>، فإن الوسم <video> هو "وسم حاوٍ" (Container Tag) مزدوج. أي أنه يتطلب وسم فتح <video> ووسم إغلاق </video>.

لماذا هو حاوية؟ للأسباب نفسها التي ذكرناها في درس الصوت:

  1. لتوفير "مصادر" (Sources) متعددة: وهو أمر "أكثر أهمية" في الفيديو، نظراً لاختلاف دعم المتصفحات لتنسيقات (Codecs) الفيديو المختلفة.
  2. لتوفير "محتوى احتياطي" (Fallback): لعرض رسالة أو صورة للمتصفحات القديمة جداً.
  3. لتوفير "مسارات ترجمة" (Tracks): لإضافة ملفات الترجمة (Subtitles) أو التعليقات الصوتية (Captions).

وعلى عكس <img>، فإن <video> هو عنصر "كُتَلي" (Block-level) افتراضياً في بعض السياقات، على الرغم من أن سلوكه قد يشبه العناصر السطرية (Inline-block) عند تحديد أبعاده. الأهم أنه "يحجز مساحة" في الصفحة.

الخصائص الأساسية: controls, width, و height

لجعل الفيديو قابلاً للاستخدام، نحتاج إلى ثلاث خصائص أساسية:

1. الخاصية controls (ضوابط التحكم)

كما في <audio>، هذه "خاصية منطقية" (Boolean Attribute). مجرد وجودها (<video controls>) يطلب من المتصفح إظهار واجهة التحكم الافتراضية الخاصة به.

في الفيديو، تتضمن هذه الضوابط عادةً: زر تشغيل/إيقاف، شريط التقدم، عرض الوقت، التحكم بالصوت، وزر "ملء الشاشة" (Fullscreen).

بدون controls (وبدون autoplay)، ستظهر الصورة كـ "صورة ثابتة" (عادة الإطار الأول) لا يمكن التفاعل معها.

2. الخاصيتان width و height (الأبعاد)

هاتان الخاصيتان "ضروريتان" لتجربة المستخدم. تُستخدمان لتحديد "أبعاد" (Dimensions) مساحة الفيديو على الصفحة (بالبيكسل).

لماذا هي ضرورية جداً؟
لأنها تمنع "انزياح التخطيط" (Layout Shift). عندما تحدد width="640" و height="360"، يقوم المتصفح "بحجز" هذا المستطيل الأسود على الصفحة "فوراً" أثناء تحميلها. ثم، عندما يتم تحميل الفيديو، فإنه يملأ هذا الحيز المحجوز.

إذا لم تحددها، ستبدأ الصفحة بالتحميل، وعندما يكتمل تحميل الفيديو فجأة، سيقوم "بدفع" (Push) كل المحتوى الذي يليه (مثل الفقرات أو الصور) إلى الأسفل، مسبباً "قفزة" مزعجة في الصفحة.

مثال (1): أبسط طريقة لإدراج فيديو (src)

كما في <audio>، الطريقة الأبسط هي استخدام الخاصية src مباشرة على الوسم <video>. هذه الطريقة "غير موصى بها" لضعف التوافقية، ولكنها تعمل للتجارب السريعة.

مثال (1): استخدام src, controls, والأبعاد 

<body>

    <h2>فيديو تجريبي</h2>
    <p>شاهد هذا المقطع القصير (لاحظ حجز المساحة قبل التحميل):</p>
    
    <video 
        src="videos/sample.mp4" 
        controls
        width="640"
        height="360"
    >
    </video>

</body>

المشكلة: معضلة تنسيقات الفيديو (MP4, WebM)

مشكلة تنسيقات الفيديو "أعقد" من الصوت. الفيديو ليس مجرد ملف واحد، بل هو "حاوية" (Container) تجمع بين "ترميز فيديو" (Video Codec) (مثل H.264 أو VP9) و "ترميز صوت" (Audio Codec) (مثل AAC أو Opus).

لتبسيط الأمر للمبتدئين، هناك تنسيقان رئيسيان يجب أن نهتم بهما:

  • MP4 (H.264 + AAC):
    • **الوصف:** التنسيق "القياسي العالمي". هو التنسيق الذي تستخدمه Apple (Safari, iOS)، و Chrome، و Edge.
    • **الدعم:** يكاد يكون شاملاً.
    • **المشكلة:** تقنية H.264 كانت محمية بـ "براءات اختراع" (Patents)، مما جعل بعض المتصفحات (مثل Firefox قديماً) مترددة في دعمها كنظام أساسي.
  • WebM (VP8/VP9 + Vorbis/Opus):
    • **الوصف:** التنسيق "مفتوح المصدر" (Open-source) الذي تدعمه جوجل (يوتيوب يستخدمه بكثافة).
    • **الدعم:** مدعوم بشكل ممتاز في Chrome, Firefox, Edge.
    • **المشكلة:** متصفح "Safari" (التابع لـ Apple) تأخر "جداً" في دعمه (على الرغم من أنه يدعمه الآن، إلا أن ضمان التوافق مع الإصدارات الأقدم يتطلب بديلاً).

الخلاصة: لضمان عمل الفيديو على "كل" المتصفحات (الحديثة والقديمة، Safari و Firefox)، الحل "الاحترافي" هو توفير الفيديو "مرتين": مرة بتنسيق .mp4 ومرة بتنسيق .webm.

الحل الاحترافي: الوسم <source>

هنا نستخدم القوة الكاملة لكون <video> وسماً حاوياً. تماماً كما في <audio>، نحذف الخاصية src من الوسم <video>، ونضع وسوم <source> "بداخله".

الوسم <source> هو وسم "فارغ" (Empty Tag) ويتطلب خاصيتين:

  • src: مسار ملف الفيديو (مثل "video.mp4").
  • type: نوع "MIME Type" للملف.

أنواع MIME الشائعة للفيديو:

  • لـ .mp4: type="video/mp4"
  • لـ .webm: type="video/webm"
  • لـ .ogg: type="video/ogg" (تنسيق قديم مفتوح المصدر)

كيف يعمل المتصفح؟
سيقرأ المتصفح وسوم <source> بالترتيب.
1. هل أدعم video/mp4؟ (إذا كان Safari، سيقول "نعم"، يحمل .mp4، ويتجاهل الباقي).
2. إذا لا، هل أدعم video/webm؟ (إذا كان Firefox، سيقول "نعم"، يحمل .webm، ويتجاهل الباقي).

المحتوى الاحتياطي (Fallback Content)

بعد وسوم <source>، وقبل إغلاق </video>، نضع "المحتوى الاحتياطي".

هذا المحتوى (عادة نص ورابط تحميل) سيتم "تجاهله" بواسطة جميع المتصفحات الحديثة التي تفهم <video>.

ولكن سيتم "عرضه" بواسطة المتصفحات القديمة جداً (مثل IE 8) التي لا تفهم الوسم <video> من الأساس.

مثال (2): البنية المتكاملة (<source> + Fallback)

هذا هو المثال "المثالي" (Bulletproof) لتضمين الفيديو في HTML5، مع ضمان التوافقية والمحتوى الاحتياطي.

مثال (2): البنية المتكاملة للفيديو 

<body>

    <h2>فيديو (بأقصى توافقية)</h2>
    
    <video controls width="640" height="360">
        
        <!-- المصدر 1 (لـ Safari, Edge, Chrome) -->
        <source src="videos/my-video.mp4" type="video/mp4">
        
        <!-- المصدر 2 (لـ Firefox, Chrome) -->
        <source src="videos/my-video.webm" type="video/webm">
        
        <!-- المحتوى الاحتياطي يبدأ هنا -->
        <p>
            عذراً، متصفحك قديم ولا يدعم تشغيل الفيديو المدمج. 
            <br>
            يمكنك <a href="videos/my-video.mp4">تحميل الفيديو (MP4)</a> لمشاهدته.
        </p>
        <!-- نهاية المحتوى الاحتياطي -->
        
    </video>

</body>

الخاصية poster (الصورة التعريفية)

افتراضيًا، يعرض المتصفح "الإطار الأول" (First Frame) من الفيديو كصورة ثابتة قبل أن يضغط المستخدم "تشغيل".

في كثير من الأحيان، يكون الإطار الأول مجرد شاشة سوداء أو لقطة غير معبرة.

الخاصية poster تسمح لنا بتحديد "صورة" (مثل غلاف الفيلم أو صورة مصغرة جذابة) لتظهر "بدلاً" من الإطار الأول. بمجرد أن يضغط المستخدم "تشغيل"، تختفي صورة الـ poster ويبدأ الفيديو.

تأخذ هذه الخاصية "مسار صورة" (.jpg أو .png) تماماً مثل <img src="">.

مثال (3): إضافة poster و controls

مثال (3): استخدام poster 

<body>

    <h2>شاهد الدرس التمهيدي</h2>
    
    <video 
        controls 
        width="640" 
        height="360"
        poster="images/video-thumbnail.jpg"
    >
        <source src="videos/tutorial.mp4" type="video/mp4">
        <source src="videos/tutorial.webm" type="video/webm">
        <p>متصفحك لا يدعم الفيديو. <a href="videos/tutorial.mp4">حمّل الدرس</a>.</p>
    </video>

</body>

النتيجة: سيرى المستخدم الصورة الجذابة "video-thumbnail.jpg" بدلاً من أول إطار في الفيديو، مع وجود زر "تشغيل" كبير فوقها.

الخصائص المنطقية للتشغيل: autoplay, muted, loop

تماماً كما في <audio>، يمتلك <video> خصائص منطقية (Boolean) للتحكم في التشغيل التلقائي:

  • autoplay (التشغيل التلقائي): يطلب من المتصفح بدء تشغيل الفيديو "تلقائياً" فور تحميل الصفحة.
  • loop (التكرار): يطلب من المتصفح إعادة تشغيل الفيديو من البداية "كلما انتهى".
  • muted (كتم الصوت): يجعل الفيديو يبدأ وهو "مكتوم الصوت".

السياسة الحديثة للمتصفحات (هام جداً):
التشغيل التلقائي للفيديو "مع صوت" (autoplay بدون muted) هو أمر "مزعج للغاية" للمستخدمين. لهذا السبب، "جميع" المتصفحات الحديثة (Chrome, Safari, Firefox) "تمنع" autoplay بشكل افتراضي.

الحل الوحيد:
المتصفحات تسمح بـ autoplay "فقط" إذا كان مصحوباً بـ muted.
(<video autoplay muted>...</video>)

متى نستخدم هذا؟
يُستخدم هذا النمط (autoplay + muted + loop) بشكل شائع لإنشاء "خلفيات فيديو" (Video Backgrounds) للمواقع، والتي تكون صامتة ومتكررة.

مثال (4): فيديو كخلفية للموقع (autoplay + muted + loop)

في هذا المثال، نزيل controls (لأننا لا نريد أن يتحكم المستخدم به)، ونضيف الخصائص الثلاث لجعل الفيديو خلفية متحركة صامتة.

مثال (4): فيديو كخلفية (صامت) 

<body>

    <div class="video-background-container">
        <video autoplay muted loop width="1280" height="720">
            <source src="videos/ambient-background.mp4" type="video/mp4">
            <source src="videos/ambient-background.webm" type="video/webm">
        </video>
    </div>
    
    <!-- (سيتم استخدام CSS لاحقاً لوضع هذا المحتوى "فوق" الفيديو) -->
    <div class="content">
        <h1>أهلاً بك في موقعنا</h1>
    </div>

</body>

خاصية التحميل المسبق: preload

هذه الخاصية مطابقة تماماً لنظيرتها في <audio>. إنها "تلميح" (Hint) للمتصفح حول مقدار ما يجب تحميله من الفيديو "قبل" أن يضغط المستخدم "تشغيل".

  • preload="auto" (الافتراضي): يسمح للمتصفح بتحميل "الملف بالكامل" (أو جزء كبير منه). يضمن بدء تشغيل فوري، ولكنه يستهلك "الكثير" من بيانات المستخدم (Bandwidth) دون داعٍ إذا لم يشاهد الفيديو.
  • preload="metadata" (الموصى به): يخبر المتصفح بتحميل "البيانات الوصفية فقط" (مثل: width, height, duration, والإطار الأول poster). هذا سريع جداً، يوفر البيانات، ويجهز المشغل للعرض.
  • preload="none" (الأخف): يخبر المتصفح "بعدم تحميل أي شيء" (حتى البيانات الوصفية) إلا عند ضغط "تشغيل". هو الأفضل لتوفير البيانات، ولكنه قد يسبب "تأخيراً" (Delay) عند بدء التشغيل.

إضافة الترجمة: الوسم <track>

واحدة من أقوى ميزات الوسم <video> هي دعمه المدمج لإمكانية الوصول (Accessibility) عبر الوسم <track>.

الوسم <track> هو وسم "فارغ" (Empty Tag) يوضع "داخل" <video> (بعد <source>). يُستخدم لربط "ملفات نصية" (تنسيق .vtt هو الأكثر شيوعاً) تتزامن مع الفيديو.

الخصائص الرئيسية للوسم <track>:

  • kind (النوع): يحدد "نوع" المسار.
    • kind="subtitles": (الأشهر) "ترجمة" لكلام مسموع بلغة مختلفة.
    • kind="captions": (الأهم لإمكانية الوصول) "تعليقات توضيحية" لذوي الإعاقات السمعية. تتضمن الحوار "بالإضافة إلى" وصف الأصوات (مثل: [صوت انفجار] أو [موسيقى هادئة]).
    • kind="descriptions": وصف صوتي مرئي لذوي الإعاقات البصرية (يصف ما يحدث على الشاشة).
  • src: المسار إلى ملف .vtt.
  • srclang: رمز اللغة ("en", "ar", "fr").
  • label: الاسم "المرئي" للمستخدم الذي يظهر في قائمة الترجمة (مثل: "العربية", "English").
  • default (اختياري): خاصية منطقية لجعل هذا المسار يعمل تلقائياً.

مثال (5): فيديو مع ملفات ترجمة (<track>)

مثال (5): إضافة <track> للترجمة 

<body>

    <h2>فيديو بملفات ترجمة اختيارية</h2>
    
    <video controls width="720" height="405" preload="metadata" poster="images/my-movie.jpg">
        
        <source src="videos/my-movie.mp4" type="video/mp4">
        <source src="videos/my-movie.webm" type="video/webm">
        
        <!-- إضافة مسارات الترجمة -->
        <track 
            kind="subtitles" 
            src="subtitles/my-movie.ar.vtt" 
            srclang="ar" 
            label="العربية"
            default 
        >
        <track 
            kind="subtitles" 
            src="subtitles/my-movie.en.vtt" 
            srclang="en" 
            label="English"
        >
        
        <!-- المحتوى الاحتياطي -->
        <p>متصفحك لا يدعم الفيديو المدمج.</p>
        
    </video>

</body>

النتيجة: سيظهر مشغل الفيديو، وسيحتوي زر "التعليقات/الترجمة" (CC) على خيارين: "العربية" (سيتم تشغيلها افتراضياً) و "English".

تنبيه هام حول التنسيق (CSS)

كما ذكرنا سابقاً، واجهة التحكم controls الافتراضية "تختلف" في الشكل بين المتصفحات ولا يمكن تنسيقها بمرونة.

لذلك، في المشاريع الاحترافية، غالباً ما يلجأ المطورون إلى "إخفاء" الضوابط الافتراضية (عن طريق إزالة controls) وبناء واجهة تحكم خاصة بهم باستخدام HTML (<button>, <div>) وتنسيقها بـ CSS، ثم ربطها بالفيديو "الخفي" باستخدام JavaScript (video.play(), video.pause()).

تنبيه آخر: لجعل الفيديو "متجاوباً" (Responsive) (أي يتغير حجمه ليناسب شاشة الهاتف)، نستخدم عادة CSS (مثل width: 100%; height: auto;) بدلاً من تحديد width و height بقيم ثابتة. ولكن تحديدها في HTML يظل مهماً لحجز المساحة الأولية (كما ذكرنا في Layout Shift).

(ملخص الدرس):
1. استخدم <video>...</video> لتضمين الفيديو (إنه "حاوية").
2. أضف controls لإظهار أزرار التحكم.
3. أضف width و height "دائماً" لتجنب "انزياح المحتوى".
4. استخدم وسوم <source> متعددة (.mp4 و .webm) لضمان "التوافقية" القصوى.
5. أضف "محتوى احتياطي" (Fallback) للمتصفحات القديمة.
6. استخدم poster="image.jpg" لإضافة "صورة تعريفية" (Thumbnail).
7. autoplay "ممنوع" من قبل المتصفحات إلا إذا كان مصحوباً بـ muted (كتم الصوت).
8. loop (للتكرار) و preload (للتحميل المسبق) هي خصائص مفيدة للتحكم في الأداء.
9. استخدم الوسم <track> لإضافة "الترجمة" (subtitles) أو "التعليقات" (captions) لإمكانية الوصول.