html5 الصوت و الفيديو

html5 video : الفيديو

آخر تحيين: 06-01-2015

CSS3 Modules html5 audio : الصوت


انتهى زمن التخبّط و استعمال المكوّنات الإضافية (plug-in) مثل "flash"لقراءة محتوى الفيديو . قبل html5 ، لم تكن هناك طريقة مُوحّدة لهذا الغرض . إذ يختلف مدى دعم هذه المكونات من متصفّح لآخر . الوسم الجديد <video> . قام بحل هذه الإعاقة ، و أصبح معياراً ، لعرض مُحتوى الفيديو على الويب .

<video width="360" height="260" controls>
  <source src="nature.ogg" type="video/ogg">
  <source src="nature.mp4" type="video/mp4">
  مُتصفّحك لا يأخذ بعين الإعتبار وسم الفيديو
</video>
مشاهدة النتيجة

كما رأينا في وسم الصّوت ، تقوم الصّفة controls بعرض شريط أسفل الفيديو ، لبدأ و إيقاف التشغيل و التحكّم في الصّوت .
تحديد طول و عرض (width, height) الفيديو ، ظروري لحجز مكان له خلال تحميل الصّفحة على المتصفّح .
يمكننا إضافة أكثر من صيغة في وسم source ، إذا كان المتصفّح لا يدعم الصيغة الأولى ، سيمرّ مباشرة لقراءة الصيغة الثانية . بهذا يمكن لزواركم التمكن من مشاهدة الفيديو على أغلب المتصفّحين . كما يمكننا إضافة نص ، كما في مثالنا . حتّى يظهر مكان الفيديو ، في حالة وجدود خطأ ما في قراءة الملف .

نوع الفيديو المستعمل مع كل صيغة

الصيغةالنوع : MIME-type
MP4video/mp4
oggvideo/ogg
WebMvideo/webm

صيغ الفيديو و توافقها مع أهم المتصفّحين

المتصفّحMP4OGGWebM
Google Chrome
Mozilla FireFox
Internet Explorer
Safari
Opera

صفات التحكم في الفيديو

أهم صفات التحكم في الفيديو :

  • width, height : لحجز مكان للفيديو أثناء تحميل الصفحة
  • src : الرّابط المطلق أو النسبي إلى ملف الفيديو
  • controls : عرض شريط أسفل الفيديو ، لبدأ و إيقاف التشغيل كذلك التحكّم في الصّوت .

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

  • autoplay : تشغيل الفيديو تلقائيا . أثناء تحميل الصّفحة
  • loop : إعادة تشغيل الفيديو من جديد كلما انتهت قراءته
  • poster : عرض صورة مكان محتوى الفيديو ، في انتظار تحميل مُكونات الفيديو أو في انتظار بدأ التشغيل . إذا لم نُعيّن هذه الصفة ، غالبا ما يتم عرض أول صورة في محتوى الفيديو .
    قيمة poster هي عبارة عن رابط أو وصلة لملف الصّورة :
    <video poster="images/sky.gif" controls>
  • preload : يعطي المُطوّر إمكانية اختيار الطريقة التي قد يظن أنها مثالية للتعامل مع تحميل الفيديو .
    إذا كنا قد عيّنا مسبقا الصفة autoplay . فالصفة preload سيتم تجاهلها في هذه الحالة
    .لدينا ثلاثة قيم للصفة preload و هي : "none, metadata, auto"

قبل شرح هذه القيم الثلاث . حتّى تتمكّنوا من استيعابها ، لا بأس من إلقاء إطلالة على طريقة تعامل المتصفّح مع ملفات الفيديو :
أثناء تحميل الصّفحة ، عندما يصادف المتصّفح وسم الفيديو ، يجب أن يُقرّر كيف سيتعامل معه :
إذا كنا قد عيّنا صفة autoplay . يبدأ المتصفّح بالقيام بسلسلة من العمليات : إذ يبدأ بتحميل الملف ثم تهييء موارد فك تشفير الفيديو ثم فك شيفرات الصوت و الصّور و مطابقتهما زمنيا ،ثم تخزينها في الذاكرة المؤقتة و الإنطلاق في قراءة ما تمّت معالجته أي قبل أن يتمكن المتصفّح من تحميل الفيديو كاملا . كل هذه العمليات تتطلب وقتا ، حسب سرعة صبيب الأنترنت و الجهاز المستعمل لدى الزائر . لهذا أنصحكم بعدم استعمال هذه الصّفة ، إلا إذا كنتم متأكّدين أن الزّائر حطّ رحاله على صفحتكم لغاية واحدة و هي مشاهدة مُحتوى الفيديو .
ـ إذا لم نعين الصفة autoplay : في هذه الحالة يقوم المتصفح بمعالجة الصورة الأولى فقط . ثم يقوم بقراءتها و يتوقف عند هذا الحد ، مقتصداً بذلك إمكانياته لتسريع تحميل محتوى باقي الصّفحة . إذا أردتم اقتصاد المزيد من الوقت . يمكنكم استعمال الصفة poster . في هذه الحالة ، سيتم الإستغناء حتى عن معالجة الصّورة الأولى ، خاصّة لمستخدمي الأجهزة المحمولة . بدل ذلك سيتم عرض الصّورة التي عيّناها في صفة poster .

كمطوّري مواقع ، يجب أن تكون لدينا معرفة أفضل لتحديد ما هو مناسب لزوارنا . بدل ترك زمام الأمور للمتصفح . باستعمال الصفة preload يمكننا التحكم في طريقة تصرّف المتصفّح مع ملفات الفيديو . و ذلك باستعمال قيمة من القيم الثلاث ، حسب الحاجة :

  • none : يظُنّ المُطور أن الزائر ربّما لن يطّلع على مُحتوى الفيديو . و يضع هذه القيمة لتخفيف تحميل الصّفحة .
    الحالة الأكثر شيوعا ، هي حين يكون لديكم مجموعة من ملفات الفيديو في نفس الصّفحة (gallery) . فالزائر لن يشاهدها كلها . نضع القيمة none لتوفير وقته الثمين . و غالبا ما نضيف الصفة poster . لتفادي و اقتصاد وقت معالجة الصورة الأولى .
    باستعمال القيمة none للصفة preload . لن يتم عرض بعض المعلومات الوصفية لملف الفيديو ، كمُدّته مثلا .
  • metadata : يظن المُطوّر أن المتصفح يجب أن يقوم بتحميل المعلومات الوصفية للملف . كالمُدّة الزمنية للملف . و طريقة فك التشفير . و معالجة الصّورة الأولى و عرضها . ثم يتوقف عند هذا الحد . يمكننا أيضا استعمال هذه القيمة في حالة مثالنا السابق "gallery"
  • auto : يقوم المتصفّح ببدأ تحميل مُحتوى الفيديو كاملا أثناء تحميل الصّفحة .
جميع مُتصفّحي الأنترنت يأخذون بعين الإعتبار الصفة preload باستثناء متصفح Internet Explorer