يمكن تشغيل الفيديو في صفحات HTML من خلال طرق كثيرة مختلفة .
تشغيل الفيديو في صفحات HTML
مثال
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video>
مشاكل وحلول
ليس من السهل عرض الفيديو في صفحات HTML .
يجب ادخال الكثير من الحيل للتأكد أن الفيديو يعمل بشكل جيد في جميع المتصفحات (انترنت اكسبلورر , كروم , فاير فوكس , اوبرا , سفاري) وعلى جميع الأجهزة (الحاسوب , الماك , آي باد , آي باد) .
في هذا الدرس سيتم اختصار المشاكل والحلول .
وسم <embed>
ان الهدف من وسم <embed> هو ادراج عناصر وسائط متعددة في صفحات HTML .
في المثال التالي سيظهر ملف فلاش مدرج في صفحة الويب .
مثال
<embed src="intro.swf" height="200" width="200"/>
المشاكل
- يعتبر الوسم <embed> غير معروف في HTML4 ولن يظهر الفيديو بشكل صحيح .
- ان كان المتصفح لايدعم الفلاش , لن يعمل الفلاش لديك .
- لايمكن لأجهزة iPhone و iPad تشغيل ملفات الفيديو .
- ان قمت بتغير صيغة الفيديو الى صيغة أخرى عندها لن يعمل الفيديو على جميع المتصفحات .
استخدام وسم <object>
ان الهدف من وسم <object> هو ادراج عناصر وسائط متعددة في صفحات HTML .
في المثال التالي سيظهر ملف فلاش مدرج في صفحة الويب .
مثال
<object data="intro.swf" height="200" width="200"/>
المشاكل
- ان كان المتصفح لايدعم الفلاش , لن يعمل الفلاش لديك .
- لايمكن لأجهزة iPhone و iPad تشغيل ملفات الفيديو .
- ان قمت بتغير صيغة الفيديو الى صيغة أخرى عندها لن يعمل الفيديو على جميع المتصفحات .
استخدام وسم <video>
يعتبر وسم <video> جديد في HTML5 .
ان الهدف من وسم <video> هو ادراج عناصر فيديو في صفحات HTML .
في المثال التالي سيظهر ملف فيديو بصيع ogg , mp4 أو webm مدرج في صفحة الويب .
مثال
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>
المشاكل
- يجب تحويل ملفات الفيديو الى العديد من الصيغ المختلفة .
- لايعمل وسم <video> على المتصفحات القديمة .
- ان وسم <video> غير فعال مع HTML4 و XHTML .
أفضل حل باستخدام HTML
يمكن استخدام HTML5 + <object> + <embed>
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> متصفحك لايدعم الفيديو </embed> </object> </video>
يستخدم المثال السابق 4 صيغ مختلفة لملف الفيديو . تحاول عناصر <video> تشغيل الفيديو في صيغ mp4 و ogg أو webm . ان فشلت هذه المحاولات سينتقل الكود ليجرب طريقة أخرى في تشغيل الفيديو باستخدام الوسم <object> . وان فشلت هذه الطريقة سينتقل الكود لتجريب طريقة أخرى وهي <embed> .
المشاكل
- يجب تحويل ملفات الفيديو الى العديد من الصيغ المختلفة .
- لايعمل وسم <video> على المتصفحات القديمة .
- ان وسم <video> غير فعال مع HTML4 و XHTML .
ملاحظة : استخدام <!DOCTYPE html> سيحل الكثير من المشاكل حيث يتحقق اذا كان الكود فعال ام لا .
الحل مع يوتيوب youtube
تعتبر اسهل طريقة لادراج الفيديو في صفحة الويب هي استخدام Youtube يوتيوب (سيتم دراستها في الدرس القادم) .
استخدام الرابط التشعبي
اذا كانت الصفحة تحتوي على رابط تشعبي لملف وسائط فإن أغلب ستستخدم تطبيقات مساعدة لتشغيل ملف الفيديو .
يظهر المثال التالي رابط تشعبي لملف فلاش . ان تم الضغط على الرابط سيستخدم المتصفح تطبيقات مساعدة مثل مشغل ويندز Windows Media Player لتشغيل ملف AVI
مثال
<a href="intro.swf">قم بتشغيل ملف الفيديو</a>
ملاحظة عن فيديو داخلي
عند ادراج فيديو في صفحة الويب (أي ملف فيديو يعمل عند فتح صفحة الويب) ويسمى ملف فيديو داخلي .
ان أردت استخدام الفيديو في صفحات الويب لديك كن حذراً لأن أكثر الناس لايرغبون بفتح الفيديو مع صفحة الويب لأنه سيكون مزعجاً لهم لهذا من الأفضل ترك خيارات للمستخدم لاغلاق أو ايقاف الفيديو .
أفضل طريقة وكنصيحة منا استخدام الفيديو الداخلي عند توقع المستخدم بأن هناك ملف فيديو سيعرض عند الضغط على صفحة معينة .
ليست هناك تعليقات:
إرسال تعليق