استخدام HTML5 لعرض الفيديو في المتصفحات الحالية

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

• استضافة فيديو HTML5 الخاص بك مقابل استخدام YouTube
• نظرة سريعة على دعم الفيديو على الويب
• إنشاء وتحرير الفيديو الخاص بك
• تحويل الفيديو إلى Ogg لفايرفوكس
• تحويل الفيديو إلى MP4 ل Safari
• تحويل الفيديو إلى FLV لبرنامج Internet Explorer
• أضف عنصر الفيديو إلى صفحة الويب الخاصة بك
• أضف JavaScript و Flash Player للحصول على Internet Explorer للعمل
• اختبار في العديد من المتصفحات بقدر ما تستطيع

01 من 10

استضافة فيديو HTML 5 الخاص بك مقابل استخدام يوتيوب

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

ولكن استخدام YouTube لتضمين مقاطع الفيديو الخاصة بك لديه بعض العوائق

معظم مشاكل YouTube على جانب المستهلك ، وليس على جانب المصمم ، مثل:

• البحث بطيئة والفهرسة
• انقطاع الخادم
• تتم إزالة المحتوى (على ما يبدو) بشكل تعسفي
• محتوى سيئ للغاية

ولكن هناك بعض الأسباب التي تجعل YouTube يضر بمطوري المحتوى أيضًا ، بما في ذلك:

• 10 دقائق كحد أقصى لمقاطع الفيديو (للحسابات المجانية)
• ضعف أداء التحميل
• يكتسب YouTube حقوق استخدام غير محدودة في الفيديو الخاص بك
• يحصل أي مستخدم يوتيوب على حقوق استخدام غير محدودة على الفيديو الخاص بك

فيديو HTML5 يعطي بعض المزايا على موقع يوتيوب

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

بالطبع ، يقدم فيديو HTML5 بعض العوائق

وتشمل هذه:

• يجب عليك ترميز الفيديو الخاص بك في ثلاثة برامج ترميز مختلفة على الأقل
• يجب عليك تضمين بعض JavaScript لضمان عمل المتصفحات التي لا تدعم HTML5
• يجب أن يكون خادمك قادرًا على التعامل مع متطلبات النطاق الترددي لاستضافة مقاطع الفيديو

مواصلة القراءة أدناه

02 من 10

نظرة سريعة على دعم الفيديو على الويب

لطالما كانت إضافة الفيديو إلى صفحات الويب عملية صعبة. كان هناك الكثير من الأشياء التي يمكن أن تسوء:

• أولا ، يمكنك استخدام علامة لتضمين الفيديو في صفحتك. لكن هذه العلامة تم إيقافها لصالح علامة أخرى. وبعض المتصفحات لم تدعمها جيدًا على أي حال.
• حتى تقوم بالتبديل إلى ، إلا أن المتصفحات القديمة لا تدعمها ، كما أن المتصفحات الجديدة غير واضحة في دعمها.
• ثم تعتقد أن فلاش! وترميز الفيديو الخاص بك كملف FLV. لكن Flash غير مدعوم على العديد من الأجهزة المحمولة والكثير من الناس يكرهون Flash بغض النظر عن كيفية استخدامه (25٪ من المشاركين في استطلاع رأيهم يسألون عن شعورك حول Flash ذكروا أنهم لا يستطيعون تحمل Flash بأي شكل).
• لذلك قررت أن تحمّل مقطع الفيديو الخاص بك إلى موقع لتضمين الفيديو مثل YouTube ، ولكنك تواجه مشكلات YouTube التي ناقشناها.
• أخيرًا ، قررت الانتقال إلى HTML5 ، ولكن لا يدعمه Internet Explorer (وليس حتى Internet Explorer 9). وحتى إذا قمت بذلك ، فهناك مقياسين للفيديو ترميز مدعومين ومتصفح واحد فقط يمكنه استخدام كليهما. دعم المستعرض لبرامج ترميز الفيديو وحاويات

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

