English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل الأساسيات لـ HTML

وسائط HTML

دليل مرجعي HTML

دليل أساسي HTML5

واجهات برمجة تطبيقات HTML5

وسائط HTML5

عرض فيديو HTML

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

فيديوهات HTML (Videos)

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>أساسيات التعليمات (oldtoolbag.com)</title>　
</head>
<body>
<video width="320" height="240" controls autoplay>
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.webm" type="video/webm">
　　<object data="movie.mp4" width="320" height="240">
　　　　<embed width="320" height="240" src="movie.swf">
　　</object>
</video>
</body>
</html>
اختبار ‹/›

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

ليس من السهل عرض الفيديو في HTML!

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

في هذا الفصل، قمنا بتلخيص المشاكل وحلولها في الدليل الأساسي.

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

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

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

مثال على الإنترنت

　 　 <embed src="bookmark.swf" height="200" width="200">

مشكلة

  • لا يمكن لـ HTML4 التعرف على رمز <embed>. لا يمكن تأكيد صفحتك.

  • إذا لم يدعم المتصفح Flash، فإن الفيديو لن يتم تشغيله

  • iPad و iPhone لا يمكنهم عرض الفيديوهات Flash.

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

استخدام رمز <object>

يستخدم رمز <object> لضميم العناصر المتعددة في صفحة HTML.

فيما يلي قطعة HTML تظهر فيديو Flash مضمنًا في صفحة الويب:

مثال

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

مشكلة:

  • إذا لم يدعم المتصفح Flash، فإن الفيديو لن يتم تشغيله.

  • iPad و iPhone لا يمكنهم عرض الفيديوهات Flash.

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

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

يحدد رمز <video> في HTML5 شريط فيديو أو فيلم.

عنصر <video> مدعوم في جميع المتصفحات الحديثة.

فيما يلي قطعة HTML ستعرض فيديوًا مضمنًا في صفحة الويب بتنسيقات ogg، mp4 أو webm:

مثال على الإنترنت

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>أساسيات التعليمات (oldtoolbag.com)</title>　
</head>
<body>
<video width="320" height="240" controls autoplay>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.webm" type="video/webm">
　　المتصفح الخاص بك لا يدعم خاصية video.
</video>
</body>
</html>
اختبار ‹/›

مشكلة:

  • عليك تحويل الفيديو إلى العديد من الصيغ المختلفة.

  • عنصر <video> غير صالح في المتصفحات القديمة.

أفضل حلول HTML

في هذا المثال تم استخدام 4 أنواع مختلفة من صيغ الفيديو. attempts to play the video in one of the formats mp4, ogg أو webm. إذا فشلت جميع المحاولات، فإنه يرجع إلى عنصر <embed>.

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>أساسيات التعليمات (oldtoolbag.com)</title>　
</head>
<body>
<video width="320" height="240" controls autoplay>
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.webm" type="video/webm">
　　<object data="movie.mp4" width="320" height="240">
　　　　<embed width="320" height="240" src="movie.swf">
　　</object>
</video>
</body>
</html>
اختبار ‹/›

مشكلة:

  • عليك تحويل الفيديو إلى العديد من الصيغ المختلفة

حلول Youku

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

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

يمكن العثور على كود HTML المدمج في مدخل مشاركة في معظم مواقع الفيديو.

<embed　src='https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf'　allowFullScreen='true'　quality='high'　width='480'　height='400'　align='middle'　allowScriptAccess='always'　type='application/x-shockwave-flash'></embed>
اختبار ‹/›

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

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

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

مثال على الإنترنت

<a href="bookmark.swf">Play a video file</a>

ملاحظات حول الفيديو المدمج

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

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

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

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

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

العلامةالوصف
<embed>تعريف عنصر مدمج. غير مستخدم في HTML4، ولكن مسموح به في HTML5.
<object>تعريف عنصر مدمج
<param>تعريف معلمات العنصر
<audio>HTML5تعريف محتوى الصوت
<video>HTML5تعريف فيديو أو فيلم
<source>HTML5تعريف مصادر الوسائط المتعددة لـ media (video و audio)
<track>HTML5ملف الترجمة أو ملفات أخرى تحتوي على نصوص لـ عناصر media ( <video> و <audio> )
مثال شامل لـ HTMLصوت HTML