فيديو HTML5: كيفية تضمين الفيديو في HTML الخاص بك

قبل HTML5 ، من أجل تشغيل مقطع فيديو على صفحة ويب ، ستحتاج إلى استخدام مكون إضافي مثل Adobe Flash Player. مع مقدمة HTML5 ، يمكنك الآن وضع مقاطع الفيديو مباشرة في الصفحة نفسها.

هذا يجعل من الممكن تشغيل مقاطع الفيديو على الصفحات المصممة للأجهزة المحمولة ، حيث لا تعمل المكونات الإضافية مثل Adobe Flash Player على Android أو iOS.

يتم استخدام عنصر HTML لتضمين الفيديو في مستندات الويب. قد يحتوي على مصدر فيديو واحد أو أكثر ، يتم تمثيله باستخدام srcالسمة أو العنصر المصدر.

لتضمين ملف فيديو ، ما srcعليك سوى إضافة مقتطف الشفرة هذا وتغيير المسار إلى مسار ملف الفيديو الخاص بك:

   Your browser does not support the video element. Kindly update it to latest version. 

و يتم دعم عنصر قبل جميع المتصفحات الحديثة. ومع ذلك ، لا تدعم جميع المستعرضات تنسيق ملف الفيديو نفسه. تعد ملفات MP4 هي التنسيق الأكثر قبولًا على نطاق واسع ، ويتم دعم التنسيقات الأخرى مثل WebM و Ogg في Chrome و Firefox و Opera.

لضمان تشغيل الفيديو الخاص بك في معظم المتصفحات ، من الأفضل ترميزها في تنسيقات Ogg و MP4 ، وتضمينهما في العنصر كما في المثال أعلاه. سوف تستخدم المستعرضات التنسيق الأول المعترف به.

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

ربما لاحظت أيضًا controlsفي العلامة. يتضمن هذا العنصر الكثير من السمات المفيدة لتخصيص تجربة التشغيل.

السمات

controls

و controlsمقابض السمة سواء الضوابط مثل / زر وقفة اللعب أو حجم المنزلق تظهر.

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

autoplay

يمكن تعيين "التشغيل التلقائي" على صواب أو خطأ. يمكنك تعيينها على true عن طريق إضافتها إلى العلامة ، وإذا لم تكن موجودة في العلامة ، يتم تعيينها على false. إذا تم التعيين على "صواب" ، فسيبدأ تشغيل الفيديو بمجرد تخزين ما يكفي من الفيديو مؤقتًا حتى يتمكن من التشغيل. يجد العديد من الأشخاص أن تشغيل مقاطع الفيديو تلقائيًا مزعج أو مزعج. لذا استخدم هذه الميزة باعتدال. لاحظ أيضًا أن بعض متصفحات الجوال ، مثل Safari لنظام iOS ، تتجاهل هذه السمة.

هذه سمة منطقية أخرى. من خلال التضمين autoplayفي العلامة ، سيبدأ تشغيل الفيديو المضمن بمجرد تخزين ما يكفي منه مؤقتًا.

ضع في اعتبارك أن العديد من الأشخاص يجدون مقاطع الفيديو التي يتم تشغيلها تلقائيًا مزعجة أو مزعجة ، لذا استخدم هذه الميزة باعتدال. لاحظ أيضًا أن بعض متصفحات الجوال مثل Safari لنظام iOS تتجاهل هذه السمة تمامًا.

poster

و posterالسمة هي الصورة التي تظهر على الفيديو حتى ينقر المستخدم لتشغيله.

يمكن أن تكون مقاطع الفيديو باهظة الثمن

في حين أنه من الأسهل أكثر من أي وقت مضى تضمين مقاطع الفيديو على صفحتك ، فمن الأفضل غالبًا تحميل مقاطع الفيديو الخاصة بك إلى خدمة مثل YouTube أو Vimeo أو Wistia وتضمين الكود بدلاً من ذلك. هذا لأن عرض مقاطع الفيديو قد يكون مكلفًا ، سواء بالنسبة لك من حيث تكاليف الخادم أو للمشاهدين إذا كانت لديهم خطط بيانات محدودة.

يمكن أن تؤدي استضافة ملفات الفيديو الخاصة بك أيضًا إلى مشاكل في النطاق الترددي ، مما قد يعني التلعثم في تحميل مقاطع الفيديو البطيئة. علاوة على ذلك ، تميل المتصفحات إلى الاختلاف في الجودة عندما يتعلق الأمر بتشغيل الفيديو ، لذلك من الصعب التحكم في ما سيراه المشاهدون بالضبط. من السهل جدًا أيضًا تنزيل مقاطع الفيديو المضمنة بالعلامة ، لذلك إذا كنت مهتمًا بالقرصنة ، فقد ترغب في البحث عن خيارات أخرى.

ومع ذلك ، انطلق وقم بتضمين مقاطع فيديو لمحتوى قلبك. أم لا - إنها مكالمتك.