إضافة الفيديو إلى موقع الويب الخاص بك مع HTML5

في أول مدوناته لـ كمبيوتر برو ، مطور ويب إيان ديفلين يكشف عن كيفية تضمين الفيديو في موقع الويب الخاص بك باستخدام HTML5

كيفية ربط عجلة الفأرة بالقفز csgo

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

تقدم العديد من متصفحات الويب بالفعل دعمًا لـ HTML5. سنكشف هنا كيف يمكنك تضمين فيديو بدون مكونات إضافية في موقعك والمشكلات التي ستواجهها.

أنواع الملفات وتوافق المستعرض

بادئ ذي بدء ، سنلقي نظرة بإيجاز على أنواع ملفات الفيديو المختلفة المدعومة في HTML5. هذه هي Theora OGG و H.264 (.mp4). تدعم المتصفحات المختلفة أنواعًا مختلفة ، وبعضها لا يدعم أيًا منها على الإطلاق. الجدول التالي يوضح هذا:

	ثيورا أوغ	H.264 (MP4)
Firefox 3.5+	✓	x
Chrome 3+	✓	✓
Safari 3+	x	✓
Opera 10.5+	✓	x
إنترنت إكسبلورر 8	x	x
إنترنت إكسبلورر 9	x	✓
ايفون	x	✓
ذكري المظهر	x	✓

برامج الترميز والمسائل الفنية الأخرى

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

ثم بالطبع هناك Internet Explorer. في الوقت الحالي ، لا تدعم أي من الإصدارات التي تم إصدارها من Internet Explorer عنصر الفيديو ولا يزال يلزم وجود مكون إضافي لتشغيل الفيديو. سيتغير هذا مع إصدار Internet Explorer 9 (على الأرجح في أوائل العام المقبل) ، عندما يتم دعم H.264 ، جنبًا إلى جنب مع العديد من عناصر HTML5 الجيدة الأخرى.

إذا كنت تتساءل عن كيفية تحويل ملفات الفيديو إلى OGG (يمكنك قراءة المزيد عن نوع Theora OGG في كتاب الطبخ ) باستخدام ملف ميرو فيديو كونفيرتر .

لمزيد من المعلومات المتعمقة حول عنصر الفيديو وبرامج الترميز ، انتقل إلى ملف الغوص في html5: الفيديو على الويب بواسطة مارك بيلجريم.

كود HTML5

ننتقل الآن إلى كود HTML5 الفعلي وكيف يمكننا تشغيل الشيء. يوفر لنا HTML5 عنصرين جديدين يمكننا استخدامهما لإضافة فيديو إلى صفحات الويب الخاصة بنا: الذي ذكرناه بالفعل ، و جزء. دعونا نلقي نظرة على كل من هذه بدورها.

العنصر

يمكن أن يكون لعنصر الفيديو سمات المتابعة:

ينسب	وصف
src	عنوان URL صالح لملف الفيديو نفسه
تشغيل تلقائي	قيمة منطقية تشير إلى ما إذا كان يجب تشغيل الفيديو تلقائيًا
ضوابط	قيمة منطقية تشير إلى أن عناصر التحكم الافتراضية في الوسائط يجب عرضها بواسطة المستعرض
حلقه	قيمة منطقية تشير إلى ما إذا كان يجب تشغيل الفيديو بشكل متكرر
التحميل المسبق	يوضح للمتصفح ما إذا كان التنزيل الوقائي للفيديو نفسه مطلوبًا ، أو إذا كانت البيانات الوصفية وحدها هي كل ما هو مطلوب. القيم الممكنة هي: لا شيء - يشير إلى أن الفيديو لن يتم تحميله مسبقًا (لأنه لن يكون مطلوبًا على الأرجح) البيانات الوصفية - ربما لن يكون الفيديو مطلوبًا ولكن البيانات الوصفية (مثل الأبعاد والمدة) أمر مرغوب فيه تلقائي - يبلغ المتصفح بمحاولة تنزيل الفيديو بأكمله (سلسلة فارغة) - تعني نفس كلمة auto
ملصق	عنوان URL لملف الصورة ليتم عرضه عند عدم توفر بيانات الفيديو
العرض	عرض الفيديو بوحدات البكسل CSS
ارتفاع	ارتفاع الفيديو بوحدات البكسل CSS

من هذا ، يمكن ملاحظة مدى سهولة تضمين مقطع فيديو OGG في موقع الويب الخاص بك باستخدام عنصر الفيديو وحده:

هذا كل ما في الأمر.

يجب الآن على أي متصفح يدعم تنسيق Theora OGG عرض وتشغيل الفيديو الخاص بك بنجاح دون مزيد من اللغط. بالطبع ليس الأمر بهذه السهولة ، لأنه كما رأينا من الجدول أعلاه ، لن تعمل الشفرة إلا في Firefox و Chrome و Opera. لذلك نحن بحاجة إلى الرجوع إلى H.264 أيضًا. يمكن تحقيق ذلك باستخدام ، الذي يسمح لنا بتحديد مصادر وسائط متعددة لعنصر الفيديو.

كيفية التقاط لقطة شاشة على سناب شات دون علمهم بـ iphone

العنصر

يحتوي عنصر المصدر على السمات التالية:

ينسب	وصف
src	عنوان URL صالح لملف الوسائط (في هذه الحالة الفيديو) نفسه
يكتب	نوع ملف الوسائط الذي يجب أن يكون نوع التمثيل الصامت ، على سبيل المثال `type='video/ogg'` يشير إلى أنه فيديو Theora OGG ، ويمكنك أيضًا توفير برنامج ترميز MIME لمساعدة المتصفح في تحديد كيفية تشغيل الفيديو باستخدام `type='video/ogg; codecs='theora, vorbis'`.
نصف	يعطي نوع الوسائط المقصود لمورد الوسائط ويجب أن يكون صالحًا الاستعلام عن الوسائط ، على سبيل المثال `media='handheld'` يشير إلى أن الفيديو مناسب للأجهزة المحمولة أو `media='all and (min-device-height:720px)'` مما يدل على أن الفيديو مناسب للشاشات 720 بكسل أو أكثر.

ملاحظة: أن العنصر المصدر باطل وله علامة بداية ولكن ليس له علامة إغلاق

الشيء الأكثر فائدة حول العنصر المصدر هو أنه يمكننا استخدامه لتكديس أنواع الملفات المختلفة ، مما يسمح للمتصفح بتجربة كل منها على حدة حتى يجد واحدًا يمكنه تشغيله.

باستخدام ومعا

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

Your browser does not support the video element.

سيعمل الكود أعلاه الآن في جميع المتصفحات باستثناء Internet Explorer ، والذي سيعرض الرسالة المشار إليها أعلاه.

يمكنك اختبار ذلك بنفسك من خلال عرض صفحة فيديو اختبار HTML5 ، والتي تحتوي على نموذج فيديو لفراشة بتنسيق Theora OGG و MP4 ، لذلك إذا كنت تشاهد هذا في Firefox أو Chrome أو Safari أو Opera أو على iPhone أو هاتف Android ، يجب أن تكون قادرًا على مشاهدته.

ستلاحظ الآن السكاكين الحادة بينك أنه يمكننا الاستفادة من هذا التكديس والحصول على نسخة احتياطية من Flash (أو بعض المكونات الإضافية الأخرى) في الجزء السفلي بدلاً من عرض رسالة آسف لا يمكنك رؤية رسالة الفيديو هذه ، باستخدام الكود التالي :