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

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

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

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

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

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

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

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

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

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

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

وتشمل هذه:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قم بتحويل الفيديو إلى Ogg لمتصفح Firefox

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

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

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

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

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

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

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

قم بتحويل الفيديو إلى MP4 لمتصفح Safari و Internet Explorer

التنسيق التالي الذي يجب تحويل الفيديو إليه هو MP4 (فيديو H.264) بحيث يمكن تشغيله على Internet Explorer 9 والإصدارات الأحدث ، و Safari 3 و 4 ، و iPhone و Android.

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

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

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

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

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

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

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

اكتب محدد نوع HTML 5 بحيث تعرف المتصفحات أنها تتوقع HTML 5:

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

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

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

اختبر في أكبر عدد ممكن من المتصفحات

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

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

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

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

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

تشغيل الفيديو في المتصفحات القديمة

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

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