HTML5 Video
يقوم عنصر <video> بتضمين مشغل وسائط يدعم تشغيل الفيديو في صفحات الويب.
استخدام عنصر الـ video
يوفر عنصر <video> المُدخل حديثًا طريقة قياسية لتضمين الفيديوهات في صفحات الويب.
لإظهار مقطع فيديو بتنسيق HTML ، استخدم عنصر <video>، كالتالى:
<video controls="controls" src="laptop.mp3">
Your browser does not support the video tag.
</video>
فى المثال السابق: قمنا بإدراج فيديو في مستند HTML5 ، باستخدام مجموعة عناصر التحكم (controls) الافتراضية للمتصفح ، مع تحديد مصدر واحد بواسطة السمة src.
مثال أخر (مع إستخدام أكثر من مصدر):
<video controls="controls">
<source src="laptop.mp3" type="video/mp4">
<source src="laptop.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
فى المثال السابق: قمنا بإدراج فيديو في مستند HTML5 ، باستخدام مجموعة عناصر التحكم (controls) الافتراضية للمتصفح أيضًا، لكن مع تحديد أكثر من مصدر بواسطة عنصر “source“.
التشغيل التلقائي للفيديو
لبدء تشغيل مقطع فيديو تلقائيًا ، استخدم سمة autoplay، كالتالى:
<video controls="controls" autoplay>
<source src="laptop.mp3" type="video/mp4">
<source src="laptop.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
أنواع الوسائط Media Types
(دعم المتصفحات) browsers support | (نوع الوسائط) Media Type | (تنسيق الملف) File Format |
---|---|---|
مدعوم من جميع المتصفحات | video/mp4 | MP4 |
مدعوم من جميع المتصفحات، عدا Safari | video/ogg | Ogg |
مدعوم من جميع المتصفحات | video/webm | WebM |
سمات (attributes) عنصر الـ <video>
السمة | الوصف |
---|---|
autoplay | تشير هذه السمة ما إذا كان يجب بدء تشغيل الفيديو بمجرد تحميله. |
controls | إذا كانت هذه السمة موجودة ، فسيقوم المستعرض بتوفير عناصر تحكم للسماح للمستخدم بالتحكم في تشغيل الفيديو، بما في ذلك مستوى الفيديو، والبحث ، وإيقاف التشغيل مؤقتًا أو استئنافه. |
controller | إرجاع كائن MediaController الذي يمثل وحدة التحكم الحالية في الوسائط للفيديو. |
crossorigin | تشير هذه السمة التي تم تعدادها إلى استخدام CORS لجلب ملف الفيديو ذي الصلة. |
currentTime | تُرجع قراءة CurrentTime قيمة موضع التشغيل الحالي ، بالثواني. |
currentSrc | يُرجع عنوان URL الخاص بالفيديو الحالي. |
disableRemotePlayback | تُستخدم لتعطيل إمكانية التشغيل عن بُعد في الأجهزة المتصلة باستخدام التقنيات السلكية (HDMI و DVI) والتقنيات اللاسلكية (Miracast و Chromecast و DLNA و AirPlay ، إلخ). |
defaultMuted | إرجاع ما إذا كان يجب كتم الفيديو افتراضيًا. |
playbackRate | يضبط سرعة تشغيل الفيديو. |
defaultPlaybackRate | يضبط أو يعيد السرعة الافتراضية لتشغيل الفيديو. |
ended | يُرجع ما إذا كان تشغيل الفيديو قد انتهى أم لا. |
loop | إذا تم تحديدها ، فسيعود مشغل الفيديو تلقائيًا إلى البداية عند الوصول إلى نهاية الفيديو. |
muted | تشير هذه السمة ما إذا كان سيتم كتم الفيديو في البداية. قيمته الافتراضية هي false. |
preload | تشير هذه السمة ما إذا كان يجب تحميل الفيديو عند تحميل الصفحة. |
src | تشير هذه السمة إلى عنوان URL الخاص بالفيديو المراد تضمينه. |
videoTracks | إرجاع كائن VideoTrackList الذي يمثل مسارات الفيديو المتاحة. |
volume | يضبط أو يعيد صوت الفيديو. |
buffered | إرجاع كائن TimeRanges يمثل الأجزاء المخزنة مؤقتًا من الفيديو. |
mediaGroup | يعين المجموعة التي ينتمي إليها الفيديو (تُستخدم لربط عدة عناصر فيديو). |
networkState | يُرجع حالة الشبكة الحالية للفيديو. |
readyState | يعيد حالة الاستعداد الحالية للفيديو. |
startDate | إرجاع كائن تاريخ يمثل offset الوقت الحالي. |
textTracks | يقوم بإرجاع كائن TextTrackList يمثل مسارات النص المتاحة. |
أحداث(Events) عنصر الـ <video>
الحدث | الوصف |
---|---|
loadeddata | يعمل عندما يقوم المتصفح بتحميل الإطار الحالي للفيديو. |
loadedmetadata | يعمل عندما يقوم المتصفح بتحميل بيانات التعريف الخاصة بالفيديو. |
loadstart | يعمل عندما يبدأ المتصفح في البحث عن الفيديو. |
play | يعمل عند بدأ التشغيل. |
playing | يعمل عندما يكون التشغيل جاهز للبدء بعد الإيقاف المؤقت أو التأخير بسبب نقص البيانات. |
progress | يعمل عندما يقوم المتصفح بتنزيل الفيديو. |
canplay | يعمل عندما يكون المتصفح قادر على تشغيل الوسائط. |
canplaythrough | يعمل عندما يمكن للمتصفح تشغيل الفيديو دون التوقف للتخزين المؤقت. |
pause | يعمل عند إيقاف التشغيل مؤقتًا. |
waiting | يعمل عند توقف التشغيل بسبب نقص مؤقت في البيانات. |
ended | يعمل عند انتهاء قائمة التشغيل الحالية. |
emptied | يعمل عندما تكون قائمة التشغيل الحالية فارغة. |
abort | يعمل عندما يتم إلغاء تحميل الفيديو. |
audioprocess | يعمل عندما يكون مخزن الإدخال المؤقت لـ ScriptProcessorNode جاهز للمعالجة. |
durationchange | يعمل عندما يتم تحديث سمة المدة (duration). |
error | يعمل عند حدوث خطأ أثناء تحميل الفيديو. |
ratechange | يعمل عندما تتغير سرعة تشغيل الفيديو. |
seeked | يعمل عندما ينتهي المستخدم من التحرك أو التخطي إلى موضع جديد في الفيديو. |
seeking | يعمل عندما يبدأ المستخدم في التحرك أو التخطي إلى موضع جديد في الفيديو. |
stalled | يعمل عندما يحاول المستعرض الحصول على بيانات الوسائط ، لكن البيانات غير متوفرة. |
suspend | يعمل عندما لا يحصل المتصفح عمدًا على بيانات الوسائط. |
volumechange | يعمل عند تغيير مستوى الفيديو. |
timeupdate | يعمل عندما يتغير وضع التشغيل الحالي. |
دعم المتصفحات لعنصر <audio>
المتصفح | Firefox | Chrome | Internet Explorer | Safari | Opera |
من بداية الإصدار | 3.5 | 4.0 | 9.0 | 4.0 | 10.5 |
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!