شرح الوسم track و u و ul وvar و wbr و الوسم video في HTML

شرح الوسم <track> في HTML

تعريف الوسم <track>

نستخدم الوسم <track> على النحو التالي لإضافة ترجمة كتابية للملف الصوتي أو للفيديو المعروض في الصفحة.

			  <track src="file-src" kind="for-what" srclang="lang" label="which-lang">	
			

• مكان الكلمة file-src نضع مسار الملف الذي يحتوي على الترجمة و الذي يفترض أن يكون نوعه vtt.

• مكان الكلمة for-what نضع قيمة محددة لإعلام المتصفح كيف سيتم التعامل مع ملف الترجمة.

• مكان الكلمة lang نضع أحرف مختصرة تشير لإسم اللغة التي سيتم عرض الترجمة بها.

• مكان الكلمة which-lang نضع إسم لغة الترجمة التي سيراها المستخدم حتى يعرف بأي لغة الترجمة متوفرة.

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

دعم المتصفحات الوسم <track>

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

Chrome	Edge	Firefox	Opera	Safari	Android Webview	Chrome for Android	Firefox for Android	Opera for Android	Safari for IOS	Samsung Internet
23	12	31	12.1	6	مدعوم	25	31	؟	6	1.5

خصائص الوسم <track>

الخاصية default

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

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

Chrome	Edge	Firefox	Opera	Safari	Android Webview	Chrome for Android	Firefox for Android	Opera for Android	Safari for IOS	Samsung Internet
23	12	31	12.1	6	4.4	25	31	؟	؟	1.5

الخاصية kind

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

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

Chrome	Edge	Firefox	Opera	Safari	Android Webview	Chrome for Android	Firefox for Android	Opera for Android	Safari for IOS	Samsung Internet
23	12	31	12.1	6	4.4	25	31	؟	؟	1.5

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

القيمة	معناها
subtitles	هذه القيمة الإفتراضية و هي تعني أن الترجمة سيتم عرضها لكل ما يتم قوله في الفيديو أو لنص يظهر في الفيديو أو لإظهار نص بين مقاطع الفيديو إلخ..
captions	الترجمة سيتم عرضها لملف صوتي سواء كان هذا الملف عبارة عن حوار ما أو أغنية و هذا مناسب للمستخدم في حال كان أصم.
chapters	الترجمة سيتم عرضها لعنواين و هذا مناسب للعنواين الموضوعة التي تسمح بالتنقل إلى مقاطع محددةة في الفيديو.
descriptions	الترجمة سيتم عرضها لوصف ما يحدث في الفيديو و هذا مناسب للمستخدم في حال كان أعمى.
metadata	النص لن يتم عرضه أمام المستخدم حيث أنه عبارة عن سكربت الفيديو, أي ما تم قوله في الملف الصوتي أو الفيديو.

الخاصية label

يجب إضافتها للوسم لتحديد إسم لغة الترجمة الذي سيظهر أمام المستخدم و الذي يمكنه اختياره لعرض الترجمة به.

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

Chrome	Edge	Firefox	Opera	Safari	Android Webview	Chrome for Android	Firefox for Android	Opera for Android	Safari for IOS	Samsung Internet
23	12	31	12.1	6	4.4	25	31	؟	؟	1.5

الخاصية src

يجب إضافتها للوسم لتحديد مسار الملف الذي يحتوي على الترجمة.

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

Chrome	Edge	Firefox	Opera	Safari	Android Webview	Chrome for Android	Firefox for Android	Opera for Android	Safari for IOS	Samsung Internet
23	12	31	12.1	6	4.4	25	31	؟	؟	1.5

الخاصية srclang

يجب إضافتها للوسم لتحديد لغة الترجمة الموضوعة فيه.

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

Chrome	Edge	Firefox	Opera	Safari	Android Webview	Chrome for Android	Firefox for Android	Opera for Android	Safari for IOS	Samsung Internet
23	12	31	12.1	6	4.4	25	31	؟	؟	1.5

إستخدام الوسم <track>

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

