الكورس

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/mp4MP4
مدعوم من جميع المتصفحات،
عدا Safari
video/oggOgg
مدعوم من جميع المتصفحاتvideo/webmWebM

 

سمات (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>

 

المتصفحFirefoxChromeInternet ExplorerSafariOpera
من بداية الإصدار3.54.09.04.010.5
تحدد الأرقام الموجوده في الجدول السابقة إصدار المستعرض الأول الذي يدعم عنصر video بشكل كامل.


الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements