دورة HTML5 الدرس 03: عناصر الفيديو في HTML5

دورة HTML5 الدرس 3 : عناصر الفيديو في HTML5

- عناصر الفيديو في HTML5

ان جميع المتصفحات الحديثة تعرض مقاطع الفيديو في مواقعها و لهذا تقدم 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>