مثال

				<video width="320" height="240" src="who-am-i.mp4" controls>
				<track kind="subtitles" label="العربية" src="ar.vtt" srclang="ar" default/>
				<track kind="subtitles" label="English" src="en.vtt" srclang="en"/>
				Sorry, your browser doesn't support embedded videos.
				</video>
			  

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

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

			  00:00:04:000 --> 00:00:06.000
			  Hello, my name is Mhamad Harmush

			  00:00:07.000 --> 00:00:10.000
			  In this lesson I'll teach you how
			  to add tracks to videos
			

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

مثال

				::cue {
				background: none;
				color: papayawhip;
				font-size: 17px;
				}
			  

شرح الوسم <u> في HTML

تعريف الوسم <u>

نستخدم الوسم <u> على هذا النحو <u> </u> لعرض خط تحت النص الذي نضعه بداخله.
يمكن الإستفادة من هذا الوسم لوضع خط تحت الكلام الذي نريد الإشارة إلى وجود خطأ فيه.

دعم المتصفحات للوسم <u>

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

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

خصائص الوسم <u>

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بعرض الكلمة Mhamad بخط عريض.

مثال

				<u>Name:</u> Mhamad Harmush
			  

التصميم الإفتراضي للوسم <u>

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

			  u {
			  text-decoration: underline;
			  }
			

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

• لا تستخدم الوسم <u> لوضع خط تحت الرابط لأن هذا الأمر مربك جداً بالنسبة للمستخدم.

• إستخدام الوسم <ins> بدل الوسم <u> إذا أردت الإشارة لنص مضاف.

يمكنك تحسين تصميم الشكل و اللون الإفتراضي للخط الذي يظهره تحت الوسم <u> بواسطة CSS كالتالي.

مثال

				u {
				text-decoration: red wavy underline;
				text-underline-position: under;
				}
			  

شرح الوسم <ul> في HTML

تعريف الوسم <ul>

نستخدم الوسم <ul> لعرض قائمة غير مرتبة ( Unordered List ) في الصفحة و نقصد بذلك عرض مجموعة عناصر بدون الإهتمام بأمكانها مثل أي عنصر يجب أن يكون الأول, أي عنصر يجب أن يكون الثالث, أي عنصر يجب أن يكون الرابع و هكذا.
أهم ما يميز هذا النوع من القوائم أنه يمكنك تحديد الرمز, الحرف, أو الأيقونة التي ستظهر في بداية كل عنصر بنفسك بواسطة CSS.

أي عنصر نريد إضافته في القائمة يجب وضعه بداخل وسم <li> كالتالي.

			  <ul>
			  <li>element-1</li>
			  <li>element-2</li>
			  <li>element-3</li>
			  </ul>
			

معلومة تقنية

إفتراضياً, في حال لم تحدد ما هو الرمز الذي سيظهر في بداية كل عنصر فإن المتصفح سيقوم بوضع الرمز ● في بداية كل عنصر.
و في حال أضفت قائمة داخلية بداخلها فإن المتصفح سيقوم بوضع الرمز ○ في بداية كل عنصر.
و في حال أضفت قائمة داخلية بداخلها فإن المتصفح سيقوم بوضع الرمز ■ في بداية كل عنصر.

دعم المتصفحات للوسم <ul>

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

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

خصائص الوسم <ul>

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدام الوسم <ul>

في المثال التالي قمنا بعرض قائمة نوعها <ul> وضعنا فيها 3 عناصر.

مثال

				<ul>
				<li>Apple</li>
				<li>Orange</li>
				<li>Mango</li>
				</ul>
			  

التصميم الإفتراضي للوسم <ul>

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

			  ul {
			  display: block;
			  list-style-type: disc;
			  margin-top: 1em;
			  margin-bottom: 1 em;
			  margin-left: 0;
			  margin-right: 0;
			  padding-left: 40px;
			  }
			

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

يمكنك إظهار القوائم بشكل متداخل بحيث يظهر تحت العنصر قائمة تابعة له, عندها أي عنصر تريد وضع قائمة خاصة له يجب أن تعرّف القائمة بداخل العنصر نفسه.

