تعلم HTML: ملقات الصوت والفيديو

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

الدرس السابق: تعلم لغة HTML: إدراج الصور
الدرس التالي: تعلم HTML (هتمل): الإسثمارات

الملفات الصوتية

أنماط الصوت

هناك أنماط متعددة وهي كالتالي:

• هناك النمط MP3: ومعروف جدا كما أنه من أقدم الأنماط يتميز بأنه يتوافق مع جميع الأجهزة ولهذا فمازال هو الأكثر إستعمالا.
• وهناك نمط أخر وهوالنمط ACC ويستعمل غالبا من طرف Apple وهو دو جودة عالية.
• هناك أيضا نمط ثالت وهوالنمط OGG وهذا يستعمل بكثرة في البرامج الحرة المصدر وميزته هو أنه حر أي أنه غير محفوظ بأية براءة إختراع.
• وهناك أيضا النمط WAV وهونمط غير مظغوط وأنصحكم ألا تستعملوه كثيرا لأن الصوت في هذا النمط يكون دو حجم كبير.

يجب أن تعلموا أيضا انه ليس هناك نمط تعرفه جميع المتصفحات حيت أن كل نمط يعمل على متصفح دون غيره، فمثلا النمط MP3 يعمل على كل من انترنت اكسبلورر وجوجل كروم و سفاري لكن لا يعمل على كل من فيرفوكس وأوبيرا ونفس الشيء بالنسبة للنمط OGG الذي يعمل على جوجل كروم وفيرفوكس وأوبيرا ولا يعمل على انترنت اكسبلورر وسفاري. لكن رغم ذلك يمكننا أن نتجاوز هذا المشكل عن طريق عرض أنماط مختلفة ليختار منها المتصفح النمط الذي يدعمه.

إدراج ملف صوتي في صفحة ويب

بعد أن تعرفنا على الأنماط التي يمكن أن تكون عليها العناصر الصوتية سنرى الان كيف سنضيفها إلى صفحة ويب. وهذا سهل جدا فيكفي فقط أن نستعمل الوسم <audio> وهو وسم يمكن إستعماله على جميع المتصفحات لأنه يعمل عليها كلها بالإضافة إلى المتصفح إنترنت إكسبلورر ابتداء من الإصدار التاسع.

والكود الكامل الذي يمكننا من إدراج الصوت داخل صفحة الويب فهو هذا:

<audio src="nom_de_fichier.mp3" controls></audio>

كما ترون فهذا جد سهل فيكفي كتابة الوسم audio وأمام src نكتب عنوان الملف الصوتي متبوعا بصيغته وهنا فهو بصيغة mp3 كما يجب ألا ننسى الكلمة الأخيرة controls لأننا إن لم نضيفها فلن يظهر إي شيء على المتصفح.

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

<audio src="nom_de_fichier.mp3" controls>هذا المتصفح قديم المرجو تحديته</audio>

هناك أيضا أمر أخر يجب الإنتباه إليه فكما قلنا فأغلبية المتصفحات إن لم نقل كلها لا تدعم جميع الصيغ التي يمكن ان تكون عليها الملفات الصوتية، والحل هو أن نقوم بإدراج ملفين صوتيين يختلفان فقط في صيغتهما حيت سيقوم المتصفح بتشغيل الملف ذو الصيغة التي يدعمها ويكون الكود كما في المتال التالي:

<audio controls>

<source src="nom_de_fichier.mp3"></source>

<source src="nom_de_fichier.ogg"></source>

</audio>

ملفات الفيديو

أنماط ملفات الفيديو

والان وبعد ان تعرفنا على أنماط الصوت وكيفية إضافته في صفحة ويب، سنتعرف الأن على الأنماط التي يمكن أن يكون عليها ملف فيديو وهي كالتالي:

• النمط المضمن conteneur وهو يمكن إستخدامه لتضمينه النمطين التاليين ويعرف هذا النمط بإمتداده الذي يكون AVI أو MP4 أو MKV...
• كوديك الصوت وهو نمط صوت الفيديو وامتداده يكون MP3 أو AAC أو OGG ...
• كوديك اللفيديو وهو النمط الذي يقوم بظغط صور الفيديو وهذه الانماط تكون معقدة كما لا تكون مجانية دائما ومن أهمها الأنماط التالية:

