القائمة الرئيسية

الصفحات

إضافة ملفات الفيديو في لغة HTML

 

مرحبا بكم ، اليوم سنشرح طريقة إضافة ورفع فيديو video في ال html ، لكن قبل بدأ الدرس ، عليك دائما طرح أسئلة على نفسك ، لكي تطور مهاراتك بإستمرار ، وفي هذا الدرس سأطرح أنا عوضا عنك بعض الأسئلة اللتي ستساعدك في تطورك و نشأت خبرتك مدى الحياة.

أسئلة ستساعدك على المضي قدما في عالم برمجة الويب أو البرمجة عامة

إذا ، ماهو فيديو video ؟ وكيف يتم إنشاء العنصر الخاص بإضافة ورفع الفيديو video ؟ وما نوع وسمه في ال html ؟ وما هو إسم هذا العنصر ؟ كل هذه الأسئلة سنجيب عنها خلال هذا الدرس؟

ماهو ملف الفيديو ؟

تنسيق ملف الفيديو هو نوع من تنسيق الملف لتخزين بيانات الفيديو الرقمية على نظام الكمبيوتر. يتم تخزين الفيديو دائمًا تقريبًا باستخدام الضغط مع فقدان البيانات لتقليل حجم الملف.

لإضافة أو رفع فيديو على موقعك ، يجب عليك أولا إضافة إسم العنصر ، وماهو ، وماهو إسم هذا العنصر ؟ العنصر الخاص لإضافة أو رفع فيديو على موقعك ، هو العنصر video هو عنصر ذو وسمين ، الوسم الخاص بالبداية <video> و وسم النهاية <video/>

كأي عنصر في ال html ، لابد وأنه يتوفر على خصائص و مميزات ، إذا ماهي مميزات هذا العنصر ، العنصر الخاص برفع و إضافة فيديو لموقعك يتميز بنفس خصائص العنصر الخاص برفع و إضافة الفيديو لموقعك ، و من أهم خصائصه الخاصية src التي تتيح لك إضافة مصدر الفيديو أو رابطه ، لكن عليك الإنتباه لهذه النقطة أولا ، إذا كنت من اللذين لهم رابط الفيديو ، فإن كل ماعليك هو نسخ الرابط و لصقه داخل الميزة scr ، لكن إذا كنت من اللذين لديهم ملف الفيديو ، فعليك الإنتباه لهذه الخطوات التالية ، لأن أي خطأ قد يتسبب في عدم ظهور ملف الفيديو في صفحة الويب أو موقعك ، إذا إنتبه جيدا.

الخطوات :

  أولا : عليك وضع ملف الفيديو في المجلد الخاص بك.

  ثنيا : عليك تحديد إسم صالح للملف ، أي يكون بالأحرف اللاتنية وخال من الأشكال الخاصة. 

✦ ثالثا : عليك تحديد إسم ملف الفيديو اللذي تريد رفعه على موقعك أو صفحة الويب  داخل الميزة src مع تحديد صيغة الفيديو مثل : mp4 ، mkv ، mov.

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

العنصر video توجد به الكثير من الميزات و الخاصيات الرائعة ، لهذا سأشرح لكم بعض الميزات المهمة بالعنصر فيديو من الخصائص و الميزات التي توجد بالعنصر فيديو هي ميزة التحكم بإيقاف أو تشغيل الصوت بعد تحميل صفحة أو موقع الويب الخاص بك أي يمكنك أن تحدد هل عند تشغيل ملف الفيديو أن يكون الصوت يعمل أو لا يعمل

 مثال : <video src="music.mp4" controls muted></video> 

