HTML - Videos تضمين الفيديوهات

-

HTML 🎥 تضمين الفيديوهات

تُستخدم الوسوم <video> و <source> في HTML لتضمين وتشغيل مقاطع الفيديو مباشرة داخل صفحات الويب.

✅ وسم <video>

هو العنصر الرئيسي المستخدم لتشغيل الفيديو داخل المتصفح.

🔸 الصيغة الأساسية:


<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

⬅ يتم استخدام أكثر من تنسيق فيديو لضمان التوافق مع جميع المتصفحات.

🎛 أهم الخصائص (Attributes):

  • controls: لإظهار أدوات التشغيل (تشغيل، إيقاف مؤقت، مستوى الصوت، إلخ).
  • autoplay: لتشغيل الفيديو تلقائيًا عند تحميل الصفحة.
  • loop: لإعادة تشغيل الفيديو تلقائيًا بعد انتهائه.
  • muted: لجعل الصوت مكتومًا افتراضيًا.
  • poster: لتحديد صورة تُعرض قبل تشغيل الفيديو.
  • preload: لتحديد ما إذا كان يتم تحميل الفيديو مسبقًا أم لا (none, metadata, auto).

🧪 مثال آخر باستخدام خصائص إضافية:


<video width="480" height="320" controls autoplay muted loop poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support HTML5 video.
</video>

⬅ هذا المثال يشغّل الفيديو تلقائيًا بدون صوت ويعيد تشغيله باستمرار مع عرض صورة مبدئية.

📌 نصيحة:

من الأفضل توفير أكثر من تنسيق (مثل MP4 و WebM) لتضمن أن الفيديو سيعمل في معظم المتصفحات.

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

HTML - Text Formatting تنسيقات النص

-
تنسيقات النص في HTML (HTML Text Formatting) توفر HTML مجموعة من الوسوم الخاصة بتنسيق النصوص، مثل جعل النص عريض (Bold)، مائل (Italic)، تحته خط، مشطوب، وغيرها. ✅ أشهر وسوم التنسيق: الوسم الوصف <b> لجعل النص عريض بدون أهمية معنوية <strong> لجعل النص عريض مع دلالة على الأهمية <i> لجعل النص مائل بدون أهمية معنوية <em> لجعل النص مائل مع دلالة على التأكيد <mark> لتمييز النص بخلفية صفراء مثل التظليل <small> لجعل النص بحجم أصغر <del> لنص مشطوب <ins> لنص مضاف حديثًا <sub> لنص سفلي (H 2 O) <sup> لنص علوي (x 2 ) 🧪 أمثلة على تنسيق النصوص: <p>هذا نص <b>عريض</b> باستخدام وسم <b>.</p> <p>هذا نص <strong...
قراءة المزيد

1.1 SQL Introduction

-
SQL Introduction – مقدمة في SQL  ما هي SQL؟ SQL هي اختصار لـ Structured Query Language (لغة الاستعلام البنيوية). SQL تُستخدم للوصول إلى قواعد البيانات والتحكم فيها ( access and manipulate databases ). SQL تعتبر معيارًا معتمدًا من ANSI (المعهد القومي الأمريكي للمعايير).  ماذا يمكن أن تفعل SQL؟ SQL يمكنها تنفيذ الاستعلامات على قاعدة البيانات ( execute queries against a database ). SQL يمكنها استرجاع البيانات من قاعدة البيانات ( retrieve data from a database ). SQL يمكنها إدخال سجلات في قاعدة البيانات ( insert records in a database ). SQL يمكنها تحديث السجلات في قاعدة البيانات ( update records in a database ). SQL يمكنها حذف السجلات من قاعدة البيانات ( delete records from a database ). SQL يمكنها إنشاء قواعد بيانات جديدة ( create new databases ). SQL يمكنها إنشاء جداول جديدة داخل قاعدة البيانات ( create new tables in a database ). SQL يمكنها إنشاء إجراءات مخزنة ( stored procedures ) داخل قاعدة البيانات. SQL يمكنها إنشاء عروض...
قراءة المزيد

Entity Framework - مقدمة عن Entity Framework

-
مقدمة عن Entity Framework 📜 لمحة تاريخية عن Entity Framework - أول إصدار من Entity Framework ظهر سنة 2008 كجزء من .NET Framework. - كان اسمه الرسمي ببساطة "Entity Framework"، ويعمل على ربط التطبيقات مع قواعد بيانات SQL بطريقة برمجية. - Entity Framework وفر وقتها أسلوبين رئيسيين للعمل: Database First ➔ إنشاء الكود انطلاقًا من قاعدة بيانات موجودة. Model First ➔ إنشاء قاعدة البيانات انطلاقًا من نموذج (Model) مرسوم. ✅ مع الوقت تطورت EF وتم إضافة أسلوب جديد يسمى Code First الذي أصبح من أكثر الطرق استخدامًا اليوم. 🔗 إصدارات Entity Framework قبل EF Core Entity Framework 1.0 (2008) - الإصدار الأول وكان محدود الإمكانيات. Entity Framework 4.0 (2010) - تحسينات كبيرة ودعم أفضل لـ POCO classes. Entity Framework 5.0 و6.0 (2012-2013) - دعم مميزات متقدمة مثل Migrations وتحسين الأداء. 💡 ملاحظة: لم يكن هناك EF 2.0 أو EF 3.0 رسميًا. 🚀 لماذا تم تطوير Entity Framework Core؟ مع ظهور .NET Core، احتاجت مايكروسوفت إلى نسخة خفيفة وعصرية م...
قراءة المزيد