المثال الأول

				<ul>
				<!-- العنصر الأول وضعنا فيه قائمة فيها ثلاث عناصر -->
				<li>Front-End
				<ul>
				<li>HTML</li>
				<li>CSS</li>
				<li>Javascript</li>
				</ul>
				</li>
				<!-- العنصر الثاني وضعنا فيه قائمة فيها عنصرين -->
				<li>Back-End
				<ul>
				<li>MySQL</li>
				<li>Aspnetcore</li>
				</ul>
				</li>
				</ul>
			  

في المثال التالي قمنا باختيار نوع التنقيط الذي يشبه دائرة فارغة بواسطة CSS ليظهر في بداية كل عنصر.

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

				ul {
				list-style-type: circle;
				}
			  

في المثال التالي قمنا باختيار الرمز » كنوع التنقيط الذي سيتم وضعه في بداية كل عنصر.

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

				ul {
				list-style-type: none;
				}
				ul li:before {
				content: "» ";
				}
			  

في المثال التالي قمنا باختيار صورة كنوع التنقيط الذي سيتم وضعه في بداية كل عنصر.

المثال الرابع

				ul {
				list-style: outside url("hand-icon.PNG");
				}
			  

 شرح الوسم <var> في HTML

تعريف الوسم <var>

نستخدم الوسم <var> على هذا النحو <var>variable</var> لعرض أسماء المتغيرات المستخدمة في العمليات الحسابية بشكل مميز عن باقي النص.

مكان الكلمة variable نمرر إسم المتغير الذي نريد عرضه بشكل متميز عن باقي النص.

دعم المتصفحات للوسم <var>

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

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

خصائص الوسم <var>

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدام الوسم <var>

في المثال التالي قمنا بوضع الحرف x الذي هو عبارة عن إسم متغير بداخل الوسم <var> و قمنا بعرض المعادلة الموضوعة في آخر السطر بداخل <code> </code> حتى يظهر بشكل مختلف عن النص العادي أيضاً.

مثال

				Calculate the value of <var>x</var> where <code>x + 5 = 13</code>
			  

التصميم الإفتراضي للوسم <var>

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

			  var {
			  font-style: italic;
			  }
			

شرح الوسم <video> في HTML

تعريف الوسم <video>

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

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

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

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

معلومة تقنية

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

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

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

دعم المتصفحات للوسم <video>

الجدول التالي يظهر المتصفحات التي تدعم الوسم <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	مدعوم	مدعوم	مدعوم

خصائص الوسم <video>

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

الخاصية 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	مدعوم	مدعوم	مدعوم	مدعوم	مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

إستخدام الوسم <video>

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

سبب إضافة وسمين <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>
			  

التصميم الإفتراضي للوسم <video>

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

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

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

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

شرح الوسم <wbr> في HTML

تعريف الوسم <wbr>

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

نستخدم الوسم <wbr> لجعل المتصفح يقطع النص بالشكل الذي نحدده له.

فعلياً, كل جزئية في النص الطويل الذي يتكون من أحرف كثيرة متلاصقة و التي تريد نقلها على سطر جديد في حال كان السطر الحالي لا يتسع لعرض كل الأحرف الموضوعة فيها يجب وضعها بداخل <wbr> </wbr> فقط.

دعم المتصفحات للوسم <b>

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

Chrome	Edge	Firefox	Opera	Safari	Android Webview	Chrome for Android	Firefox for Android	Opera for Android	Safari for IOS	Samsung Internet
1	79	1	11.6	4	مدعوم	مدعوم	4	؟	؟	مدعوم

خصائص الوسم <wbr>

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدام الوسم <wbr>

في المثال التالي قمنا بتقسيم النص المتلاصق System.out.print() بواسطة الوسم <wbr> إلى ثلاث جزئيات هي System و .out و .print().

مثال

				<wbr>System</wbr><wbr>.out</wbr><wbr>.print()</wbr>
			  

التصميم الإفتراضي للوسم <wbr>

لا يوجد تصميم إفتراضي له لأنه بالأساس شيء لا يتم عرضه أمام المستخدم.

تعديل المقال