الفيديوهات في HTML

الفيديوهات في HTML

يا هلا بالشباب! اليوم بنشوف كيف نضيف فيديوهات لصفحات الويب باستخدام HTML. الموضوع سهل وما يبيله تعقيد.

أبسط طريقة: وسم <video>

عشان تحط فيديو، كل اللي تحتاجه هو وسم <video> وتحدد مصدر الفيديو عن طريق السمة src. ولا تنسى تحط السمة controls عشان يظهر مشغل الفيديو (زر التشغيل، مستوى الصوت، إلخ).

<video src="your-video.mp4" controls></video>

ملاحظة سريعة: تأكد إنك حاط المسار الصحيح للفيديو في src.

سمات مهمة لازم تعرفها

فيه سمات كثيرة تقدر تستخدمها مع وسم <video> عشان تتحكم بطريقة عرض الفيديو وتشغيله:

  • autoplay: يشغل الفيديو تلقائي أول ما تنفتح الصفحة. (انتبه، أغلب المتصفحات تطلب إن الفيديو يكون muted عشان يشتغل تلقائي).
  • loop: يعيد تشغيل الفيديو من البداية لما يخلص.
  • muted: يكتم صوت الفيديو تلقائي. مفيد مع autoplay.
  • poster: صورة تظهر قبل ما يشتغل الفيديو. حلوة كـ "thumbnail".
  • width و height: تحدد أبعاد الفيديو بالبكسل.

مثال يجمع كم سمة:

<video width="640" height="360" autoplay loop muted poster="video-thumbnail.jpg" controls>
    <source src="my-video.mp4" type="video/mp4">
    المتصفح حقك ما يدعم تشغيل الفيديوهات.
</video>

أكثر من صيغة فيديو: وسم <source>

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

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    <p>للأسف، متصفحك لا يدعم وسم الفيديو.</p>
</video>

نصيحة: الصيغ الشائعة هي MP4 (H.264)، WebM، و Ogg. MP4 هي الأكثر دعماً.

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

عشان تخلي الفيديوهات حقتك سهلة الوصول للكل (Accessibility)، تقدر تضيف ترجمة أو وصف صوتي باستخدام وسم <track>. هذا يفيد للصم وضعاف السمع، أو اللي يبغون يتابعون بدون صوت.

<video width="640" height="360" controls>
    <source src="my-video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles_ar.vtt" srclang="ar" label="العربية">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
    <p>متصفحك ما يدعم الفيديو.</p>
</video>

الـ kind ممكن يكون subtitles (ترجمة)، captions (شرح للكلام والأصوات)، descriptions (وصف صوتي)، أو chapters (فصول الفيديو).

خلاصة

وبكذا نكون غطينا أساسيات إضافة الفيديوهات لصفحات HTML. استخدم السمات والصيغ المتعددة عشان تضمن أفضل تجربة للمستخدمين. بالتوفيق!