تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: إثراء موقعك مع الفيديو والصوت


الصفحة السابقة

منذ وصول Youtube و Dailymotion ، أصبح من المعتاد اليوم مشاهدة مقاطع الفيديو على مواقع الويب. يجب أن يقال إن وصول انتلانت الى التدفق السريع ساعد في جعل الفيديو على الويب في المتناول.

ومع ذلك ، لا توجد علامة HTML سمحت مسبقًا لاضافة الفيديو. كان عليك استخدام مكون إضافي ، مثل Flash. لا يزال يستخدم هذا الجزء جزئيًا لمشاهدة مقاطع الفيديو على Youtube و Dailymotion و Vimeo وأماكن أخرى. لكن استخدام مكون إضافي له العديد من العيوب: يعتمد على أولئك الذين يديرون المكون الإضافي ( في هذه الحالة ، شركة Adobe ، التي لديها Flash ) ، لا يمكننا دائمًا التحكم في تشغيله ، فهناك عيوب أمنية في بعض الأحيان ... في النهاية ، انها ثقيلة جدا.

لهذا السبب تم إنشاء علامتين قياسيتين جديدتين في HTML5:
  • <audio>
  • <video>

تنسيقات الصوت والفيديو


عندما عرضت لك الصور والعلامة <img />، بدأت بجولة سريعة لتنسيقات الصور المختلفة JPEG ، PNG ، GIF ، إلخ. بالنسبة للفيديو والصوت ، سأفعل نفس الشيء ... لكنه أكثر تعقيدًا.

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

تنسيقات الصوت

لتشغيل الموسيقى أو أي صوت ، هناك العديد من التنسيقات. يتم ضغط معظمها ( مثل صور JPEG و PNG و GIF ) مما يسمح بتقليل وزنها:

  • MP3 : لا يمكنك سماع ذلك! هذا هو واحد من الأقدم ، ولكنه أيضًا واحد من أكثرها توافقًا (يمكن لجميع الأجهزة قراءة MP3 )، لذلك لا يزال يستخدم على نطاق واسع حتى اليوم.
  • AAC : تستخدمه Apple في الغالب على iTunes ، إنه تنسيق جيد النوعية. يمكن لأجهزة iPod وأجهزة iPhone وأجهزة iPad الأخرى قراءتها دون أي مشكلة.
  • OGG : تنسيق Ogg Vorbis شائع جدًا في عالم البرمجيات الحرة ، وخاصة في Linux . يتمتع هذا التنسيق بميزة الحرية ، بمعنى أنه غير محمي بأي براءة اختراع.
  • WAV ( تنسيق غير مضغوط) : تجنب استخدامه قدر الإمكان لأن الملف كبير جدًا بهذا التنسيق. انها تشبه قليلا صورة نقطية (BMP) للصوت.

يعتمد التوافق على المتصفحات ، لكنه يتحرك في الاتجاه الصحيح بمرور الوقت. تذكر التحقق من Caniuse.com لمعرفة التوافق الحالي لملفات MP3 و AAC و OGG و WAV ...

صيغ الفيديو

تخزين الفيديو هو أكثر تعقيدا بكثير. نحتاج إلى ثلاثة عناصر:

  • تنسيق الحاوية : يشبه إلى حد ما مربع يعمل على احتواء العنصرين أدناه. نعترف عمومًا بنوع الحاوية في امتداد الملف: AVI ، MP4 ، MKV ...
  • برنامج ترميز صوتي : هذا هو تنسيق صوت الفيديو ، وعادةً ما يكون مضغوطًا. لقد رأيناهم للتو ، ونستخدم نفسهم: MP3 ، AAC ، OGG ...
  • برنامج ترميز الفيديو : هذا هو التنسيق الذي سيضغط الصور. هذا هو المكان الذي تصبح فيه الأمور صعبة ، لأن هذه التنسيقات معقدة ولا يمكننا استخدامها دائمًا مجانًا. أهم ما يجب معرفته عن الويب:
    • H.264 : واحدة من أقوى وأكثر استخدامات اليوم ... ولكنها ليست مجانية بنسبة 100 ٪. في الواقع ، يمكن استخدامها مجانًا في بعض الحالات (مثل دفق مقاطع الفيديو على موقع ويب شخصي) ، ولكن هناك حالة عدم يقين قانونية تجعل استخدام هذا الملف محفوفًا بالمخاطر.
    • Ogg Theora : برنامج ترميز مجاني وخالي من الملوك ، ولكنه أقل قوة من H.264. يتم التعرف عليه بشكل جيد في نظام Linux ولكن ضمن Windows ، من الضروري تثبيت البرامج لتتمكن من قراءتها.
    • WebM : برنامج ترميز مجاني. التي تقدمها Google ، فهي أخطر منافس لـ H.264 في الوقت الحالي.