بهذا المثال قمنا بإضافة خاصية mutedالتي تأمر المتصفح بعدم عمل صوت الملف  حتى يكبس المستخدم على علامة تعديل الصوت ، أي أن الزائر يمكنه التعديل على قيمة الصوت ، لكن تكون القيمة الإفتراضية هي الصوت صامت أيضا هناك خاصية يمكنك إضافتها للعنصر فيديو تمكنك من تشغيل ملف الفيديوعند تحميل صفحة الويب أو الموقع الخاص بك تلقائيا و هي خاصية التشغيل التلقائي autoplay ، تمكنك هذه الخاصية من تشغيل الفيديو تلقائيا بعدما يتم تحمييل موقعك أو صفحة الويب الخاصة بك لكنك ستلاحظ أن هذه الخاصية لن تعمل حتى لو أضفتها للعنصر فيديو إذا ، لماذا لا تعمل خاصية التشغيل التلقائي لملف الفيديوعند إعادة تحميل صفحة الويب أو الموقع الخاص بك؟ الإجابة هي أن متصفح جوجل كروم يمنع تلك الخاصية من التطبيق ، لكن في بعض المتصفحات الاخرى لا يمنع ذلك أبدا مثل متصفح FireFox لكن لإجبار متصفح جوجل كروم أو أي متصفح اخر يمنع تطبيق هذه الخاصية على الإضطرار لتفعيلها سنحتاج لاستخدام لغة الجافا سكربت لكن نحن بالطبع لن نستخدمها لأننا لازلنا بمرحلة المبتدئين في برمجة مواقع الويب و صفحات الويب بالنسبة لخاصية إعادة تكرار ملف الفيديو عند إكتماله ، توجد هناك خاصية تسمى خاصية التكرار loop ، باستخدام هذه الخاصية فنحن نأمر المتصفح بإعادة تكرار تشغيل ملف الفيديوعند إكتماله في بعض الأحيان تريد إضافة خاصية تساعدك على تحميل ملف الفيديو بعد تحميل الصفحة  لعدم بطئ الموقع أو صفحة الويب و تبذير الأنترنت لمستخدم موقعك اذن ، كيف يمكنني جعل ملف الفيديو لا يتم تشغيله بعد تحميل موقعي أو صفحة الويب؟ لجعل ملف الفيديو لا يتم تشغيله تلقائيا بعد تحميل صفحة الويب أو الموقع الخاص بك يمكنك إضافة خاصية preload مع قيمة none.

<video src="music.mp4" controls preload="none"></video> : مثال 

في هذا المثال أخبرنا المتصفح بعدم تشغيل ملف  الفيديو تلقائيا بعد تحميل الصفحة أي أن هذه الخاصية تضاضد خاصية autoplay عند إضافة القيمة none لكن لديها قيمة ، metadata التي تخبر المتصفح بتحيل الموقع وبعدها تحميل الملف الصوتي و قيمة auto التي تأمر بها المتصفح بتحميل الموقع و الملف الصوتي حسب سرعة الأنترنت كل هذه الميزات أنت حر في استعمالها عدا خاصية التحكم controls ، في بعض الأحيان أيضا تريد أن تحدد الصورة المصغرة اللتي سيراها المستخدم عند الدخول لموقعك ، هذه الخاصية يستعملها موقع اليويتوب أيضا ، إنها خاصية poster ، هذه الخاصية تحدد لنا الصورة المصغرة اللتي سيراها المستخدم ، إذا لتشغيلها كل ما عليك القيام به هو إضافة رابط الصورة أو إضافة صورة توجد بحاسوبك مع إحترام قوانين درس كيفية و طريقة إضافة صورة لموقعك.

تجميل و تحسين ملف الفيديو

لتحسين مظهر العنصر video ، يجب عليك دراسة دورة css ، لكن في هذا الدرس سأريكم كيفية وطريقة تحديد العرض و الإرتفاع الخاص بالعناصر ، لإضافة العرض الخاص بالعناصر في ال html ، يجب عليك إضافة الخاصية width مع القيمة بالنسبة المئوية "%" مثال : "width="60% ، في هذا المثال أمرنا المتصفح بتحديد أو إضافة القيمة 60% للعنصر x ، ولإضافة الإرتفاع الخاص بالعنصر يجب ، إضافة الخاصية height مع تحديد القيمة بإستخدام px مثال : "height="420px ، بهذا المثال أمرنا أو أخبرنا المتصفح بتحديد 420 px للعنصر x.

هكذا نكون قد أكملنا درسنا اليوم ، إلى اللقاء بالدرس القادم.

مشاهدة الدرس

تعليقات