الفيديو في 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" />
متصفحك لا يدعم علامة الفيديو.
</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> في HTML 5 اللعب بأحد تنسيقات 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">Play a video file</a>

جربها بنفسك

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

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

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

في نفس الوقت، يرجى ملاحظة أن المستخدم قد قام بإغلاق خيار الفيديو المدمج في متصفح الويب الخاص به.

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

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

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

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

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