مرة أخرى ، شاهد التوافق H.264 : ، Ogg Theora ، WebM ... على Caniuse.com يبدو تنسيق H.264 بارزًا . لا يزال من المستحسن ، إذا أمكن ، تقديم كل فيديو بتنسيقات متعددة بحيث يكون قابلاً للقراءة على أقصى عدد من المتصفحات.

لتحويل مقطع فيديو بهذه التنسيقات المختلفة ، أوصي باستخدام البرنامج المجاني الرائع Miro Video Converter .

ما عليك سوى سحب وإفلات الفيديو الخاص بك في نافذة البرنامج وتحديد تنسيق الإخراج المطلوب. سيتيح لك ذلك إنشاء إصدارات متعددة من الفيديو الخاص بك!

إدراج عنصر الصوت


من الناحية النظرية ، كل ما تحتاجه هو علامة بسيطة لتشغيل الصوت على صفحتنا:


<audio src="music.mp3"></audio>       

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

يمكنك إكمال العلامة بالسمات التالية:

  • Controls : لإضافة "تشغيل" ، "إيقاف مؤقت" وأزرار شريط التمرير. قد يبدو هذا ضروريًا ، وقد تتساءل عن سبب عدم تضمين ذلك افتراضيًا ، لكن بعض مواقع الويب تفضل إنشاء أزرار خاصة بها وطلب تشغيلها باستخدام JavaScript
  • Width : لتغيير عرض أداة تشغيل الصوت.
  • Loop : سيتم تشغيل الموسيقى في حلقة.
  • Autoplay : سيتم تشغيل الموسيقى بمجرد تحميل الصفحة. تجنبها ، عادة ما يكون من المثير للغضب الوصول إلى موقع يقوم بتشغيل الموسيقى بمفرده!
  • Preload : يشير إلى ما إذا كان يمكن تحميل الموسيقى مسبقًا بمجرد تحميل الصفحة أم لا. يمكن أن تأخذ هذه السمة القيم:
    • Auto (تلقائي): يقرر المتصفح ما إذا كان سيتم تحميل جميع الموسيقى مسبقًا ، أو بيانات التعريف فقط أو لا شيء على الإطلاق.
    • Metadata : تحميل البيانات الوصفية فقط (المدة ، إلخ).
    • None : لا التحميل المسبق مفيد إذا كنت لا تريد أن تضيع عرض النطاق الترددي على موقعك.
لا يمكننا فرض التحميل المسبق للموسيقى ، فهو دائمًا المتصفح الذي يقرر. على سبيل المثال ، لا تقم متصفحات الجوال مسبقًا بتحميل الموسيقى مسبقًا لتوفير عرض النطاق الترددي (وقت الشحن الطويل على جهاز كمبيوتر محمول).

دعونا نضيف الضوابط وسيكون أفضل!


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

يتغير مظهر مشغل الصوت حسب المتصفح. على سبيل المثال ، يعرض الشكل التالي مشغل الصوت في Google Chrome.

css html video audio

مشغل الصوت في جوجل كروم

لماذا فتح العلامة لإغلاقه على الفور بعد ذلك؟

يتيح لك ذلك نشر رسالة أو توفير حل احتياطي للمتصفحات التي لا تدعم هذه العلامة الجديدة. مثلا :


<audio src="hype_home.mp3" controls>يجب تحديث المتصفح !</audio> 

أولئك الذين لديهم متصفح حديث لن يروا الرسالة. المتصفحات القديمة ، التي لا تفهم العلامة ، ستعرض النص بداخلها.

وإذا كان المتصفح لا يتعامل مع ملفات MP3 ، فكيف؟

من الضروري اقتراح عدة إصدارات من الملف الصوتي. في هذه الحالة ، سوف نبني العلامة لدينا مثل هذا:


<audio controls>
    <source src="hype_home.mp3">
    <source src="hype_home.ogg">
</audio> 

سوف يأخذ المتصفح تلقائيًا التنسيق الذي يتعرف عليه.

ادراج فيديو
مجرد علامة بسيطة <video>لإدراج مقطع فيديو في الصفحة:

<video src="sintel.webm"></video> 

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

