إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الوسم <video>

    تعريفه

    بشكل عام نستخدم الوسم <video> لإعلام المتصفح أننا نريد عرض فيديو في الصفحة.
    لتحديد الفيديو الذي نريد تشغيله فيه نستخدم الوسم <source>.

    هناك خصائص عديدة يمكن إضافتها لهذين الوسمين و لكن الخصائص التالية هي الأهم و التي لا بد من إضافتها:

    • بالنسبة للوسم <video> نضيف الخاصية controls لإظهار أزرار تحكم في نافذة الفيديو.
    • بالنسبة للوسم <source> نضيف الخاصية src لتحديد مسار الفيديو الذي سيتم تشغيله, و الخاصية type لتحديد نوع الفيديو الذي سيتم تشغيله.

    معلومة تقنية

    أنواع الفيديوهات التي يمكن تشغيلها في أغلب المتصفحات هي .mp4 و .webm و .ogg.
    نقصد بذلك أن المتصفحات مهيئة للتعامل مع هذه الأنواع بدون الحاجة لأي إضافات مع الإشارة إلى أنه في حال كان جهاز المستخدم ضعيف و الفيديو الموضوع في الصفحة دقته عالية جداً فهذا الأمر سيؤدي لعدم تمكن المتصفح من تشغيل الفيديو عنده.

    إذاً إلى جانب أنواع الفيديوهات التي يمكن تشغيلها فإن دقة الفيديوهات أمر يجب النظر إليه عند معرفة ما هي الفيديوهات التي يمكن أن تعمل عند المستخدم.
    بشكل عام الدقة 360p تعمل عند جميع المستخدمين.

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

    دعم المتصفحات

    الجدول التالي يظهر المتصفحات التي تدعم الوسم <video>.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 3.5 10.5 3.1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم

    خصائصه

    نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


    الخاصية autoplay

    يمكن إضافتها للوسم لتحديد ما إن كان سيتم تشغيل الفيديو بشكل تلقائي أم لا.
    في حال تم تمرير القيمة true لها فهذا يعني أنه سيتم تشيغل الملف بشكل تلقائي, و في حال تم تمرير القيمة false لها فهذا يعني أنه لن يتم ذلك.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 3.5 10.5 3.1 مدعوم مدعوم 4 مدعوم 10.0 مدعوم


    الخاصية controls

    يمكن إضافتها للوسم لتحديد ما إن كان سيتم إظهار تحكم بالفيديو كتشغيله, إيقافه و تسريعه إلخ.. أم لا.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 3.5 10.5 3.1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    الخاصية crossorigin

    نضيفها للوسم في حال أردنا عرض فيديو موجودة في موقع آخر و هذا الفيديو سيتم عرضه لاحقاً بداخل <canvas>.
    سبب ذلك أن الوسم <canvas> لا يسمح برسم فيديو بداخله ما لم يكن بالأساس موجود في نفس الموقع.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    ؟ ≤18 12 ؟ ؟ ؟ ؟ 14 ؟ ؟ ؟

    يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية crossorigin لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب الذي يقضي بجلب الفيديو.

    القيمة معناها
    anonymous في حال وضع هذا القيمة فهذا يعني أن الفيديو الذي يتم جلبها لا يمكن استخدامه بداخل <canvas> في حال كان من موقع آخر و هذه القيمة الإفتراضية لها في حال لم تحدد ذلك بنفسك أو في حال مررت لها قيمة خاطئة.
    use-credentials في حال وضع هذه القيمة فهذا يعني أنه يمكن استخدام الفيديو بداخل <canvas> حتى لو كان من موقع آخر لطالما أن الموقع الآخر في الأساس لا يعارض ذلك.


    الخاصية height

    يمكن إضافتها للوسم لتحديد كم سيكون طول الفيديو الذي يتم عرضه بالبكسل.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 3.5 10.5 3.1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    الخاصية loop

    يمكن إضافتها للوسم لتحديد ما إن كان الفيديو سيعاد تشغيله بشكل تلقائي كلما وصل إلى النهاية أم لا.
    في حال تم تمرير القيمة true لها فهذا يعني أنه سيتم إعادة تشغيله بشكل تلقائي حين يصل للنهاية, و في حال تم تمرير القيمة false لها فهذا يعني أنه لن يتم ذلك.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 11 10.5 3.1 مدعوم مدعوم 14 مدعوم 6 مدعوم


    الخاصية muted

    يمكن إضافتها للوسم لجعل الفيديو مقطوع الصوت ( Muted ) بمعنى أنه حتى و لو كان شغال فلن يكون الصوت مسموع إلى أنه يتم رفعه بشكل يدوي.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    30 12 11 مدعوم 5 مدعوم مدعوم 14 مدعوم ؟ مدعوم


    الخاصية poster

    يمكن إضافتها للوسم لوضع صورة تظهر مكان الفيديو قبل أن يتم تشغيله.
    يجب تمرير رابط الصورة التي سيتم عرضها كقيمة لها.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 3.6 10.5 3.1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    الخاصية preload

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

    • في حال تم تمرير القيمة none لها فهذا يعني أنه لا يجب أن يتم تحميل الفيديو بشكل تلقائي.
    • في حال تم تمرير القيمة metadata لها فهذا يعني أنه سيتم تحميل المعلومات الوصفية للفيديو ( Metadata ) مثل مدته.
    • في حال تم تمرير القيمة auto لها فهذا يعني أنه قد يتم تحميل الفيديو حتى و إن لم يقم المستخدم بتشغيله.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 4 مدعوم 3.1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    الخاصية src

    يمكن إضافتها للوسم لتحديد مسار الفيديو المراد تشغيله و لكن يفضّل تحديد مسار الفيديو بواسطة الوسم <source> و ليس بداخل الوسم <video> لأنه بإمكانك وضع أكثر من وسم <source> لضمان أن يعمل الفيديو عند المستخدم مهما كان نوع المتصفح الذي يستخدمه.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 3.5 10.5 3.1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    الخاصية width

    يمكن إضافتها للوسم لتحديد كم سيكون عرض الفيديو الذي يتم عرضه بالبكسل.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

    إستخدامه

    في المثال التالي قمنا بإضافة فيديو في الصفحة مع تحديد حجمه و إظهار أزرار التحكم به.

    سبب إضافة وسمين <source> هو أننا قمنا بتجهيز نسختين من نفس الفيديو, الأولى نوعها .mp4 و الثانية نوعها .ogg بهدف جعل المتصفح يحاول تشغيل أول فيديو موضوع, و إن لم ينجح سيحاول تشغيل الفيديو الثاني.

    النص Your browser does not support the video tag! يتم عرضه في الصفحة في حال كان متصفح المستخدم لا يدعم تشغيل الفيديو من الأساس.

    المثال الأول

    <video width="360" height="200" controls>
        <source src="iron-man-mark-2.mp4" type="video/mpeg">
        <source src="iron-man-mark-2.ogg" type="video/ogg">
        Your browser does not support the video tag!
    </video>
    		

    جرب الكود



    في المثال التالي قمنا بإضافة الخاصية autoplay للوسم <video> لجعل الفيديو يشتغل بشكل تلقائي عند فتح الصفحة.

    المثال الثاني

    <video width="360" height="200" controls autoplay>
        <source src="iron-man-mark-2.mp4" type="video/mp4">
        <source src="iron-man-mark-2.ogg" type="video/ogg">
        Your browser does not support the video tag!
    </video>
    		

    جرب الكود



    في المثال التالي قمنا بإضافة الخاصية poster للوسم <video> لعرض صورة مكان الفيديو قبل أن يتم تشغيله.

    المثال الثالث

    <video width="360" height="200" poster="thumbnail.PNG" controls>
        <source src="iron-man-mark-2.mp4" type="video/mp4">
        <source src="iron-man-mark-2.ogg" type="video/ogg">
        Your browser does not support the video tag!
    </video>
    		

    جرب الكود

    تصميمه الإفتراضي

    لا يوجد تصميم إفتراضي له.

    نصائح و ملاحظات

    في حال لم تحدد أحجام الفيديوهات التي سيتم عرضها فإن المتصفح سيومض على الأغلب عندما يحاول عرض الفيديوهات في الصفحة بعد أن يتم تحميلها حيث سيقوم برسم الصفحة بأكملها من جديد بلمح البصر لهذا يرى المستخدم هذا الأمر كومضة. لذلك قم دائماً بتحديد حجم الفيديوهات التي تنوي عرضها في الصفحة سواء حددت ذلك بواسطة خصائص HTML أو كود CSS.

    يفضل وضع الفيديو بأكثر من صيغة بواسطة الوسم <source> لضمان عمل الفيديو عند المستخدم مهما كان نوع و إصدار المتصفج الذي يستخدمه.

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب