في هذا الدرس 5تصفّح المواضيع
HTML video
مقاطع الفيديو في لغة HTML
HTML video مقاطع الفيديو في لغة HTML
تستطيع تشغيل فيديو في صفحة HTML عن طريق استخدام عنصر <video>.
- يجب إضافة خاصية controls attribute لكي يظهر على المتصفح شريط الأدوات الخاص بالمقطع المرئي، والذي تظهر فيه خيارات التحكم في إيقاف الفيديو وتشغيله، وخيارات كتم الصوت وتشغيله وغير ذلك..
- عن طريق خاصية height وخاصية width يمكن التحكم في طول وعرض الفيديو.
- يمكن تحديد مسار الفيديو بسمة
srcعلى عنصر<video>مباشرة، أو بوضع عنصر أو أكثر من<source>داخله لتوفير صيغ بديلة. - عن طريق خاصية src مع عنصر <source> يتم الإشارة إلى مسار الفيديو سواء كان المسار من رابط خارجي أو رابط داخلي.
- النص الموجود بين علامة open tag وبين علامة closet tag (علامة بداية عنصر <video> وعلامة إغلاق العنصر) يظهر فقط على المتصفحات التي لا تدعم عنصر
<video>؛ وليس بديلًا مضمونًا عند فشل تحميل ملف في متصفح يدعم العنصر. - من حاويات الفيديو الشائعة MP4 وWebM وOgg. يعتمد التشغيل على دعم المتصفح للحاوية وترميز الصوت والصورة داخلها، وليس على امتداد الملف وحده.
HTML video
يُستخدم عنصر HTML video لعرض مقطع مرئي على صفحة الويب.
<video controls width="320" height="240">
<source src="/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML video attributes
خصائص عنصر HTML video
HTML video attributes خصائص عنصر HTML video
| الخاصية attribute | وظيفتها description |
|---|---|
autoplay | سمة منطقية؛ وجودها يطلب بدء التشغيل عندما تتوافر بيانات كافية وتسمح سياسة المتصفح. لا تكتب autoplay="false" لإيقافها؛ احذف السمة. لا تعني إيقاف الفيديو قبل نهايته. |
controls | سمة منطقية تُظهر أدوات تشغيل الفيديو وإيقافه والتحكم في الصوت. |
loop | سمة منطقية تطلب العودة إلى بداية الفيديو بعد انتهائه. لتعطيلها احذف السمة بدل كتابة loop="false". |
poster | رابط صورة تُعرض قبل تشغيل الفيديو أو أثناء تنزيله. إذا غابت، لا تظهر صورة إلى أن يتوافر الإطار الأول، ثم يمكن عرض هذا الإطار. |
muted | سمة منطقية تجعل الصوت مكتومًا مبدئيًا. وجود muted="false" لا يلغي الكتم؛ احذف السمة لإلغاء الكتم الافتراضي. |
preload | تلميح غير ملزم للمتصفح: none لعدم التحميل المسبق، وmetadata لبيانات مثل المدة، وauto للسماح بتحميل الملف كاملًا. قد يتجاهل المتصفح التلميح، وطلب التشغيل التلقائي يستلزم تحميل بيانات التشغيل. |
HTML video autoplay
خاصية autoplay مع عنصر HTML video
HTML video autoplay خاصية autoplay مع عنصر HTML video
السمة autoplay تطلب تشغيل الفيديو تلقائيًا عندما يصبح جاهزًا، لكن المتصفح قد يمنع الطلب. غالبًا يُسمح بالفيديو المكتوم أو الخالي من مسار صوتي، وقد يُسمح بالصوت بعد تفاعل المستخدم أو وفق إعداداته. في المثال أدوات تحكم تتيح التشغيل اليدوي إذا لم يبدأ تلقائيًا.
HTML video autoplay
خاصية autoplay مع HTML video.
<video controls width="320" height="240" autoplay>
<source src="/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML video muted
خاصية muted مع عنصر HTML video
HTML video muted خاصية muted مع عنصر HTML video
السمة muted تجعل صوت الفيديو مكتومًا مبدئيًا، سواء استُخدمت autoplay أم بدأ المستخدم التشغيل بنفسه. لا يشترط ترتيب محدد بين السمات. الجمع بين الكتم والتشغيل التلقائي يساعد على تجنب تشغيل صوت مفاجئ، مع بقاء القرار لسياسة المتصفح.
HTML video muted
خاصية muted مع عنصر HTML video.
<video controls width="320" height="240" autoplay muted>
<source src="/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML video types
أنواع الفيديوهات المسموح بها مع عنصر HTML video
HTML video types أنواع الفيديوهات المسموح بها مع عنصر HTML video
أمثلة شائعة لحاويات الفيديو وأنواع MIME الخاصة بها؛ نجاح التشغيل يعتمد أيضًا على الترميزات التي يدعمها المتصفح داخل الملف.
| video format | MIME type |
| mp4 | video/mp4 |
| ogg | video/ogg |
| webM | video/webm |
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات16
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Video فيديو
- للمراجعة
- 02 Videos فيديوهات
- للمراجعة
- 03 Element عنصر
- للمراجعة
- 04 Controls تحكم
- للمراجعة
- 05 Attribute سمة
- للمراجعة
- 06 Play تشغيل
- للمراجعة
- 07 Pause إيقاف مؤقت
- للمراجعة
- 08 Volume مستوي الصوت
- للمراجعة
- 09 Width عرض
- للمراجعة
- 10 Height ارتفاع
- للمراجعة
- 11 Source مصدر
- للمراجعة
- 12 External خارجي
- للمراجعة
- 13 Internal داخلي
- للمراجعة
- 14 Autoplay تشغيل تلقائي
- للمراجعة
- 15 Muted صامت
- للمراجعة
- 16 Google Chrome موقع جوجل كروم
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
- للمراجعة
- 02 Src Src
- source
- مصدر
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي3 أسئلة تنتظرك ＋
عن طريق ال video element تستطيع تشغيل فيديو في صفحة الويب.؟
ماهي الخاصية التي تستخدم في تحديد اذا كان سوف يتم تشغيل الفيديو بشكل تلقائي او لا ؟
____