دعنا نضيف بعض السمات (معظمها مماثلة للعلامة <audio> )
  • Poster : صورة لعرضها في مكان الفيديو طالما لم يتم تشغيله. بشكل تلقائي ، يأخذ المتصفح الصورة الأولى من الفيديو ، ولكن نظرًا لأنه غالبًا ما يكون صورة سوداء أو صورة غير ممثلة للفيديو ، أنصحك بإنشاء واحدة! يمكنك ببساطة التقاط لقطة من لحظة الفيديو.
  • Controls : لإضافة "تشغيل" ، "إيقاف مؤقت" وأزرار شريط التمرير. قد يبدو هذا ضروريًا ، لكن بعض مواقع الويب تفضل إنشاء أزرار خاصة بها وطلب تشغيلها باستخدام JavaScript بقدر ما نشعر بالقلق ، سيكون أكثر من كافية!
  • Width : لتغيير عرض الفيديو.
  • Height : لتغيير ارتفاع الفيديو.
  • Loop : سيتم تشغيل الفيديو في حلقة.
  • Autoplay : سيتم تشغيل الفيديو بمجرد تحميل الصفحة. مرة أخرى ، تجنبها ، عادة ما يكون من المثير للغضب الوصول إلى موقع يطلق شيئًا لوحده!
  • Preload : يشير إلى ما إذا كان يمكن تحميل الفيديو مسبقًا بمجرد تحميل الصفحة أم لا. يمكن أن تأخذ هذه السمة القيم:
    • auto(تلقائي): يقرر المتصفح ما إذا كان سيتم تحميل جميع مقاطع الفيديو مسبقًا ، أو بيانات التعريف فقط أو لا شيء على الإطلاق.
    • Metadata : تحميل البيانات الوصفية فقط (المدة ، الأبعاد ، إلخ).
    • None : لا التحميل المسبق مفيد إذا كنت تريد تجنب هدر النطاق الترددي على موقعك.

لا يمكننا فرض التحميل المسبق للفيديو ، فالمتصفح هو الذي يقرر دائمًا.


لا تزال نسبة الفيديو محفوظة. إذا قمت بتعيين العرض والارتفاع ، فلن يتجاوز المستعرض الأبعاد المحددة ، لكنه سيحافظ على نسبة العرض إلى الارتفاع.

إليك رمزًا أكثر اكتمالًا بقليل:


<video src="sintel.webm" controls poster="sintel.jpg" width="600"></video>

والنتيجة:

css html video audio

فيديو مع خيارات التشغيل وحجم محدد

لماذا فتح وإغلاق مباشرة بعد العلامة؟

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

<video src="sintel.webm" controls poster="sintel.jpg" width="600">
    عليك تحديث اصدار المتصفح !
</video>

كيفية إرضاء جميع المتصفحات ، لأن الجميع يتعرف على تنسيقات الفيديو المختلفة؟

سوف تستخدم العلامة <source> داخل العلامة <video> لتقديم تنسيقات مختلفة. سيأخذ المتصفح الفيديو الذي يتعرف عليه:

<video controls poster="sintel.jpg" width="600">
    <source src="sintel.mp4">
    <source src="sintel.webm">
    <source src="sintel.ogv">
</video>

يتعرف iPhone و iPad و iPod حاليًا على التنسيق H.264 فقط (ملف .mp4 ... ) وفقط إذا ظهر أولاً في القائمة! أوصي بتحديد التنسيق H.264 أولاً لضمان أقصى توافق.

كيف أحمي مقطع الفيديو الخاص بي ، لا أريد أن يكون مقدورًا على نسخه بسهولة!

هذا غير ممكن. لم يتم تصميم العلامات للحد من التنزيل أو منعه. من المنطقي تمامًا عند التفكير في الأمر: لكي يرى الزائر الفيديو ، يجب تنزيله على أية حال!

لذلك لا تتوقع منع تنزيل الفيديو الخاص بك بهذه التقنية.

تساعد مشغلات فيديو الفلاش على "حماية" محتوى الفيديو ، ولكن مرة أخرى ، توجد حلول. تسمح للعديد من المكونات الإضافية بتنزيل مقاطع الفيديو ، من Youtube على سبيل المثال.

الخلاصة


  • لم يكن إدخال الموسيقى أو الفيديو ممكنًا في الماضي بتنسيق HTML . كان من الضروري اللجوء إلى البرنامج المساعد مثل Flash .
  • منذ علامات <audio> و <video> أدخلت وتستخدم لتشغيل الموسيقى وأشرطة الفيديو من دون الإضافات.
  • هناك العديد من تنسيقات الصوت والفيديو. على وجه الخصوص ، يجب أن تعرف:
    • للصوت MP3 و Ogg Vorbis ؛
    • للفيديو H.264 ، Ogg Theora و WebM.
  • لا يتم التعرف على أي تنسيق من قبل جميع المتصفحات: يجب أن يقدم إصدارات مختلفة من الموسيقى أو الفيديو الخاص به لإرضاء جميع المتصفحات.
  • يجب أن نضيف السمة controls إلى العلامات
  • هذه العلامات ليست مصممة لمنع تنزيل الموسيقى و لا الفيديو. لا يمكنك حماية الوسائط الخاصة بك من النسخ.