X

أساسيات اتش.تي.إم.إل

١٣. بناء مشغل فيديو باستخدام اتش.تي.ام.ال

ورشة عمل

في هذه الورشة، ستقوم ببناء مشغل فيديو باستخدام HTML. وقد تم توفير الهيكل الأساسي (boilerplate) لملف اتش.تي.ام.ال لك.

الهيكل الأساسي Boilerplate


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>العمل مع عنصر الفيديو في اتش.تي.ام.ال</title>
 </head>
 <body>

 </body>
</html>

الخطوات

الخطوة ١:

  • أنشئ عنصراً من النوع h1 واجعل النص بداخله التعامل مع عنصر الفيديو في اتش.تي.ام.ال .

الخطوة ٢:

  • بعد ذلك، أنشئ عنصر فيديو video أسفل وسم h1 . وفي الخطوات القليلة التالية، ستضيف السمات اللازمة لجعل مشغل الفيديو يعمل.

الخطوة ٣:

  • في درس سابق، تعرفت على الخصائص المختلفة المتاحة لعنصر الفيديو video . وتُحدِّد الخاصية width عرض الفيديو بـ"البكسل" (pixels) .

  • أضف السمة width إلى عنصر الفيديو video بقيمة "640" .

الخطوة ٤:

  • تؤدي السمة loop إلى إعادة تشغيل الفيديو بمجرد اكتمال العرض، تخيّل مقطع "ميمي" (meme) على الإنترنت يتكرر تشغيله. أما عدم استخدام هذه السمة loop ، فسيجعل الفيديو يُعرض مرة واحدة فقط.

  • السمة loop هي سمة منطقية (boolean) ولا تتطلب قيمة.

  • أضف السمة loop إلى عنصر الفيديو video .

الخطوة ٥:

  • توفر السمة controls عناصر تحكم في التشغيل لعنصر الفيديو video ، بما في ذلك إيقاف التشغيل مؤقتاً واستئنافه، والتنقل داخل المقطع (التقديم والتأخير)، والتحكم في مستوى الصوت.

  • تُعد السمة controls سمة منطقية (boolean) ولا تتطلب قيمة.

  • أضف السمة controls إلى عنصر الفيديو video .

  • الآن، ينبغي أن ترى عنصر الفيديو video معروضاً على الصفحة.

الخطوة ٦:

  • تؤدي سمة muted إلى كتم الصوت عند بدء التشغيل، فإذا كانت عناصر التحكم controls مُفعَّلة، سيتمكن المستخدم من إلغاء كتم الصوت. أما في حال عدم استخدام هذه السمة muted ، فسيتم تشغيل الصوت عند البدء.

  • تُعد السمة muted سمة منطقية (boolean) ولا تتطلب قيمة.

  • أضف السمة muted إلى عنصر الفيديو video .

الخطوة ٧:

  • تُشير السمة poster إلى صورة مصغرة للفيديو، فكّر في مقاطع الفيديو التي تشاهدها على "يوتيوب" (YouTube) . تظهر هذه الصورة أثناء تحميل الفيديو، أما في حال عدم تحديد هذه السمة poster ، فيتم عرض الإطار الأول من الفيديو خلال مرحلة التحميل.

  • الآن، أضف السمة poster بالقيمة https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg إلى عنصر الفيديو video الخاص بك.

الخطوة ٨ :

  • ربما لاحظت أنك لم تدرج "رابطاً" (link) للفيديو الفعلي، وستقوم بذلك في المرحلة التالية. وفيما يتعلق بأنواع ملفات الفيديو، هناك تفاوت في مستوى دعم المتصفحات لها. وللتعامل مع هذا الأمر، يمكنك استخدام عناصر المصدر source داخل عنصر الفيديو video ، حيث سيقوم المتصفح باختيار المصدر الأول المتوافق.

  • إليك مثال على عنصر المصدر source :

    
  <video controls width="250">
   <source src="ضع—رابط—المصدر—هنا" type="ضع—نوع—الفيديو—هنا" />
  </video>

  • عنصر المصدر source هو "عنصر فارغ" (a void element) ، لذا فهو لا يحتوي على "وسم إغلاق" (a closing tag) .

  • أضف عنصر مصدر source داخل عنصر الفيديو video الخاص بك.

الخطوة ٩ :

  • لتحديد "مورد الوسائط" (the media resource) الخاص بالفيديو، ستحتاج إلى إضافة السمة src إلى العنصر source .

  • أضف السمة src بالقيمة https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4 .