ستقوم الصفحات التالية من هذه المقالة بخطوتك في كيفية إضافة الفيديو إلى صفحات الويب الخاصة بك التي تعمل في Firefox 3.5 و Opera 10.5 و Chrome 3.0 و Safari 3 و 4 و iPhone و Android و Flash و Internet Explorer 7 و 8. لديك أيضًا المفاتيح التي تحتاج إليها لإضافة دعم للمتصفحات القديمة الأخرى إذا لزم الأمر.

مواصلة القراءة أدناه

03 من 10

إنشاء وتحرير الفيديو الخاص بك

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

• مشاريع الفيديو العائلية
• فيديو التسويق والترويج
• جولات الفيديو الافتراضية
• كيف فيديو
• فيديو الزفاف

تعلم كيفية تسجيل فيديو عالي الجودة

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

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

تحرير الفيديو الخاص بك

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

حفظ الفيديو الخاص بك إلى MOV أو AVI (أو MPG ، CD ، DV)

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

04 من 10

تحويل الفيديو إلى Ogg لفايرفوكس

الصيغة الأولى التي سنحولها إلى Ogg (تسمى أحيانًا Ogg-Theora). هذا التنسيق هو الإصدار الذي يمكن لجميع مستخدمي Firefox 3.5 و Opera 10.5 و Chrome 3 عرضه.

لسوء الحظ ، بينما يدعم Ogg متصفحًا ، فإن العديد من برامج الفيديو المعروفة التي يمكنك شراؤها (Adobe Media Encoder و QuickTime وما إلى ذلك) لا تقدم خيار تحويل Ogg. لذلك فإن الطريقة الوحيدة لتحويل الفيديو إلى Ogg هي العثور على برنامج تحويل على الويب.

خيارات التحويل

هناك أداة على الإنترنت تسمى Media-Convert تدعي تحويل صيغ مختلفة من الفيديو (والصوت) إلى تنسيقات فيديو (وصوتية) أخرى. عندما حاولنا ذلك من خلال الفيديو التجريبي لمدة 3 ثوانٍ ، لم نتمكن من تشغيله على جهاز Mac. ولكن قد يكون لديك حظًا أفضل. هذا الموقع لديه ميزة كونه مجاني.

بعض الأدوات الأخرى التي وجدناها تشمل:

• محول الفيديو Miro (Windows Macintosh) - يتمتع هذا البرنامج بمزايا التحويل إلى كل من Ogg و MP4 (H.264) وهو مفتوح المصدر.
• محول الفيديو Koyote (نظام التشغيل Windows)
• Free Video Converter نعتقد أن هذا يحتوي على إصدار Windows و Macintosh ، ولكن كان من الصعب معرفة ذلك من موقعهم
• بسيطة Theora Encoder (ماكنتوش) - وهذا هو واحد نميل إلى استخدامها.

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

مواصلة القراءة أدناه

05 من 10

تحويل الفيديو إلى MP4 ل Safari

التنسيق التالي الذي يجب عليك تحويل الفيديو إليه هو MP4 (فيديو H.264) بحيث يمكن تشغيله على Safari 3 و 4 و iPhone و Android. بالإضافة إلى ذلك ، يمكن تحويل ملفات الفيديو H.264 بسهولة إلى ملفات FLV للمشاهدة على Flash.

يتوفر هذا التنسيق بسهولة أكبر في المنتجات التجارية ، وربما يكون لديك بالفعل برنامج سيتحول إلى MP4 إذا كان لديك محرر فيديو. إذا كان لديك برنامج Adobe Premiere ، يمكنك استخدام Adobe Video Encoder ، أو إذا كان لديك QuickTime Pro الذي سيعمل كذلك. العديد من المحولات التي ناقشناها في الصفحة السابقة ستحول أيضًا مقاطع الفيديو إلى MP4.

• MediaConvert - أداة AWS على الإنترنت.
• محول الفيديو Miro (Windows Macintosh) - يتمتع هذا البرنامج بمزايا التحويل إلى كل من Ogg و MP4 (H.264) وهو مفتوح المصدر.
• سوبر (ويندوز) - سوف تحويل العديد من أنواع الملفات المختلفة إلى MP4 و FLV
• Free Video Converter نعتقد أن هذا يحتوي على إصدار Windows و Macintosh ، ولكن كان من الصعب معرفة ذلك من موقعهم.

