Header Ads

عناصر الفيديو في 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 :


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




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


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





يتم التشغيل بواسطة Blogger.