الخطوة ١٠ :

  • لقد استخدمت ملف فيديو بامتداد MP4 ، وعليك إخبار المتصفح بذلك حتى يعرف كيفية قراءة الملف.

  • ستستخدم السمة type لتحديد نوع (MIME) الخاص بـ video/mp4 .

  • يُعد MIME "امتدادات بريد الإنترنت متعددة الأغراض" (Multipurpose Internet Mail Extensions) معياراً لوصف المستندات بأشكال أخرى بخلاف نصوص ASCII ، مثل الصوت والفيديو والصور.

  • يُعد تنسيق MP4 — المعروف رسمياً باسم (MPEG-4 Part 14) تنسيق حاوية رقمياً للوسائط المتعددة. وهو يُستخدم على نطاق واسع لتخزين مقاطع الفيديو والصوت، ولكنه يمكن أن يتضمن أيضاً أنواعاً أخرى من البيانات مثل الترجمة والصور الثابتة. وقد صُممت ملفات MP4 لتلائم البث عبر الإنترنت، كما أنها تتوافق مع العديد من الأجهزة والمنصات.

  • الآن، أضف السمة type والقيمة "video/mp4" .

الخطوة ١١ :

  • من أنواع MIME الشائعة الأخرى النوع video/webm .

  • يُعد WebM تنسيقاً مفتوح المصدر لملفات الوسائط السمعية والبصرية طوّرته شركة Google، وصُمم في المقام الأول ليتناسب مع محتوى الوسائط المخصص للويب. وهو يدعم برمجيات ترميز الفيديو مثل VP8 وVP9 وAV1، وبرمجيات ترميز الصوت مثل Vorbis وOpus، مما يجعله خياراً شائعاً لعناصر الفيديو والصوت في تقنية HTML5.

  • أسفل عنصر المصدر الأول source ، أضف عنصر مصدر source آخر وامنحه السمة src بالقيمة https://cdn.freecodecamp.org/curriculum/labs/mapmethod.webm والسمة type بالقيمة "video/webm" .

الخطوة ١٢ :

  • من أنواع MIME الشائعة الأخرى النوع video/ogg .

  • يُعد Ogg تنسيق حاوية للوسائط المتعددة الرقمية، صُمم ليتيح البث والمعالجة الفعّالين للوسائط المتعددة الرقمية. وهو تنسيق مجاني ومفتوح وغير مقيد ببراءات اختراع برمجية، وتتولى مؤسسة Xiph.Org صيانته؛ أما اسمه فمُشتق من مصطلح "ogging" المستخدم في لعبة الحاسوب Netrek.

  • أسفل عنصر المصدر الثاني source ، أضف عنصر مصدر ثالثاً source وامنحه السمة src بالقيمة https://cdn.freecodecamp.org/curriculum/labs/mapmethod.ogg والسمة type بالقيمة "video/ogg" .

الخطوة ١٣ :

  • سيكون عنصر المصدر الأخير source الذي ستضيفه مخصصاً لنوع MIME الخاص بـ video/quicktime .

  • يُعد QuickTime بنيةً برمجيةً قابلة للتوسع للوسائط المتعددة طورتها شركة Apple، وهي تدعم تشغيل وبث وترميز وإعادة ترميز مجموعة متنوعة من تنسيقات الوسائط الرقمية. ورغم أنه ليس بشيوع تنسيق MP4، فقد تحتاج إليه لدعم التطبيقات القديمة.

  • أسفل عنصر المصدر الثالث source ، أضف عنصر مصدر رابعاً source وامنحه السمة src بالقيمة https://cdn.freecodecamp.org/curriculum/labs/mapmethod.mov والسمة type بالقيمة "video/quicktime" .

تهانينا! لقد أتممت ورشة عمل مشغل الفيديو باستخدام اتش.تي.ام.ال .

الحل


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>العمل مع عنصر الفيديو في اتش.تي.ام.ال</title>
 </head>
 <body>

  <h1>التعامل مع عنصر الفيديو في اتش.تي.ام.ال</h1>

  <video
  width="640"
  loop
  controls
  muted
  poster="https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg"
  >
   <source 
   src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4"
   type="video/mp4" />
   
   <source 
   src="https://cdn.freecodecamp.org/curriculum/labs/mapmethod.webm"
   type="video/webm" />

   <source 
   src="https://cdn.freecodecamp.org/curriculum/labs/mapmethod.ogg"
   type="video/ogg" />

   <source 
   src="https://cdn.freecodecamp.org/curriculum/labs/mapmethod.mov"
   type="video/quicktime" />
  </video>

 </body>
</html>

التطبيق