الملفات المرئية

تضمين ملف مرئي (فيديو) في صفحة HTML

لم يكن إدراج الفيديو على صفحة الويب سهلاً نسبيًا ، لأن متصفحات الويب لم يكن لديها معيار موحد لتحديد ملفات الوسائط المضمنة مثل الفيديو.
سنشرح في هذا الدرس بعض الطرق العديدة لإضافة مقاطع الفيديو على صفحات الويب ، بدءًا من العنصر <video> إلى إدراج فيديو من منصات الفيديو الشائعة مثل YouTube.

إستخدام العنصر <video>

يوفر العنصر <video> طريقة قياسية لتضمين الفيديو في صفحات الويب. العنصر <video> يعمل في معظم متصفحات الويب الحديثة.
في المثال التالي سنقوم بإدراج مقطع فيديو في صفحة HTML ، مع تحديد مصدر واحد بواسطة السمة src.

مثال
تشغيل
  1. <video controls src="media/birds.mp4">
  2. متصفحك لا يدعم العنصر video.
  3. </video>

في المثال التالي سنقوم بإستخدام العنصر <video> مع مصادر بديلة.

مثال
تشغيل
  1. <video controls>
  2. <source src="media/birds.mp4" type="video/mp4">
  3. <source src="media/birds.ogv" type="video/ogg">
  4. متصفحك لا يدعم العنصر video.
  5. </video>

إستخدام العنصر <object>

يتم استخدام العنصر <object> لتضمين أنواع مختلفة من ملفات الوسائط في مستند HTML. سابقا كان استخدام هذا العنصر يقتصر على إدراج عناصر تحكم ActiveX ، ولكن وفقًا للمواصفات ، يمكن أن يكون الكائن أي كائن وسائط مثل الفيديو أو الصوت أو ملفات PDF أو الرسوم المتحركة فلاش أو حتى الصور.

مثال
تشغيل
  1. <object data="media/birds.mp4" width="400px" height="200px"></object>
تحذير:

العنصر <object> غير مدعوم على نطاق واسع ويعتمد كثيرًا على نوع الكائن المضمن. يمكن أن تكون الطرق الأخرى اختيارًا أفضل في كثير من الحالات.

إستخدام العنصر <embed>

يتم استخدام العنصر <embed> لتضمين محتوى الوسائط المتعددة في صفحة HTML.
في الكود التالي سنقوم بدمج مقطع فيديو في صفحة ويب بإستخدام العنصر <embed>

مثال
تشغيل
  1. <embed src="media/birds.mp4" width="400px" height="200px">
تحذير:

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

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

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

أولا : تحميل الفيديو

انتقل إلى موقع studio.youtube.com واتبع التعليمات لتحميل الفيديو الخاص بك.

ثانيا : إنشاء كود HTML لتضمين الفيديو

تصفح وافتح الفيديو الخاص بك الذي تم تحميله على موقع يوتيوب. ابحث الآن عن زر المشاركة SHARE الموجود أسفل الفيديو مباشرة كما هو موضح في الشكل التالي.

مشاركة فيديو من موقع يوتيوب

عند النقر فوق زر المشاركة SHARE ، سيتم فتح لوحة مشاركة تعرض بعض الأزرار. انقر الآن على زر تضمين Embed ، وسوف يقوم بإنشاء كود HTML لتضمين الفيديو مباشرة في صفحات الويب. ما عليك سوى نسخ هذا الرمز ولصقه في صفحة HTML حيث تريد عرض الفيديو . افتراضيًا ، يتم تضمين الفيديو داخل iframe.


صورة لتضمين فيديو من موقع اليوتيوب

يمكنك أيضًا تخصيص كود التضمين هذا مثل تغيير حجم الفيديو عن طريق تعديل قيم السمات width و height للعنصر <ifram>.
يشتمل المثال التالي ببساطة على مقطع فيديو من موقع YouTube:

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>YouTube Video</title>
  6. </head>
  7. <body>
  8. <iframe width="560" height="315" src="https://www.youtube.com/embed/eoW5L6Rdy8w" frameborder="0" allowfullscreen></iframe>
  9. </body>
  10. </html>
« التالي السابق »