Skip to main content

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

الوسم <video>

يتيح الوسم <video> في HTML للمطورين إضافة محتوى الفيديو إلى صفحات الويب. يتم تضمين الفيديو داخل الوسم <video>.

مثال:

HTML
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  الخادم الخاص بك لا يدعم الفيديو.
</video>

في هذا المثال، تضمن السمات width و height الحجم الذي يجب أن يظهر به الفيديو. تسمح السمة controls للمستخدم بالتحكم في تشغيل الفيديو وإيقافه وتعديل الصوت وغير ذلك من الوظائف.

السمة controls

سمة controls هي سمة خيارية يمكن استخدامها مع الوسم <video>. عندما تتضمن هذه السمة، سيعرض المتصفح عناصر تحكم الفيديو، مثل الأزرار التي تسمح بتشغيل الفيديو وإيقافه، وتعديل مستوى الصوت، والتحكم في الشريط الزمني.

مثال:

HTML
<video controls>
  <source src="movie.mp4" type="video/mp4">
  الخادم الخاص بك لا يدعم الفيديو.
</video>

في هذا المثال، ستعرض السمة controls أزرار التحكم في الفيديو.

السمات width & height

السمات width و height هما سمتين خياريتين يمكن استخدامهما مع الوسم <video> لتحديد أبعاد الفيديو. يتم تحديد القيم بالبكسل.

الوسم <source> للفيديو

يتيح الوسم <source> في HTML للمطورين تحديد مصادر الفيديو المتعددة للعنصر الفيديو.

مثال:

HTML
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  الخادم الخاص بك لا يدعم الفيديو.
</video>

في هذا المثال، تم تحديد مصدرين للفيديو – واحد بتنسيق MP4 والآخر بتنسيق Ogg. إذا لم يكن المتصفح قادرًا على تشغيل تنسيق MP4، سيحاول تشغيل تنسيق Ogg. إذا لم يكن قادرًا على تشغيل أي منهما، سيتم عرض الرسالة “الخادم الخاص بك لا يدعم الفيديو.”

السمة autoplay

سمة autoplay هي سمة خيارية يمكن استخدامها مع الوسم <video>. عندما تتضمن هذه السمة، سيبدأ الفيديو في التشغيل تلقائيًا بمجرد تحميل الصفحة.

مثال:

HTML
<video autoplay>
  <source src="movie.mp4" type="video/mp4">
  الخادم الخاص بك لا يدعم الفيديو.
</video>

في هذا المثال، سيبدأ الفيديو في التشغيل تلقائيًا بمجرد تحميل الصفحة بسبب السمة autoplay.

السمة muted

سمة muted هي سمة خيارية يمكن استخدامها مع الوسم <video>. عندما تتضمن هذه السمة، سيتم كتم الصوت من الفيديو.

مثال:

HTML
<video autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  الخادم الخاص بك لا يدعم الفيديو.
</video>

في هذا المثال، سيبدأ الفيديو في التشغيل تلقائيًا بمجرد تحميل الصفحة، ولكنه سيكون مكتوم الصوت بسبب السمة muted.

صيغ الفيديو المدعومة في HTML

يمكن لـ HTML5 دعم ثلاثة تنسيقات فيديو رئيسية: MP4، WebM، و Ogg. من الجدير بالذكر أن الدعم الفعلي لهذه التنسيقات يعتمد على المتصفح الذي يستخدمه الشخص.

  • MP4: يتم دعمه بشكل عام في جميع المتصفحات الرئيسية بما في ذلك Chrome، Firefox، Safari، و Internet Explorer.
  • WebM: يتم دعمه في المتصفحات التي تستند إلى Chromium (مثل Google Chrome و Opera) و Firefox أيضًا.
  • Ogg: يتم دعمه بشكل عام في Firefox و Opera و Chrome.

الوسم <track>

يمكن استخدام الوسم <track> في HTML5 لإضافة مسارات الترجمة إلى الفيديوهات. يمكن لهذه المسارات أن تكون مفيدة بشكل خاص للأشخاص ذوي الاحتياجات الخاصة، أو للأشخاص الذين يشاهدون الفيديو في لغة غير لغتهم الأم.

مثال:

HTML
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="sub_ar.vtt" kind="subtitles" srclang="ar" label="Arabic">
  الخادم الخاص بك لا يدعم الفيديو.
</video>

في هذا المثال، تمت إضافة مسار ترجمة باللغة العربية للفيديو. يجب أن يكون ملف الترجمة بتنسيق VTT، ويجب تحديد نوع اللغة باستخدام السمة srclang.

الوسم <audio>

يمكن استخدام الوسم <audio> في HTML5 لتضمين ملفات الصوت في صفحات الويب الخاصة بك. تشمل السمات المتاحة للعنصر <audio> “controls”، والتي تعرض واجهة التحكم في الصوت (مثل زر التشغيل/الإيقاف)، و”autoplay”، التي تبدأ الصوت تلقائيًا عند تحميل الصفحة، و”muted”، التي تجعل الصوت صامتًا بشكل افتراضي.