قم بحفظ ملف MP4 الخاص بك إلى موقع الويب الخاص بك ، ثم ستحتاج إلى تحويله إلى Flash لاستخدامه في Internet Explorer.

06 من 10

تحويل الفيديو إلى FLV لبرنامج Internet Explorer

أسهل طريقة لتحويل مقاطع الفيديو إلى FLV هي استخدام Flash نفسه. هذه هي الطريقة التي نقوم بتحويل مقاطع الفيديو الخاصة بي إلى Flash. ولكن إذا لم يكن لديك Flash ، فإليك نوعان من الأدوات الشائعة لتحويل الملفات إلى FLV:

• سوبر (ويندوز) - سوف تحويل العديد من أنواع الملفات المختلفة إلى MP4 و FLV
• ffmpegX (Macintosh) - سيقوم بتحويل العديد من أنواع الملفات المختلفة إلى Mp4 و FLV.

قم بحفظ ملف FLV الخاص بك إلى موقع الويب الخاص بك وسوف تعرض لك الصفحة التالية كيفية كتابة HTML بحيث يمكنك تشغيل ملفات الفيديو الخاصة بك.

مواصلة القراءة أدناه

07 من 10

أضف عنصر الفيديو إلى صفحة الويب الخاصة بك

من السهل جدًا استخدام HTML 5 لإضافة الفيديو إلى صفحات الويب. معظم المتصفحات الحديثة تدعم فيديو HTML 5 ، على الرغم من أنها لا تدعمها كلها بنفس الطريقة. لكن ما يعنيه هذا هو أنه إذا قمت بحفظ الفيديو الخاص بك بتنسيق Ogg و MP4 ، فستتمكن من كتابة أربعة أو خمسة أسطر فقط من HTML لعرضه في معظم المتصفحات الحديثة (باستثناء Internet Explorer 8). إليك الطريقة:

اكتب علامة مبدئيًا بتنسيق HTML 5 بحيث تتوقع المتصفحات أن يكون HTML 5:

1. قم بإنشاء صفحة الويب الخاصة بك كما تفعل عادةً:

2. داخل الجسم ، ضع
3. حدد السمات التي ترغب في امتلاكها للفيديو: نوصي باستخدام عناصر التحكم والتحميل المسبق. استخدم خيار الملصق إذا لم يكن الفيديو الخاص بك يحتوي على مشهد أول جيد.
   1. التشغيل التلقائي - للبدء بمجرد تنزيله
   2. عناصر التحكم - السماح للقراء بالتحكم في الفيديو (إيقاف مؤقت ، إرجاع ، تقديم سريع)
   3. حلقة - ابدأ الفيديو من البداية عند نهايته
   4. التحميل المسبق - التحميل المسبق للفيديو حتى يكون جاهزًا بشكل أسرع عندما ينقر عليه العميل
   5. ملصق - حدد الصورة التي تريد استخدامها عند إيقاف الفيديو
4. ثم قم بإضافة الملفات المصدر للنسختين من الفيديو الخاص بك (MP4 و OGG) داخل
5. افتح الصفحة في Chrome 1 و Firefox 3.5 و Opera 10 و / أو Safari 4 وتأكد من عرضها بشكل صحيح. يجب عليك اختباره على الأقل في فايرفوكس 3.5 وسفاري 4 - حيث يستخدم كل منهما برنامج ترميز مختلف.

هذا هو. بمجرد وجود هذا الرمز ، سيكون لديك فيديو يعمل في Firefox 3.5 و Safari 4 و Opera 10 و Chrome 1. ولكن ماذا عن Internet Explorer؟

Internet Explorer لا يحب HTML 5 أو

في القسم التالي ، سنتحدث عما يمكنك القيام به للحصول على IE 8 للعب بشكل رائع مع علامات الفيديو الخاصة بـ HTML 5 وعرض الفيديو. عليك استخدام الفلاش.الخبر السار هو أن IE 9 من المتوقع أن يدعم HTML 5 وعلامة الفيديو.

08 من 10

أضف JavaScript و Flash Player للحصول على Internet Explorer للعمل