• H.264: والأكتر إستعمالا لأنه قوي جدا لكن للأسف ليس مجانيا بالكامل.
• Ogg Theora: هذا مجاني وحر ولكن ليس قويا كالأول ولقراءته من الويندوز يجب اولا تثبيت بعض البرامج اما على اللينكس فهو يقرأه دون الحاجة لبرامج.
• WebM: هذا أيضا حر ومجاني وقد طرحته جوجل وهو منافس لH.264.

وكما هو الحال بالنسبة للملفات الصوتية فملفات الفيديو كذالك لا تستطيع أغلب المتصفحات قرأتهاا كلها فإنترنت إكسبلورر متلا يقرأ H.264 وWebM وهذا الأخير يقرأه فقط إن كان الكوديك مثبتا على الحاسوب وجوجل كروم وفيرفوكس يقرأون Ogg Theora وWebM. أما سفاري فيقرأ فقط النمط H.264. وأوبيرا يستطيع قرأءة ألأنماط التلاتة كلها.

ولحل المشكل يجب إدراج الفيديو بأنماط متعددة وللحصو على هذه الانماط لفيديو معين يمكن إستعمال برنامج ما مثل برنامج Miro Video Converter.

إدراج الفيديو في صفحة ويب

لإدراج الفيديو في صفحة ويب نستعمل الوسم <video></video> ويكون الكود الكامل كالتالي:

<video src="nom_de_ficier.webm" controls poster="image.jpg" width="400"></video>

هناك بعض الخصائص التي تحتاج للشرح:

• هناك الخاصية poster وهي لإضافة صورة لتظهر على الفيديو قبل إشتغاله وإن لم تضيفها فإن المتصفح يظهر الصورة الأولى على الفيديو وغالبا ماتكون صورة سوداء.
• تم الخاصية controls وهي لإضافة ألأزرار متل زر التشغيل وزر الإيقاف.
• والخاصية width فهي لتحديد عرض الفيديو

وهناك بعض الخصائص الاخرى التي لا توجد في الكود الأول وهي :

• الخاصية height لتغيير طول الفيديو.
• والخاصية loop ليبدأ الفيديو مرة أخرى بعد أن ينتهي.
• الخاصية autoplay حيت نستعملها لتشغيل الفيديو بمجرد الدخول إلى الصفحة، وأنصحكم بعدم الإفراط في إستعمال هذه الخاصية لانها قد تكون مزعجة.
• وخاصية preload وبها نحدد إن كنا نريد تحميل الفيديو بمجرد الدخول على الصفحة أو لا وتقبل القيم التالية:

• Preload="auto" وبها ندع المتصفح يقرر إذا كان من اللازم تحميل الفيديو أو فقط معلومات عن الفيديو أو لا شيء.
• Preload="metadata" بها يقوم بتحميل معلومات عن الفيديو فقط مثل مدته وأبعاده إلى غير دلك.
• Preload="none" وهنا لايقوم المتصفح بتحميل أي شيء.

يمكننا أيضا هنا إظهار رسالة كما فعلنا مع وسم إضافة ملف صوتي إن كان المتصفح لا يدعم هذا الوسم <video> ويكون الكود كالتالي:

<video src="nom_de_ficier.webm" controls poster="image.jpg" width="400">المرجو ترقية متصفحكم إلى أخر إصدار</video>

وكذالك بما أن أغلب المتصفحات لا تقرأ جميع الأنماط فيجب علينا أن نقوم بإدراج أكتر من نوع ليأخدا المتصفح النمط الذي يقرأه ويكون الكود كالتالي حيت ندرج الوسم <source/> داخل الوسم <video> :

<video controls poster="image.jpg" width="400">

<source src=" nom_de_ficier.webm"/>

<source src=" nom_de_ficier.mp4"/>

<source src=" nom_de_ficier.ogv"/>

</video>

كما تلا حطون فإستعمال هذه الوسوم <video> و<audio> معقد شيئا ما لكن هذا لا يمنع من إستعماله في إنتظار تطويرها لتصبح سهلة. كما أنه بإمكانكم دائما إستعمال إضافة أو plugin مثل flash عوضها.

الدرس السابق: تعلم لغة HTML: إدراج الصور

الدرس التالي: تعلم HTML (هتمل): الإسثمارات