مثال:

HTML
<audio controls>
  <source src="audio_example.mp3" type="audio/mp3">
  الخادم الخاص بك لا يدعم الصوت.
</audio>

في هذا المثال، يتم تضمين ملف صوت MP3 في صفحة الويب.

الوسم <source> للصوت

يمكن استخدام الوسم <source> داخل الوسم <audio> لتحديد مصدر ملف الصوت. يمكن تحديد أكثر من مصدر، وسيتم استخدام المصدر الأول الذي يتوافق مع أحد الصيغ المدعومة من قبل المتصفح.

السمة “autoplay”

تعمل السمة “autoplay” على تشغيل الصوت تلقائيًا بمجرد تحميل الصفحة. يجب توخي الحذر عند استخدام هذه السمة، حيث يمكن أن تكون مزعجة للمستخدمين إذا بدأ الصوت يلعب فجأة دون تحذير. بعض المتصفحات، مثل Chrome، قد تمنع تلقائيا تشغيل الصوت في بعض الحالات لتحسين تجربة المستخدم.

السمة “muted”

تعمل السمة “muted” على إسكات الصوت بشكل افتراضي عند تحميل الصفحة. إذا كانت هذه السمة موجودة، فسيكون الصوت صامتًا حتى يقرر المستخدم رفع الصوت.

مثال:

HTML
<audio controls muted>
  <source src="audio_example.mp3" type="audio/mp3">
  الخادم الخاص بك لا يدعم الصوت.
</audio>

الصيغ الصوتية المدعومة في HTML

HTML5 يدعم عدة صيغ صوتية، بما في ذلك MP3, OGG, و WAV. يعتبر MP3 هو الأكثر شيوعًا وتوافقًا بين المتصفحات.

تضمين مقاطع الفيديو من YouTube

يمكنك تضمين مقاطع فيديو من YouTube مباشرة في صفحات الويب الخاصة بك باستخدام الكود الذي يوفره YouTube. يمكن العثور على هذا الكود بالنقر على “مشاركة” تحت الفيديو ثم “تضمين”. سيوفر YouTube كود HTML يمكنك نسخه ولصقه في صفحة الويب الخاصة بك.

استخدام السمة “autoplay”

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

صيغة الصوت “.mp3”

صيغة الملفات “.mp3” هي واحدة من أكثر صيغ الصوت استخدامًا وتوافقًا عبر المتصفحات. يمكن استخدامها في تعلامات <audio> للعرض الصوتي في صفحات الويب.

مثال:

HTML
<audio controls>
  <source src="audio_example.mp3" type="audio/mp3">
  الخادم الخاص بك لا يدعم الصوت.
</audio>

إضافة عنصر “track

تسمح العلامة <track> بإضافة ترجمات وتوصيفات صوتية وأشرطة توصيفية للفيديو والصوت. هذا يمكن أن يجعل محتواك أكثر وصولاً لأولئك الذين يعانون من صعوبات في السمع أو الرؤية.

مثال:

HTML
<video controls>
  <source src="video_example.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  الخادم الخاص بك لا يدعم الفيديو.
</video>

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

الختام

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

الأسئلة المتكررة

ما هي الصيغ الصوتية التي تدعمها HTML؟

تدعم HTML5 صيغ الصوت MP3, OGG, و WAV.

هل يمكنني تضمين فيديو من YouTube في صفحة الويب الخاصة بي؟

نعم، يمكنك ذلك. يوفر YouTube كودًا يمكنك نسخه ولصقه في صفحة الويب الخاصة بك.

ما هو الغرض من عنصر “” في HTML؟

تسمح العلامة <track> بإضافة ترجمات وتوصيفات صوتية وأشرطة توصيفية للفيديو والصوت. هذا يمكن أن يجعل محتواك أكثر وصولاً لأولئك الذين يعانون من صعوبات في السمع أو الرؤية.

توثيق وتعليقات الإطارات السلكية: كيفية جعل التصميم مفهومًا ومتسقًا

توثيق وتعليقات الإطارات السلكية: كيفية جعل التصميم مفهومًا ومتسقًا

تعرّف على تقنيات فعّالة لإضافة تعليقات وتوثيقات للإطارات السلكية لفهم صحيح وتسقيط متسق، بالإضافة إلى…
دليل إجراء اختبارات الاستخدام الفعالة

دليل إجراء اختبارات الاستخدام الفعالة

هذه المقالة تشرح مفهوم اختبارات الاستخدام وأهميتها في تطوير تجربة المستخدم، مع التركيز على كيفية…
استخدام شبكات التكوين في التصميم

استخدام شبكات التكوين في التصميم

تعلم كيفية دمج شبكات التكوين في عملية التصميم الخاصة بك لإنتاج تصميمات جذابة وفعّالة. استمتع…