More

[ دورة HTML5 ] الدرس الرابع – عناصر الفيديو

" Here you can search for everything you want and you will find it as soon as possible "

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


كيف يعمل الفيديو ؟

لإظهار مقاطع الفيديو على صفحات الويب فإنك تحتاج الى هذا الكود كما في المثال :

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
لايدعم متصفحك وسم الفيديو
</video>
اكتب الكود بنفسك


تستخدم اللاحقة control لإضافة التحكم للفيديو مثل التشغيل و الإيقاف و تحديد الصوت .و أيضاً من المهم استخدام الطول و العرض للفيديو . عند تحديد الطول و العرض عندها سيتمكن المتصفح من تحديد مساحة مباشرة للفيديو عند تحميل الصفحة و لكن اذا لم يتم التحديد عندها لن يعلم المتصفح المساحة المطلوبة لتحديدها و سيؤثر ذلك سلباً على هيكلة الموقع .
يجب أيضاً إرفاق نص بين بداية الوسم <video> و نهايته </video> و ذلك من أجل المتصفحات التي لاتدعم وسم الفيديو .
يسمح عنصر <video> بتحديد عناصر متعددة مع <source> . لأن <source> يمكن أن يربط بين ملفات فيديو مختلفة و يتم تشغيل المقطع الذي يتعرف عليه المتصفح .


صيغ الفيديو و المتصفحات الداعمة لها

حالياً يوجد هناك 3 صيغ مدعومة من وسم الفيديو <video> و هي MP4, WebM, Ogg :

المتصفح MP4 WebM Ogg
Internet Explorer 9 نعم لا لا
Firefox 4.0 لا نعم نعم
Google Chrome 6 نعم نعم نعم
Apple Safari 5 نعم لا لا
Opera 10.6 لا نعم نعم

وسوم / وسوم HTML5 الجديدة

الوسم الشرح
<video> تعريف فيلم او فيديو
<source> تحديد مصادر وسائط متعددة مختلفة للعناصر <video>  و  <audio>
<track> تحديد مسارات نصية للعناصر <video>  و  <audio>

Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker