يمكن أن يحتوي وسم الفيديو على أكثر من مصدر فيديو مختلف، وسيختار المتصفح الأول الذي يدعمه، في هذا المثال سيتم تشغيل ملف الفيديو "video1.mp4" تلقائياً.
نوع: محتوى تعليمي
يوضح أزرار التحكم عند عرض مقطع الفيديو.
نوع: محتوى تعليمي
يبدأ تشغيل مقطع الفيديو تلقائياً.
نوع: محتوى تعليمي
يُكتم صوت مقطع الفيديو.
نوع: محتوى تعليمي
خاصية التشغيل التلقائي لا تعمل إذا لم يكن معها خاصية كتم الصوت.
نوع: METADATA
وزارة التعليم
Ministry of Education
2025 - 1447
نوع: METADATA
210
🔍 عناصر مرئية
Soccer Field
A browser window showing a webpage with the title 'Football Fan Page'. The content area displays an image with the alt text 'Soccer Field'. The image is embedded using an <img> tag with specified width, height, and border attributes.
video.html
A browser window displaying a video player interface. The video title is 'video.html'. The player shows a video of a cityscape viewed through an airplane window. It includes standard video controls like play/pause, time display (0:00 / 0:04), volume control, fullscreen, and a menu.
📄 النص الكامل للصفحة
--- SECTION: خاصية البديل (alt) ---
خاصية البديل (alt) مهمة جداً حيث يمكنك إضافتها في وسم الصورة وتعد مناسبة لمحركات البحث، وتستخدم لعرض نص بديل يصف الصورة بالكلمات إذا تعذر تحميلها.
<body>
<h2>المعرض</h2>
<img src="/Images/Soccer.jpg" width="600" height="400" alt="Soccer Field"
border="6">
</body>
--- SECTION: تنسيق عرض ملف الفيديو ---
يمكنك أيضاً استخدام الوسم لتنسيق عرض ملف الفيديو في الصفحة الإلكترونية الخاصة بك.
--- SECTION: خاصية التشغيل التلقائي (Autoplay attribute) ---
عند إضافة خاصية التشغيل التلقائي إلى وسم الفيديو، سيبدأ تشغيل الفيديو تلقائياً.
--- SECTION: خاصية كتم الصوت (Muted attribute) ---
عند إضافة خاصية كتم الصوت إلى وسم الفيديو، سيتم كتم صوت تشغيل الفيديو تلقائياً.
<body>
<h2>المعرض</h2>
<video width="500" height="300" controls autoplay muted>
<source src="video1.mp4" type="video/mp4" >
<source src="video2.ogg" type="video/ogg" >
</video>
</body>
يمكن أن يحتوي وسم الفيديو على أكثر من مصدر فيديو مختلف، وسيختار المتصفح الأول الذي يدعمه، في هذا المثال سيتم تشغيل ملف الفيديو "video1.mp4" تلقائياً.
يوضح أزرار التحكم عند عرض مقطع الفيديو.
يبدأ تشغيل مقطع الفيديو تلقائياً.
يُكتم صوت مقطع الفيديو.
خاصية التشغيل التلقائي لا تعمل إذا لم يكن معها خاصية كتم الصوت.
وزارة التعليم
Ministry of Education
2025 - 1447
210
--- VISUAL CONTEXT ---
**FIGURE**: Soccer Field
Description: A browser window showing a webpage with the title 'Football Fan Page'. The content area displays an image with the alt text 'Soccer Field'. The image is embedded using an <img> tag with specified width, height, and border attributes.
Context: Illustrates the use of the 'alt' attribute for images in HTML, providing descriptive text for accessibility and SEO.
**FIGURE**: video.html
Description: A browser window displaying a video player interface. The video title is 'video.html'. The player shows a video of a cityscape viewed through an airplane window. It includes standard video controls like play/pause, time display (0:00 / 0:04), volume control, fullscreen, and a menu.
Data: The video player is configured with 'controls', 'autoplay', and 'muted' attributes. It uses multiple source tags for different video formats (mp4 and ogg).
Context: Demonstrates how to embed video content in HTML using the <video> tag, including attributes for controls, autoplay, muted, and multiple source options for compatibility.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 4 بطاقة لهذه الصفحة
ما الغرض الأساسي من خاصية البديل (alt) في وسم الصورة <img> في HTML؟
أ) تحديد عرض وارتفاع الصورة في الصفحة.
ب) عرض نص بديل يصف الصورة بالكلمات إذا تعذر تحميلها، وهي مناسبة لمحركات البحث.
ج) التحكم في سرعة تحميل الصورة على الخادم.
د) إضافة تأثيرات حركية للصورة عند مرور المؤشر فوقها.
الإجابة الصحيحة: b
الإجابة: عرض نص بديل يصف الصورة بالكلمات إذا تعذر تحميلها، وهي مناسبة لمحركات البحث.
الشرح: 1. خاصية alt هي سمة تُضاف إلى وسم <img>. 2. توفر وصفاً نصياً للصورة. 3. تظهر هذا النص إذا فشل تحميل الصورة. 4. تساعد محركات البحث في فهم محتوى الصورة. 5. تُحسّن إمكانية الوصول للمستخدمين ذوي الإعاقات البصرية.
تلميح: تتعلق هذه الخاصية بالوصول إلى المحتوى وفهمه حتى في حالة عدم ظهور الصورة.
التصنيف: تعريف | المستوى: سهل
ما الشرط الذي يجب توفره لكي تعمل خاصية التشغيل التلقائي (autoplay) للفيديو في HTML بشكل فعال؟
أ) يجب أن يكون الفيديو مخزناً على نفس الخادم الخاص بالموقع.
ب) يجب أن يكون حجم الفيديو أقل من 10 ميجابايت.
ج) يجب أن تكون مصحوبة بخاصية كتم الصوت (muted).
د) يجب أن يحتوي الفيديو على خاصية التحكم (controls).
الإجابة الصحيحة: c
الإجابة: يجب أن تكون مصحوبة بخاصية كتم الصوت (muted).
الشرح: 1. خاصية autoplay تجعل الفيديو يبدأ التشغيل تلقائياً عند تحميل الصفحة. 2. لتحسين تجربة المستخدم ومنع الإزعاج، وضعت المتصفحات قيوداً. 3. غالباً ما تشترط المتصفحات الحديثة أن يكون الفيديو مكتوماً (muted) ليبدأ التشغيل التلقائي. 4. لذلك، خاصية التشغيل التلقائي لا تعمل إذا لم يكن معها خاصية كتم الصوت.
تلميح: تتعلق هذه القاعدة بتجربة المستخدم ومنع التشغيل المفاجئ للصوت.
التصنيف: مفهوم جوهري | المستوى: متوسط
عند تضمين فيديو في صفحة ويب باستخدام وسم <video> مع مصادر متعددة (مثل mp4 و ogg)، كيف يتصرف المتصفح؟
أ) يعرض قائمة للمستخدم ليختار التنسيق المفضل.
ب) يختار المتصفح أول مصدر فيديو يدعمه من القائمة.
ج) يحاول دمج جميع مصادر الفيديو في ملف واحد.
د) يتجاهل جميع المصادر ما لم يكن التنسيق mp4 فقط.
الإجابة الصحيحة: b
الإجابة: يختار المتصفح أول مصدر فيديو يدعمه من القائمة.
الشرح: 1. يمكن أن يحتوي وسم <video> على أكثر من وسم <source> داخله. 2. كل وسم <source> يشير إلى ملف فيديو بتنسيق مختلف (مثل mp4، ogg، webm). 3. المتصفحات تدعم تنسيقات فيديو مختلفة. 4. يفحص المتصفح مصادر الفيديو بالترتيب الذي وردت به. 5. يقوم بتشغيل أول تنسيق يتعرف عليه ويدعمه.
تلميح: يتعلق هذا السلوك بتوافق التنسيقات عبر المتصفحات المختلفة.
التصنيف: مفهوم جوهري | المستوى: متوسط
ما الوظيفة التي تؤديها خاصية 'controls' عند إضافتها إلى وسم <video> في HTML؟
أ) تتحكم في جودة دقة الفيديو المعروض.
ب) توضح أزرار التحكم (مثل التشغيل، الإيقاف، التحكم في الصوت) عند عرض مقطع الفيديو.
ج) تحد من عدد المرات التي يمكن فيها تشغيل الفيديو.
د) تشفير ملف الفيديو لحمايته من النسخ.
الإجابة الصحيحة: b
الإجابة: توضح أزرار التحكم (مثل التشغيل، الإيقاف، التحكم في الصوت) عند عرض مقطع الفيديو.
الشرح: 1. خاصية controls هي سمة بسيطة تُضاف إلى وسم <video>. 2. عند وجودها، يقوم المتصفح تلقائياً بعرض شريط تحكم أسفل الفيديو أو فوقه. 3. يتضمن شريط التحكم أزراراً أساسية مثل: تشغيل/إيقاف، شريط التقدم، التحكم في مستوى الصوت، التكبير/التصغير. 4. بدون هذه الخاصية، قد لا يكون للمستخدم طريقة واضحة للتحكم في الفيديو ما لم يتم برمجتها يدوياً.
تلميح: تتعلق هذه الخاصية بواجهة التحكم التي يراها ويتفاعل معها المستخدم.