ربما لاحظت أنه في HTML للصفحة السابقة ، لم يكن هناك خط مصدر لملف FLV. وإذا قمت باختبار تلك الصفحة في Internet Explorer فلن تعمل. ذلك لأن Internet Explorer لا يتعرف على HTML 5 ولا يمكنه تشغيل ملفات الفيديو OGG أو MP4 أصلاً. لكي تتمكن من تشغيل Internet Explorer 7 و 8 ، يلزمك تشغيل الفيديو كـ Flash. ولكن هناك المزيد من الخطوات لجعله يعمل أكثر من مجرد إضافة ملف FLV.

الخطوة 1: احصل على مشغل فيديو فلاش لموقع الويب الخاص بك

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

اتبع الإرشادات على موقع FlowPlayer لتثبيت FlowPlayer على موقع الويب الخاص بك. باختصار ، ستقوم بتثبيت ملفين SWF وملف JavaScript على موقعك. في الجزء السفلي من HTML الخاص بك ، (قبل العلامة) ستقوم بإضافة سطر:

ولكن لا يزال Internet Explorer لا يقوم بتشغيل الفيديو ، يجب عليك تعليمه كيفية التعرف على علامات HTML 5.

الخطوة 2: إقناع Internet Explorer بقراءة علامات HTML 5

هناك برنامج نصي مفيد على Google Code يُطلق عليه "HTML Shiv" والذي سيساعد IE في التعرف على عناصر HTML 5. حتى في من مستند HTML الخاص بك الذي تريد الرجوع إليه. من الأفضل إرفاقه في التعليقات المشروطة لـ IE بحيث لا يتم الخلط بين المتصفحات الأخرى:

حسنا ، الآن سوف التعرف على IE

الخطوة 3: إضافة خط مصدر لملف FLV

مثلما فعلت في الصفحة السابقة ، ستقوم بإضافة سطر إلى HTML 5 الخاص بك داخل

مواصلة القراءة أدناه

09 من 10

أضف JavaScript و Flash Player للحصول على Internet Explorer للعمل - الجزء الثاني

للأسف ، ما زلنا لم نفعل. يجب علينا الآن إخبار IE باستخدام مشغل فيديو FlowPlayer Flash الذي أشرنا إليه أعلاه.

الخطوة 4: تحويل

لهذا ، نحن بحاجة إلى برنامج نصي آخر. لقد حصلنا على النص من Dive Into HTML 5. ولكن عندما اختبرناه ، لم ينجح ذلك إلا بعد إجراء بعض التعديلات:

• حول الخط 31: إضافة موقع تثبيت FlowPlayer الخاص بك.
• حول الخط 42: قم بتغيير نوع الملف من الفيديو / mp4 إلى الفيديو / x-flv
• حول الخط 94: يبدأ بـ (!! $ && !! $ (مستند). ready) {في نهاية المستند ، قم بتغيير هذا المقطع ليصبح كالتالي:

  // if (!! $ && !! $ (document) .ready) {/ * يمكن للمستخدمين jQuery التهيئة بمجرد أن يكون DOM جاهزًا * /// $ (document) .ready (html5_video_init)؛//} آخر {/ * يمكن لأي شخص آخر الانتظار حتى التحميل * // * الوظيفة addEvent عبر http://www.ilfilosofo.com/blog/2008/04/14/addevent- محفز- هذا / * /var addEvent = function (obj، type، fn) {إذا (obj.addEventListener)obj.addEventListener (type، fn، false)؛آخر إذا (obj.attachEvent)obj.attachEvent ('on' + type، function () {return fn.apply (obj، New Array (window.event))؛)؛}addEvent (نافذة ، "load" ، html5_video_init)؛//}

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

يا للعجب! الآن بعد أن فعلت كل ذلك ، يجب عليك تحميل HTML الخاص بك حتى تتمكن من البدء في الاختبار.

10 من 10

اختبار في العديد من المتصفحات بقدر ما تستطيع

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

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

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

• فايرفوكس 3.5
• سفاري 3 أو 4
• Internet Explorer 7 أو 8

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

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

الحصول على فيديو يعمل في المتصفحات القديمة

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

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