رئيسي الهواتف الذكية إضافة الفيديو إلى موقع الويب الخاص بك مع HTML5

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



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

none

none

كيفية ربط عجلة الفأرة بالقفز 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
إنترنت إكسبلورر 8xx
إنترنت إكسبلورر 9x
ايفون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 (أو بعض المكونات الإضافية الأخرى) في الجزء السفلي بدلاً من عرض رسالة آسف لا يمكنك رؤية رسالة الفيديو هذه ، باستخدام الكود التالي :




data='flvplayer.swf?file=myVideo.flv&autoStart=true'>

'


استنتاج

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

مقالات مثيرة للاهتمام

اختيار المحرر

none
كيفية ضغط الملفات والمجلدات في Windows 10
في هذه المقالة ، سنرى كيفية تمكين ضغط NTFS للملفات والمجلدات. يمكنك ضغط الملفات والمجلدات في Windows 10.
none
موضوع ألوان مترو (شعار ملون) لنظام التشغيل Windows 8
يتميز هذا المظهر بشعار Windows 8 على ألوان لهجة Metro المختلفة الموجودة في Windows 8 RTM. يحتوي على 48 خلفية مختلفة مع شعار Windows 8 الملون. جميع الخلفيات متوفرة بدقة شاشة عريضة (1920 × 1080). جميع الصور التي تم إنشاؤها بواسطة windowswiki. الحجم: 364 كيلو بايت رابط التحميل دعم usWinaero يعتمد بشكل كبير على دعمك.
none
قم بتنزيل Autumn Color in Japan Theme لأنظمة التشغيل Windows 10 و 8 و 7
يتميز موضوع لون الخريف في اليابان بـ 11 صورة عالية الجودة لتزيين سطح المكتب الخاص بك. تم إنشاء حزمة السمات الجميلة هذه في البداية لنظام التشغيل Windows 7 ، ولكن يمكنك استخدامها في أنظمة التشغيل Windows 10 و Windows 7 و Windows 8. تأتي مجموعة ألوان الخريف في اليابان مع الصور المذهلة بدقة Full HD 1920x1080. ال
none
كيفية إعادة ضبط المصنع ومسح جهاز Xbox 360 قبل البيع
إذا كنت ترغب في بيع جهاز Xbox 360 الخاص بك ، فهناك بعض الأشياء التي يجب عليك القيام بها قبل وضع الإعلان. أولاً ، يجب إعادة ضبط وحدة التحكم الخاصة بك على إعدادات المصنع لمسحها نظيفة والعودة إلى إعدادات المصنع. اختياريا ، قد تريد
none
مراجعة Sony SmartWatch 3: رخيصة ولكنها تظهر إلى حد كبير عمرها
كانت Sony Smartwatch 3 من بين المجموعة الأولى من ساعات Android Wear الذكية التي ظهرت في المتاجر وهي الآن تبحث كثيرًا عن عمرها. على الرغم من أنني كنت معجبًا جدًا بمزيج من عمر البطارية اللائق
none
أفضل برنامج تنزيل بكرات من Instagram
لا يوفر Instagram للمستخدمين أداة مضمنة لحفظ البكرات التي يجدونها مثيرة للاهتمام. ترك هذا العديد من المستخدمين يبحثون عن تطبيقات الطرف الثالث التي يمكنهم استخدامها لتنزيل Instagram Reels. في هذه المقالة سوف ننظر في
none
كيفية تنزيل جميع ملفات Android الخاصة بك ومشاهدتها
واحدة من العديد من الجوانب الرائعة في Android هي حقيقة أنه يمكنك الوصول إلى جميع جوانب نظام التشغيل. على عكس iOS ، يمكنك رؤية جميع ملفات النظام والوصول إلى كل ملف ومجلد على الجهاز.