Advertisements
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” عناصر التحكم في الفيديو ، مثل التشغيل والإيقاف المؤقت والصوت.
مثال أخر (مع إستخدام أكثر من مصدر):
<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“.
يحدد عنصر source وسائط متعددة لعناصر الوسائط(media) ، مثل video و audio.
التشغيل التلقائي للفيديو
لبدء تشغيل مقطع فيديو تلقائيًا ، استخدم سمة 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>
لا تعمل سمة “autoplay” في الأجهزة المحمولة مثل iPad و iPhone و ..إلخ.
أنواع الوسائط 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 |
تحدد الأرقام الموجوده في الجدول السابقة إصدار المستعرض الأول الذي يدعم عنصر video بشكل كامل.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!
Advertisements