الفيديو في 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"/>

جربها بنفسك

مشكلة

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

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

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

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

مثال

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

جربها بنفسك

مشكلة

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

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

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

يستخدم علامة <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 does not support the video tag.
</video>

جربها بنفسك

مشكلة

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

أفضل حلول HTML

HTML 5 + <object> + <embed>

<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>

جربها بنفسك

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

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

يظهر هذا النص الفragment الرابط إلى ملف 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> تعريف المحتوى المدمج، مثل البرامج المساعدة.