الفيديو في HTML

هناك العديد من الطرق لتشغيل الفيديو في HTML.

مثال

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

جربها بنفسك

المشاكل والحلول

ليس من السهل تشغيل الفيديو في HTML!

تحتاج إلى معرفة الكثير من المهارات لضمان تشغيل ملفات الفيديو الخاصة بك في جميع المتصفحات (Internet Explorer, Chrome, Firefox, Safari, Opera) وكل الأجهزة (PC, Mac, iPad, iPhone).

في هذا الفصل، يلخص CodeW3C.com المشاكل والحلول.

استخدام علامة <embed>

أهمية علامة <embed> هي دمج العناصر المتعددة في صفحة HTML.

الجزء التالي من رمز HTML يظهر الفيديو Flash المدمج في صفحة الويب:

مثال

<embed src="movie.swf" height="200" width="200"/>

جربها بنفسك

المشكلة

  • لا يمكن التعرف على علامة <embed> في HTML4. صفحتك غير قابلة للتحقق.
  • إذا لم يدعم المتصفح Flash، فإن الفيديو لن يمكن تشغيله
  • iPad وiPhone لا يمكنهما عرض الفيديوهات Flash.
  • إذا قمت بتحويل الفيديو إلى صيغة أخرى، فإنه لا يمكن تشغيله في جميع المتصفحات.

استخدام علامة <object>

أهمية علامة <object> هي دمج العناصر المتعددة في صفحة HTML.

الجزء التالي من HTML يظهر الفيديو Flash المدمج في صفحة الويب:

مثال

<object data="movie.swf" height="200" width="200"/>

جربها بنفسك

المشكلة

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

استخدام علامة <video>

<video> هو علامة جديدة في HTML5.

يُستخدم علامة <video> لدمج عنصر الفيديو في صفحة HTML.

الجزء التالي من HTML سيظهر فيديوًا مدمجًا في صفحتك ويكون بصيغ ogg أو mp4 أو webm:

مثال

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
browser of yours does not support the video tag.
</video>

جربها بنفسك

المشكلة

  • يجب عليك تحويل الفيديو إلى العديد من الصيغ المختلفة.
  • عنصر <video> غير صالح في المتصفحات القديمة.
  • <video> لا يمكنه النجاح في التحقق عبر HTML 4 وXHTML.

أفضل حلول HTML

أفضل حلول HTML

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

جربها بنفسك

في المثال السابق تم استخدام 4 صيغ فيديو مختلفة. يحاول عنصر <video> في HTML5 اللعب باستخدام أي من صيغ mp4 أو ogg أو webm. إذا فشل ذلك، فإنه يرجع إلى عنصر <embed>.

المشكلة

  • يجب عليك تحويل الفيديو إلى العديد من الصيغ المختلفة
  • <video> لا يمكنه النجاح في التحقق عبر HTML 4 وXHTML.
  • <embed> لا يمكنه النجاح في التحقق عبر HTML 4 وXHTML.

ملاحظة:استخدم <!DOCTYPE html> (HTML5) لحل مشاكل التحقق.

حلول Youku

أبسط طريقة لعرض الفيديو في HTML هي استخدام مواقع الفيديو مثل Youku.

إذا كنت ترغب في عرض الفيديو على صفحتك الويب، يمكنك تحميل الفيديو إلى مواقع الفيديو مثل Youku، ثم إدراج رمز HTML في صفحتك لعرض الفيديو:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"> 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

جربها بنفسك

استخدام الروابط

إذا كان الموقع يحتوي على روابط إلى ملفات الوسائط، فإن معظم المتصفحات تستخدم تطبيقًا مساعدًا لتشغيل الملف.

قطعة من الكود التالية تظهر رابطًا إلى ملف AVI. إذا قام المستخدم بالنقر على هذا الرابط، فإن المتصفح يبدأ تطبيقًا مساعدًا مثل Windows Media Player لتشغيل هذا ملف AVI:

مثال

<a href="movie.swf">عرض ملف الفيديو</a>

جربها بنفسك

تعليق عن الفيديو المدمج

عندما يتم دمج الفيديو في صفحة الويب، يُسمى ذلك الفيديو المدمج.

إذا كنت تخطط لاستخدام الفيديو المدمج في تطبيق الويب، فعليك أن تكون على علم بأن الكثير من الناس يعتبرون الفيديو المدمج مزعجًا.

لاحظ أيضًا أن المستخدم قد قام بإغلاق خيار الفيديو المدمج في المتصفح.

أفضل نصيحتنا هي أن تشملها فقط في الأماكن التي يرغب المستخدم في رؤية الفيديو المدمج.

علامات الوسائط في HTML 4.01

علامة وصف
<applet> غير مستخدم.تعريف applet المدمج.
<embed> غير مستخدم.تعريف العنصر المدمج. (يُسمح به في HTML5)
<object> تعريف العنصر المدمج.
<param> تعريف معلمات العنصر.

علامات الوسائط في HTML 5

علامة وصف
<video> تعريف الصوت، مثل الموسيقى أو تدفق الصوت الآخر.
<embed> تعريف المحتوى المدمج، مثل البرامج المساعدة.