العلامات المتعلقة بالوسائط

تشرح هذه المقالة العلامات المتعلقة بالوسائط.۔

يوضح كيفية وصف الصور، الفيديوهات، الصوت، وما إلى ذلك في HTML، وكذلك العناصر القابلة للتصغير والأُطُر المضمنة.۔

YouTube Video

العلامات المتعلقة بالوسائط

علامة <img>

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• تُستخدم علامة <img> لتضمين الصور.۔ يحدد السمة src مسار الصورة، وتوفر السمة alt وصفًا عندما يتعذر عرض الصورة.۔

علامات <figure> و <figcaption>

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• تجمع علامة <figure> محتوى الوسائط مثل الصور أو الرسوم التوضيحية مع شرح باستخدام علامة <figcaption>.۔

علامة <picture>

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• تُستخدم علامة <picture> لدعم الصور المتجاوبة، مما يسمح باختيار الصورة المناسبة بناءً على ظروف العرض المختلفة.۔

• تُحدد خاصية media الشروط بنفس تنسيق استفسارات وسائط CSS۔

  • يمكنك تحديد شروط مثل العرض الأدنى (min-width)، العرض الأقصى (max-width)، أو اتجاه الشاشة (orientation)۔

• في هذا المثال، يتم عرض الصور التالية اعتمادًا على عرض الشاشة۔

  • إذا كان عرض الشاشة 800 بكسل أو أكثر، يتم عرض large.jpg۔
  • إذا كان عرض الشاشة 400 بكسل أو أكثر ولكن أقل من 800 بكسل، يتم عرض medium.jpg۔
  • إذا كان عرض الشاشة أقل من 400 بكسل، يتم عرض small.jpg (الصورة في علامة <img>)۔

علامة <canvas>

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• توفر علامة <canvas> منطقة يمكن رسم الرسومات الديناميكية عليها باستخدام JavaScript.۔

علامة <map>

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• تُستخدم علامة <map> لتحديد خريطة صورة.۔ يتم تحديد المناطق القابلة للنقر داخل الخريطة باستخدام علامة <area>.۔ يتيح ذلك لأجزاء معينة من الصورة أن تكون قابلة للنقر، مما يؤدي إلى رابط.۔
• حدد اسم عنصر الخريطة المرتبط (علامة <map>) في خاصية usemap لعلامة <img>، مسبوقًا بالرمز #۔
• عن طريق تحديد خاصية alt بشكل مناسب في علامة <area>، يمكنك تحسين الوصول للمستخدمين ضعاف البصر۔

علامة <embed>

1<embed src="movie.mp4" width="300" height="200">

• تُستخدم علامة <embed> لتضمين محتوى خارجي مثل ملفات PDF أو الفيديو أو الصوت.۔

علامة <video>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• تُستخدم علامة <video> لتضمين محتوى الفيديو.۔ يمكنك تحديد تنسيقات متعددة باستخدام علامة <source>.۔

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• تتيح لك السمة preload تحديد مقدار الفيديو الذي يجب تحميله بواسطة المتصفح قبل بدء التشغيل۔
  • auto يُوجه المتصفح لتحميل الوسائط بالكامل مسبقًا۔ يمكن أن يقلل من التأخير عند بدء التشغيل، ولكن قد يتم تنزيل البيانات حتى إذا لم يقم المستخدم بتشغيل الوسائط۔
  • metadata يقوم فقط بتحميل البيانات الوصفية للوسائط (مثل مدة الفيديو ومعلومات المسارات)۔ لا يتم تحميل بيانات الوسائط الفعلية حتى يبدأ المستخدم التشغيل۔ هذا مناسب عندما تحتاج إلى معلومات موجزة عن الوسائط۔
  • none لا يقوم بتحميل ملف الوسائط مسبقًا۔ لا يقوم الوسائط بتنزيل الموارد حتى يبدأ التشغيل۔ هذا مناسب عندما تريد تقليل استهلاك البيانات۔

علامة <audio>

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• تُستخدم علامة <audio> لتضمين محتوى الصوت.۔ تدعم علامة <source> التنسيقات المتعددة.۔
• مثل وسم <video>، يمكن استخدام السمة preload لتحديد مقدار الصوت الذي يجب تحميله قبل بدء التشغيل۔

وسم <track>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• يُستخدم وسم <track> لتحديد مسارات نصوص مثل الترجمات والتسميات التوضيحية۔ يمكن استخدامه داخل علامات <audio> أو <video>۔
• تتيح لك السمة kind تحديد غرض المسار (مثل الترجمات، التسميات التوضيحية، الفصول، إلخ.)۔ يمكنك تحديد القيم التالية۔
  • subtitles توفر ترجمات تُترجم محتوى الفيديو أو الصوت أو تجعله أسهل لفهم المشاهدين۔ الغرض الرئيسي منها هو الترجمة المباشرة للصوت۔
  • captions توفر معلومات إضافية مثل الموسيقى والمؤثرات الصوتية للأشخاص الذين يعانون من الصمم أو ضعف السمع، إلى جانب الصوت۔
  • descriptions هي مسارات تصف المحتوى البصري للفيديو، مثل الإجراءات والمشاهد، للأشخاص الذين يعانون من ضعف البصر۔
  • chapters توفر علامات للفصول (عناوين الفصول) لتحديد نقاط محددة داخل الفيديو۔
  • metadata توفر معلومات إضافية لتحليل أو معالجة الوسائط لكنها لا تُعرض للمستخدمين۔

علامة <iframe>

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• تُستخدم علامة <iframe> لتضمين صفحات HTML أخرى أو محتوى خارجي (مثل المواقع الإلكترونية، الفيديوهات، أو الوثائق) في الصفحة الحالية.۔ غالبًا ما تُستخدم لتضمين فيديوهات YouTube في الصفحة.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video