الفرق بين المراجعتين لصفحة: «HTML/source»
ط تغيير ترتيب التصنيفات |
تعديل الأمثلة |
||
| (2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 2: | سطر 2: | ||
يُحدِّد العنصر <code><nowiki><source></nowiki></code> عدِّة مصادر لملفات الوسائط المتعددة ضمن العنصر <code>[[HTML/picture|<picture>]]</code> أو [[HTML/audio|<audio>]] أو <code>[[HTML/video|<video>]]</code>. وهذا العنصر فارغ، وأكثر استخدام شائع له هو توفير محتوى الوسائط المتعددة نفسه لكن بصيغ مختلفة لكي يستطيع المتصفح تشغيل أنسبها. | يُحدِّد العنصر <code><nowiki><source></nowiki></code> عدِّة مصادر لملفات الوسائط المتعددة ضمن العنصر <code>[[HTML/picture|<picture>]]</code> أو [[HTML/audio|<audio>]] أو <code>[[HTML/video|<video>]]</code>. وهذا العنصر فارغ، وأكثر استخدام شائع له هو توفير محتوى الوسائط المتعددة نفسه لكن بصيغ مختلفة لكي يستطيع المتصفح تشغيل أنسبها. | ||
يشرح هذا المثال كيفية توفير مقطع فيديو بصيغة webm لمن يدعم متصفحه فيديو WebM، وتوفير المقطع بصيغة | يشرح هذا المثال كيفية توفير مقطع فيديو بصيغة webm لمن يدعم متصفحه فيديو WebM، وتوفير المقطع بصيغة MP4 للمستخدمين الذين يدعم متصفحهم هذه الصيغة. | ||
إن لم يكن العنصر <code>[[HTML/audio|<audio>]]</code> أو <code>[[HTML/video|<video>]]</code> مدعومًا من المتصفح فستظهر رسالة تنبه المستخدم إلى ذلك؛ وإن لم يكن المتصفح قادرًا على تشغيل أي صيغة متاحة، فسيقع الحدث <code>error</code> وستُشير عناصر التحكم الافتراضية (إن كانت مُفعّلةً) إلى خطأ.<syntaxhighlight lang="html"> | إن لم يكن العنصر <code>[[HTML/audio|<audio>]]</code> أو <code>[[HTML/video|<video>]]</code> مدعومًا من المتصفح فستظهر رسالة تنبه المستخدم إلى ذلك؛ وإن لم يكن المتصفح قادرًا على تشغيل أي صيغة متاحة، فسيقع الحدث <code>error</code> وستُشير عناصر التحكم الافتراضية (إن كانت مُفعّلةً) إلى خطأ.<syntaxhighlight lang="html"> | ||
<video | <video> | ||
<source src=" | <source src="khamsat.webm" type="video/webm"> | ||
<source src=" | <source src="khamsat.mp4" type="video/mp4"> | ||
< | لا يدعم متصفحك العنصر <code>video</code>. | ||
</video> | </video> | ||
</syntaxhighlight>يبيّن هذه المثال كيفية تضمين مقطع صوتي باستخدام العنصر <code>[[HTML/audio|<audio>]]</code> وله أكثر من مصدر، أحدها بصيغة Ogg والآخر بصيغة MP3:<syntaxhighlight lang="html"> | </syntaxhighlight>يبيّن هذه المثال كيفية تضمين مقطع صوتي باستخدام العنصر <code>[[HTML/audio|<audio>]]</code> وله أكثر من مصدر، أحدها بصيغة Ogg والآخر بصيغة MP3:<syntaxhighlight lang="html"> | ||
<audio controls> | <audio controls="controls"> | ||
<source src=" | <source src="khamsat.ogg" type="audio/ogg"> | ||
<source src=" | <source src="khamsat.mp3" type="audio/mpeg"> | ||
لا يدعم متصفحك العنصر <code>audio</code>. | |||
</audio> | </audio> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== بطاقة العنصر == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 99: | سطر 101: | ||
*معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element HTML Living Standard]. | *معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element HTML Living Standard]. | ||
*مواصفة [https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-source-element HTML5]. | *مواصفة [https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-source-element HTML5]. | ||
[[تصنيف:HTML]] | [[تصنيف:HTML|{{SUBPAGENAME}}]] | ||
[[تصنيف:HTML Elements]] | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] | ||
[[تصنيف:Embedded content]] | [[تصنيف:HTML Embedded content|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 08:39، 21 فبراير 2018
يُحدِّد العنصر <source> عدِّة مصادر لملفات الوسائط المتعددة ضمن العنصر <picture> أو <audio> أو <video>. وهذا العنصر فارغ، وأكثر استخدام شائع له هو توفير محتوى الوسائط المتعددة نفسه لكن بصيغ مختلفة لكي يستطيع المتصفح تشغيل أنسبها.
يشرح هذا المثال كيفية توفير مقطع فيديو بصيغة webm لمن يدعم متصفحه فيديو WebM، وتوفير المقطع بصيغة MP4 للمستخدمين الذين يدعم متصفحهم هذه الصيغة.
إن لم يكن العنصر <audio> أو <video> مدعومًا من المتصفح فستظهر رسالة تنبه المستخدم إلى ذلك؛ وإن لم يكن المتصفح قادرًا على تشغيل أي صيغة متاحة، فسيقع الحدث error وستُشير عناصر التحكم الافتراضية (إن كانت مُفعّلةً) إلى خطأ.
<video>
<source src="khamsat.webm" type="video/webm">
<source src="khamsat.mp4" type="video/mp4">
لا يدعم متصفحك العنصر <code>video</code>.
</video>
يبيّن هذه المثال كيفية تضمين مقطع صوتي باستخدام العنصر <audio> وله أكثر من مصدر، أحدها بصيغة Ogg والآخر بصيغة MP3:
<audio controls="controls">
<source src="khamsat.ogg" type="audio/ogg">
<source src="khamsat.mp3" type="audio/mpeg">
لا يدعم متصفحك العنصر <code>audio</code>.
</audio>
بطاقة العنصر
| تصنيفات المحتوى | لا يوجد. |
|---|---|
| المحتوى المسموح | لا يوجد، فهو عنصرٌ فارغ. |
| الوسم المختصر | يجب أن يكون وسم البداية موجودًا، ويجب أن يُحذَف وسم النهاية. |
| العناصر الأب | عنصر <audio> أو <video> ويجب أن يكون موجودًا قبل أي محتوى فيهما وقبل العنصر <track>.
|
| واجهة DOM | HTMLSourceElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
sizes
أُضيفت هذه الخاصية في HTML5، وهي تقبل سلسلة نصية فيها قيمة أو أكثر (مفصولة بفاصلة) لمصادر القياسات المختلفة للصور. يجب أن يحتوي كل مصدر على:
- عبارة media query، والتي يجب حذفها في آخر عنصر في القائمة.
- قيمة لقياس الصورة
قيمة قياس الصورة تُحدِّد ما هو حجم الصورة المراد عرضه، وتستخدم المتصفحات عبارة media query لتحديد أحد مصادر الصورة المُعرَّفة في خاصية srcset، وذلك عندما تقترن تلك المصادر مع مُحدِّدات العرض (w).
يؤثر حجم الصورة المُختارة على الحجم الصافي للصورة (أي الحجم الذي ستُعرَض فيه الصورة إن لم تُطبَّق قواعد CSS عليها).
إذا كانت الخاصية srcset غير موجودة، أو كانت لا تحتوي على أيّة قيمة فيها مُحدِّد العرض w، فلن يكون للخاصية sizes أي أثر.
ولن يكون للخاصية sizes أي أثر إن لم يكن العنصر <source> ابنًا مباشرًا للعنصر <picture>.
src
هذه الخاصية مطلوبة إذا كان العنصر <source> ابنًا لأحد العنصرين <audio> أو <video>، وتُحدِّد رابط ملف الوسائط المتعددة.
سيتم تجاهل هذه الخاصية إن وضعت داخل العنصر <picture>.
srcset
قائمة أو أكثر من السلاسل النصية المفصولة بفاصلة , التي تُشير إلى مجموعة من مصادر الصورة المحتملة لكي يستخدم إحداها المتصفح.
تتألف كل سلسلة نصية من محتويات هذه الخاصية من:
- رابط URL لملف الصورة
- (اختياريًا) فراغ يتبعه أحد المُحدِّدات الآتية
- مُحدِّد العرض الذي هو عدد صحيح موجب يتبعه الحرف
w، وستُقسَّم قيمة مُحدِّد العرض على الحجم المصدري المُعطى في خاصية sizes لحساب كثافة البكسلات الفعلية. - مُحدِّد كثافة البكسلات التي هو عددٌ عشري موجب يتبعه الحرف
xمباشرةً.
- مُحدِّد العرض الذي هو عدد صحيح موجب يتبعه الحرف
إذا لم تعطى قيمة لأحد المُحدِّدَين السابقين فسيُسنَد للمصدر المُحدِّد الافتراضي 1x.
من غير السليم استخدام مُحدِّد العرض مع مُحدِّد الكثافة في نفس خاصية srcset، ومن غير السليم تكرار المُحدِّدات (أي لا يجوز أن يكون لمصدرين مختلفين في نفس الخاصية srcset مُحدِّد الكثافة 2x).
سيختار المتصفح أحد المصادر المذكورة في هذه الخاصية حسب تقديره، مما يعطي المتصفحات مجالًا لاختيار أفضل قياس للصورة اعتمادًا على تفضيلات المستخدم أو لتقييد استخدام التراسل الشبكي.
لن يكون للخاصية srcset أي أثر إن لم يكن العنصر <source> ابنًا مباشرًا للعنصر <picture>.
type
نوع MIME مع إمكانية تحديد المعامل codecs للتصريح عن المرمازات المستخدمة، راجع RFC 4281 لمعلومات عن صيغة كتابة المرمازات.
إذا لم تُحدَّد قيمة الخاصية type فسيحاول المتصفح الحصول على نوع البيانات من الخادوم ثم التحقق أنَّه يستطيع تشغيلها، فإن لم يستطع فسيتحقق إن كان يستطيع تشغيل المورد المذكور في عنصر <source> الذي يلي العنصر الحالي. أما لو كانت الخاصية type مُحدَّدة القيمة، فسيقارنها مع الصيغ التي يستطيع تشغيلها، فإن لم يكن يستطيع تشغيلها فلن يطلبها من الخادوم وسينتقل مباشرةً إلى عنصر <source> التالي.
media
تعبير media query للمورد المُحدَّد، ولا يجوز أن تستعمل هذه الخاصية إلا ضمن عنصر <picture>.
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.