تسهل علامة الفيديو بتنسيق HTML 5 إضافة الفيديو إلى صفحات الويب الخاصة بك. ولكن بينما يبدو الأمر سهلاً على السطح ، فهناك الكثير من الأشياء التي تحتاج إلى القيام بها لتشغيل الفيديو الخاص بك. سوف يأخذك هذا البرنامج التعليمي من خلال الخطوات اللازمة لإنشاء صفحة في HTML 5 تعمل على تشغيل الفيديو في جميع المتصفحات الحديثة.
- استضافة فيديو HTML 5 الخاص بك مقابل استخدام يوتيوب
- نظرة سريعة على دعم الفيديو على الويب
- إنشاء وتحرير الفيديو الخاص بك
- تحويل الفيديو إلى Ogg لفايرفوكس
- تحويل الفيديو إلى MP4 ل Safari
- تحويل الفيديو إلى FLV لبرنامج Internet Explorer
- أضف عنصر الفيديو إلى صفحة الويب الخاصة بك
- أضف JavaScript و Flash Player للحصول على Internet Explorer للعمل الجزء الأول
- اختبار في العديد من المتصفحات بقدر ما تستطيع
01 من 10
استضافة فيديو HTML 5 الخاص بك مقابل استخدام يوتيوب
موقع YouTube هو موقع رائع. يجعل من السهل تضمين الفيديو في صفحات الويب بسرعة ، ومع بعض الاستثناءات الطفيفة ، فإنه يتم بشكل سلس في تنفيذ مقاطع الفيديو هذه. إذا نشرت فيديو على YouTube ، يمكنك أن تكون واثقًا إلى حد ما من أن أي شخص سيكون قادرًا على مشاهدته.
ولكن استخدام YouTube لتضمين مقاطع الفيديو الخاصة بك لديه بعض العوائق
معظم مشاكل YouTube على جانب المستهلك ، وليس على جانب المصمم ، مثل:
- البحث بطيئة والفهرسة
- انقطاع الخادم
- تتم إزالة المحتوى (على ما يبدو) بشكل تعسفي
- محتوى سيئ للغاية
ولكن هناك بعض الأسباب التي تجعل YouTube يضر بمطوري المحتوى أيضًا ، بما في ذلك:
- 10 دقائق كحد أقصى لمقاطع الفيديو (للحسابات المجانية)
- ضعف أداء التحميل
- يكتسب YouTube حقوق استخدام غير محدودة في الفيديو الخاص بك
- يحصل أي مستخدم يوتيوب على حقوق استخدام غير محدودة على الفيديو الخاص بك
يوفر HTML 5 Video بعض المزايا على YouTube
يتيح لك استخدام HTML 5 للفيديو التحكم في كل جانب من جوانب الفيديو ، ومن يمكنه مشاهدة ذلك ، ومدة ظهوره ، ومحتوى المحتوى ، ومكان الاستضافة ، وكيفية أداء الخادم. يمنحك فيديو HTML 5 الفرصة لترميز الفيديو الخاص بك بأشكال كثيرة كما تريد للتأكد من أن الحد الأقصى لعدد الأشخاص يمكنهم مشاهدته. لا يحتاج عملاؤك إلى مكون إضافي أو الانتظار حتى يصدر YouTube إصدارًا أحدث.
بالطبع ، يقدم HTML 5 Video بعض العوائق
وتشمل هذه:
- يجب عليك ترميز الفيديو الخاص بك في ثلاثة برامج ترميز مختلفة على الأقل
- يجب عليك تضمين بعض JavaScript لضمان عمل المتصفحات التي لا تدعم HTML 5
- يجب أن يكون خادمك قادرًا على التعامل مع متطلبات النطاق الترددي لاستضافة مقاطع الفيديو
02 من 10
نظرة سريعة على دعم الفيديو على الويب
لطالما كانت إضافة الفيديو إلى صفحات الويب عملية صعبة. كان هناك الكثير من الأشياء التي يمكن أن تسوء:
- أولاً ، تستخدم العلامة
- لذا يمكنك التبديل إلى العلامة
- ثم تعتقد " فلاش !" وترميز الفيديو الخاص بك كملف FLV. لكن Flash غير مدعوم على العديد من الأجهزة المحمولة والكثير من الناس يكرهون Flash بغض النظر عن كيفية استخدامه (25٪ من المشاركين في استطلاع رأيهم يسألون عن شعورك حول Flash ذكروا أنهم لا يستطيعون تحمل Flash بأي شكل).
- لذلك قررت أن تحمّل مقطع الفيديو الخاص بك إلى موقع لتضمين الفيديو مثل YouTube ، ولكنك تواجه مشكلات YouTube التي ناقشناها.
- أخيرًا ، قررت الانتقال باستخدام HTML 5 ، ولكن لا يدعمه 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.
- Media-Convert - أداة على الإنترنت
- محول الفيديو 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:
- قم بإنشاء صفحة الويب الخاصة بك كما تفعل عادةً:
<رئيس>
title>
head>
body>
HTML> - داخل الجسم ، ضع علامة
- حدد السمات التي تريد أن يكون الفيديو الخاص بك بها:
- التشغيل التلقائي - للبدء بمجرد تنزيله
- عناصر التحكم - السماح للقراء بالتحكم في الفيديو (إيقاف مؤقت ، إرجاع ، تقديم سريع)
- حلقة - ابدأ الفيديو من البداية عند نهايته
- التحميل المسبق - التحميل المسبق للفيديو حتى يكون جاهزًا بشكل أسرع عندما ينقر عليه العميل
- ملصق - حدد الصورة التي تريد استخدامها عند إيقاف الفيديو
- ثم أضف الملفات المصدر لنسختين من الفيديو الخاص بك (MP4 و OGG) داخل عنصر
- افتح الصفحة في 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 ، (قبل علامة body>) ، ستضيف سطرًا: