https://wiki.hsoub.com/index.php?title=HTML/video&feed=atom&action=history
HTML/video - تاريخ المراجعة
2024-03-29T11:20:22Z
تاريخ التعديل لهذه الصفحة في الويكي
MediaWiki 1.35.0
https://wiki.hsoub.com/index.php?title=HTML/video&diff=27084&oldid=prev
جميل-بيلوني: تبديل كلمة "مرئي" مكان "صوتي"
2019-01-04T08:51:15Z
<p>تبديل كلمة "مرئي" مكان "صوتي"</p>
<table class="diff diff-contentalign-right diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ar">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">→ مراجعة أقدم</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">مراجعة 08:51، 4 يناير 2019</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >سطر 1:</td>
<td colspan="2" class="diff-lineno">سطر 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude>{{DISPLAYTITLE:العنصر <code><video></code>}}</noinclude></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude>{{DISPLAYTITLE:العنصر <code><video></code>}}</noinclude></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>يُستعمَل العنصر <code><video></code> لتضمين المحتوى <del class="diffchange diffchange-inline">الصوتي </del>في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية <code>src</code> أو عبر العنصر <code><nowiki><source></nowiki></code>، وسيختار المتصفح [[HTML/Media Formats|أنسب صيغة لتشغيلها]].</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>يُستعمَل العنصر <code><video></code> لتضمين المحتوى <ins class="diffchange diffchange-inline">المرئي </ins>في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية <code>src</code> أو عبر العنصر <code><nowiki><source></nowiki></code>، وسيختار المتصفح [[HTML/Media Formats|أنسب صيغة لتشغيلها]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>مثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) بارتفاع <code>360</code>، مع عرض عناصر التحكم (عبر الخاصية <code>[[#controls|controls]]</code>) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية <code>[[#poster|poster]]</code>)، وستُعرَض رسالة نصية تنوِّه المستخدم أنَّ متصفحه لا يدعم العنصر <code><video></code>:<syntaxhighlight lang="html"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>مثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) بارتفاع <code>360</code>، مع عرض عناصر التحكم (عبر الخاصية <code>[[#controls|controls]]</code>) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية <code>[[#poster|poster]]</code>)، وستُعرَض رسالة نصية تنوِّه المستخدم أنَّ متصفحه لا يدعم العنصر <code><video></code>:<syntaxhighlight lang="html"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="khamsat.webm" controls poster="khamsat-poster.jpg" height="360"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="khamsat.webm" controls poster="khamsat-poster.jpg" height="360"></div></td></tr>
</table>
جميل-بيلوني
https://wiki.hsoub.com/index.php?title=HTML/video&diff=2903&oldid=prev
عبد اللطيف ايمش: إضافة روابط إلى صفحة أنواع الوسائط
2018-03-05T14:37:42Z
<p>إضافة روابط إلى صفحة أنواع الوسائط</p>
<table class="diff diff-contentalign-right diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ar">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">→ مراجعة أقدم</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">مراجعة 14:37، 5 مارس 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >سطر 1:</td>
<td colspan="2" class="diff-lineno">سطر 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude>{{DISPLAYTITLE:العنصر <code><video></code>}}</noinclude></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude>{{DISPLAYTITLE:العنصر <code><video></code>}}</noinclude></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>يُستعمَل العنصر <code><video></code> لتضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية <code>src</code> أو عبر العنصر <code><nowiki><source></nowiki></code>، وسيختار المتصفح أنسب صيغة لتشغيلها.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>يُستعمَل العنصر <code><video></code> لتضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية <code>src</code> أو عبر العنصر <code><nowiki><source></nowiki></code>، وسيختار المتصفح <ins class="diffchange diffchange-inline">[[HTML/Media Formats|</ins>أنسب صيغة لتشغيلها<ins class="diffchange diffchange-inline">]]</ins>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>مثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) بارتفاع <code>360</code>، مع عرض عناصر التحكم (عبر الخاصية <code>[[#controls|controls]]</code>) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية <code>[[#poster|poster]]</code>)، وستُعرَض رسالة نصية تنوِّه المستخدم أنَّ متصفحه لا يدعم العنصر <code><video></code>:<syntaxhighlight lang="html"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>مثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) بارتفاع <code>360</code>، مع عرض عناصر التحكم (عبر الخاصية <code>[[#controls|controls]]</code>) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية <code>[[#poster|poster]]</code>)، وستُعرَض رسالة نصية تنوِّه المستخدم أنَّ متصفحه لا يدعم العنصر <code><video></code>:<syntaxhighlight lang="html"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="khamsat.webm" controls poster="khamsat-poster.jpg" height="360"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="khamsat.webm" controls poster="khamsat-poster.jpg" height="360"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> لا يدعم متصفحك العنصر <code>video</code>.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> لا يدعم متصفحك العنصر <code>video</code>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>هذا المثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) مع عناصر تحكم (عبر الخاصية <code>[[#controls|controls]]</code>) ويبدأ تشغيله تلقائيًا (الخاصية <code>[[#autoplay|autoplay]]</code>) مع عرض تفريغ نصي (captions) بالعربية وذلك عبر العنصر <code>[[HTML/track|<track>]]</code>:<syntaxhighlight lang="html"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>هذا المثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة <ins class="diffchange diffchange-inline">[[HTML/Media Formats#</ins>WebM<ins class="diffchange diffchange-inline">|WebM]] </ins>(عبر الخاصية <code>[[#src|src]]</code>) مع عناصر تحكم (عبر الخاصية <code>[[#controls|controls]]</code>) ويبدأ تشغيله تلقائيًا (الخاصية <code>[[#autoplay|autoplay]]</code>) مع عرض تفريغ نصي (captions) بالعربية وذلك عبر العنصر <code>[[HTML/track|<track>]]</code>:<syntaxhighlight lang="html"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="khamsat.webm" controls autoplay height="360"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="khamsat.webm" controls autoplay height="360"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <track kind="captions" src="khamsat.vtt" srclang="ar" label="عربي" default></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <track kind="captions" src="khamsat.vtt" srclang="ar" label="عربي" default></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> لا يدعم متصفحك العنصر <code>video</code>.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> لا يدعم متصفحك العنصر <code>video</code>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>أما هذا المثال فيوفِّر مصدرين مختلفين للمقطع، مما يسمح بتشغيله في المتصفح مهما كانت المرمازات (codex) التي يدعمها المتصفح، إذ سيُجرِّب المتصفح صيغة WebM وإن لم يستطع تشغيلها فسيجرب تشغيل MP4.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>أما هذا المثال فيوفِّر مصدرين مختلفين للمقطع، مما يسمح بتشغيله في المتصفح مهما كانت المرمازات (codex) التي يدعمها المتصفح، إذ سيُجرِّب المتصفح صيغة <ins class="diffchange diffchange-inline">[[HTML/Media Formats#</ins>WebM<ins class="diffchange diffchange-inline">|WebM]] </ins>وإن لم يستطع تشغيلها فسيجرب تشغيل <ins class="diffchange diffchange-inline">[[HTML/Media Formats#MP4|</ins>MP4<ins class="diffchange diffchange-inline">]]</ins>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>لاحظ استخدام الخاصية <code>[[HTML/video#height|height]]</code> لتحديد ارتفاع الفيديو (بالبكسل)، مع استخدام الخاصية <code>[[#controls|controls]]</code> لإضافة عناصر للتحكم بالمقطع، والخاصية <code>[[#poster|poster]]</code> لإضافة غلاف له.<syntaxhighlight lang="html"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>لاحظ استخدام الخاصية <code>[[HTML/video#height|height]]</code> لتحديد ارتفاع الفيديو (بالبكسل)، مع استخدام الخاصية <code>[[#controls|controls]]</code> لإضافة عناصر للتحكم بالمقطع، والخاصية <code>[[#poster|poster]]</code> لإضافة غلاف له.<syntaxhighlight lang="html"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l105" >سطر 105:</td>
<td colspan="2" class="diff-lineno">سطر 105:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== ملاحظات الاستخدام ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== ملاحظات الاستخدام ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>يمكن أن يحتوي العنصر <code><video></code> على رابط URL لمقطع أو أكثر من مقاطع الفيديو، يمكن استخدام الخاصية <code>src</code> أو العنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code>، وسيختار المتصفح أكثر مقطع ملائم لتشغيله.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>يمكن أن يحتوي العنصر <code><video></code> على رابط URL لمقطع أو أكثر من مقاطع الفيديو، يمكن استخدام الخاصية <code>src</code> أو العنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code>، وسيختار المتصفح <ins class="diffchange diffchange-inline">[[HTML/Media Formats|</ins>أكثر مقطع ملائم لتشغيله<ins class="diffchange diffchange-inline">]]</ins>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== دعم الخادوم ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== دعم الخادوم ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>إن كان نوع MIME لنوع مقاطع الفيديو الذي تستعمله ليس مضبوطًا ضبطًا صحيحًا، فقد لا يظهر مقطع الفيديو أو سيُعرَض مستطيلٌ فضيٌ يحتوي على إشارة × (إن كانت JavaScript مفعّلة).</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>إن كان نوع MIME لنوع مقاطع الفيديو الذي تستعمله ليس مضبوطًا ضبطًا صحيحًا، فقد لا يظهر مقطع الفيديو أو سيُعرَض مستطيلٌ فضيٌ يحتوي على إشارة × (إن كانت JavaScript مفعّلة).</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>إذا كنتَ تستخدم خادوم أباتشي (Apache) لتخديم مقاطع فيديو <del class="diffchange diffchange-inline">Ogg، </del>فيمكنك حلّ هذه المشكلة بإضافة لاحقة ملفات الفيديو إلى نوع MIME باسم <code>"video/ogg"</code>. أشهر امتدادات ملفات فيديو Ogg هي <code>".ogm"</code> و <code>".ogv"</code> و <code>".ogg"</code>.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>إذا كنتَ تستخدم خادوم أباتشي (Apache) لتخديم مقاطع فيديو <ins class="diffchange diffchange-inline">[[HTML/Media Formats#Ogg|Ogg]]، </ins>فيمكنك حلّ هذه المشكلة بإضافة لاحقة ملفات الفيديو إلى نوع MIME باسم <code>"video/ogg"</code>. أشهر امتدادات ملفات فيديو Ogg هي <code>".ogm"</code> و <code>".ogv"</code> و <code>".ogg"</code>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>لفعل ذلك عليك تعديل ملف <code>mime.types</code> في مجلد <code>/etc/apache</code> أو استخدم تعليمة الضبط <code>AddType</code> في ملف <code>httpd.conf</code>:<syntaxhighlight lang="apache"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>لفعل ذلك عليك تعديل ملف <code>mime.types</code> في مجلد <code>/etc/apache</code> أو استخدم تعليمة الضبط <code>AddType</code> في ملف <code>httpd.conf</code>:<syntaxhighlight lang="apache"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l116" >سطر 116:</td>
<td colspan="2" class="diff-lineno">سطر 116:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>AddType video/ogg .ogv</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>AddType video/ogg .ogv</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>AddType video/ogg .ogg</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>AddType video/ogg .ogg</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>أما إذا كانت صيغة ملفات الفيديو عندك هي <del class="diffchange diffchange-inline">WebM، </del>فيمكنك حلّ هذه المشكلة في خادوم أباتشي بإضافة الامتداد الذي تستعمله لمقاطع الفيديو عندك (أشهر امتداد هو <code>".webm"</code>) إلى نوع MIME باسم <code>"video/webm"</code> في ملف <code>mime.types</code> في مجلد <code>/etc/apache</code> أو استخدم تعليمة الضبط <code>AddType</code> في ملف <code>httpd.conf</code>:<syntaxhighlight lang="apache"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>أما إذا كانت صيغة ملفات الفيديو عندك هي <ins class="diffchange diffchange-inline">[[HTML/Media Formats#WebM|WebM]]، </ins>فيمكنك حلّ هذه المشكلة في خادوم أباتشي بإضافة الامتداد الذي تستعمله لمقاطع الفيديو عندك (أشهر امتداد هو <code>".webm"</code>) إلى نوع MIME باسم <code>"video/webm"</code> في ملف <code>mime.types</code> في مجلد <code>/etc/apache</code> أو استخدم تعليمة الضبط <code>AddType</code> في ملف <code>httpd.conf</code>:<syntaxhighlight lang="apache"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>AddType video/webm .webm</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>AddType video/webm .webm</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>قد يوفِّر لك موفِّر خدمة الاستضافة واجهةً سهلةً لتعديل ضبط أنواع MIME.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>قد يوفِّر لك موفِّر خدمة الاستضافة واجهةً سهلةً لتعديل ضبط أنواع MIME.</div></td></tr>
</table>
عبد اللطيف ايمش
https://wiki.hsoub.com/index.php?title=HTML/video&diff=2676&oldid=prev
عبد اللطيف ايمش: تبديل subtitles إلى captions
2018-02-21T08:32:00Z
<p>تبديل subtitles إلى captions</p>
<table class="diff diff-contentalign-right diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ar">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">→ مراجعة أقدم</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">مراجعة 08:32، 21 فبراير 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l5" >سطر 5:</td>
<td colspan="2" class="diff-lineno">سطر 5:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> لا يدعم متصفحك العنصر <code>video</code>.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> لا يدعم متصفحك العنصر <code>video</code>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>هذا المثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) مع عناصر تحكم (عبر الخاصية <code>[[#controls|controls]]</code>) ويبدأ تشغيله تلقائيًا (الخاصية <code>[[#autoplay|autoplay]]</code>) مع عرض <del class="diffchange diffchange-inline">ترجمة </del>(<del class="diffchange diffchange-inline">subtitles</del>) بالعربية وذلك عبر العنصر <code>[[HTML/track|<track>]]</code>:<syntaxhighlight lang="html"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>هذا المثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) مع عناصر تحكم (عبر الخاصية <code>[[#controls|controls]]</code>) ويبدأ تشغيله تلقائيًا (الخاصية <code>[[#autoplay|autoplay]]</code>) مع عرض <ins class="diffchange diffchange-inline">تفريغ نصي </ins>(<ins class="diffchange diffchange-inline">captions</ins>) بالعربية وذلك عبر العنصر <code>[[HTML/track|<track>]]</code>:<syntaxhighlight lang="html"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="khamsat.webm" controls autoplay height="360"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="khamsat.webm" controls autoplay height="360"></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <track kind="<del class="diffchange diffchange-inline">subtitles</del>" src="khamsat.vtt" srclang="ar" label="عربي" default></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <track kind="<ins class="diffchange diffchange-inline">captions</ins>" src="khamsat.vtt" srclang="ar" label="عربي" default></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> لا يدعم متصفحك العنصر <code>video</code>.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> لا يدعم متصفحك العنصر <code>video</code>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td></tr>
</table>
عبد اللطيف ايمش
https://wiki.hsoub.com/index.php?title=HTML/video&diff=2674&oldid=prev
عبد اللطيف ايمش: إضافة أمثلة
2018-02-21T08:26:42Z
<p>إضافة أمثلة</p>
<table class="diff diff-contentalign-right diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ar">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">→ مراجعة أقدم</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">مراجعة 08:26، 21 فبراير 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l6" >سطر 6:</td>
<td colspan="2" class="diff-lineno">سطر 6:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>هذا المثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) مع عناصر تحكم (عبر الخاصية <code>[[#controls|controls]]</code>) ويبدأ تشغيله تلقائيًا (الخاصية <code>[[#autoplay|autoplay]]</code>) مع عرض ترجمة (subtitles) بالعربية وذلك عبر العنصر <code>[[HTML/track|<track>]]</code>:<syntaxhighlight lang="html"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>هذا المثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) مع عناصر تحكم (عبر الخاصية <code>[[#controls|controls]]</code>) ويبدأ تشغيله تلقائيًا (الخاصية <code>[[#autoplay|autoplay]]</code>) مع عرض ترجمة (subtitles) بالعربية وذلك عبر العنصر <code>[[HTML/track|<track>]]</code>:<syntaxhighlight lang="html"></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><video src="<del class="diffchange diffchange-inline">videofile</del>.webm"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><video src="<ins class="diffchange diffchange-inline">khamsat</ins>.webm<ins class="diffchange diffchange-inline">" controls autoplay height="360</ins>"></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <track kind="subtitles" src="<del class="diffchange diffchange-inline">videofile.en</del>.vtt" srclang="<del class="diffchange diffchange-inline">en</del>"</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <track kind="subtitles" src="<ins class="diffchange diffchange-inline">khamsat</ins>.vtt" srclang="<ins class="diffchange diffchange-inline">ar</ins>" label="<ins class="diffchange diffchange-inline">عربي</ins>" <ins class="diffchange diffchange-inline">default</ins>></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"> </del>label="<del class="diffchange diffchange-inline">English</del>"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <ins class="diffchange diffchange-inline">لا يدعم متصفحك العنصر <code>video</ins><<ins class="diffchange diffchange-inline">/code></ins>.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <<del class="diffchange diffchange-inline">track kind="subtitles" src="videofile.sv</del>.<del class="diffchange diffchange-inline">vtt" srclang="ar"</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"> label="Arabic"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>أما هذا المثال فيوفِّر <del class="diffchange diffchange-inline">ثلاثة مصادر مختلفة </del>للمقطع، مما يسمح بتشغيله في المتصفح مهما كانت المرمازات (codex) التي يدعمها المتصفح، إذ سيُجرِّب المتصفح صيغة WebM وإن لم يستطع تشغيلها فسيجرب تشغيل <del class="diffchange diffchange-inline">MP4، وإن لم يستطع تشغيلها فسيجرب OGG</del>.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>أما هذا المثال فيوفِّر <ins class="diffchange diffchange-inline">مصدرين مختلفين </ins>للمقطع، مما يسمح بتشغيله في المتصفح مهما كانت المرمازات (codex) التي يدعمها المتصفح، إذ سيُجرِّب المتصفح صيغة WebM وإن لم يستطع تشغيلها فسيجرب تشغيل <ins class="diffchange diffchange-inline">MP4</ins>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>لاحظ استخدام الخاصية <code>[[#<del class="diffchange diffchange-inline">width</del>|<del class="diffchange diffchange-inline">width</del>]]</code> لتحديد <del class="diffchange diffchange-inline">عرض </del>الفيديو (بالبكسل)، مع استخدام الخاصية <code>[[#controls|controls]]</code> لإضافة عناصر للتحكم بالمقطع، والخاصية <code>[[#poster|poster]]</code> لإضافة غلاف له.<syntaxhighlight lang="html"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>لاحظ استخدام الخاصية <code>[[<ins class="diffchange diffchange-inline">HTML/video</ins>#<ins class="diffchange diffchange-inline">height</ins>|<ins class="diffchange diffchange-inline">height</ins>]]</code> لتحديد <ins class="diffchange diffchange-inline">ارتفاع </ins>الفيديو (بالبكسل)، مع استخدام الخاصية <code>[[#controls|controls]]</code> لإضافة عناصر للتحكم بالمقطع، والخاصية <code>[[#poster|poster]]</code> لإضافة غلاف له.<syntaxhighlight lang="html"></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><video <del class="diffchange diffchange-inline">width</del>="<del class="diffchange diffchange-inline">480</del>" <del class="diffchange diffchange-inline">controls poster</del>="<del class="diffchange diffchange-inline">videofile.gif</del>" ></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><video <ins class="diffchange diffchange-inline">controls poster</ins>="<ins class="diffchange diffchange-inline">khamsat-poster.jpg</ins>" <ins class="diffchange diffchange-inline">height</ins>="<ins class="diffchange diffchange-inline">360</ins>"></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <source src="<del class="diffchange diffchange-inline">videofile</del>.webm" type="video/webm"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <source src="<ins class="diffchange diffchange-inline">khamsat</ins>.webm" type="video/webm"></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <source src="<del class="diffchange diffchange-inline">videofile</del>.mp4" type="video/mp4"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <source src="<ins class="diffchange diffchange-inline">khamsat</ins>.mp4" type="video/mp4"></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <<del class="diffchange diffchange-inline">source src="videofile.ogv" type="</del>video/<del class="diffchange diffchange-inline">ogg"</del>></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <ins class="diffchange diffchange-inline">لا يدعم متصفحك العنصر </ins><<ins class="diffchange diffchange-inline">code></ins>video<ins class="diffchange diffchange-inline"><</ins>/<ins class="diffchange diffchange-inline">code</ins>>.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"> Your browser doesn't support HTML5 video tag</del>.</div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== بطاقة العنصر ==</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{| class="wikitable" style="width: 100%;"</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{| class="wikitable" style="width: 100%;"</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr>
</table>
عبد اللطيف ايمش
https://wiki.hsoub.com/index.php?title=HTML/video&diff=2673&oldid=prev
عبد اللطيف ايمش: تعديل مثال
2018-02-21T08:01:18Z
<p>تعديل مثال</p>
<table class="diff diff-contentalign-right diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ar">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">→ مراجعة أقدم</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">مراجعة 08:01، 21 فبراير 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >سطر 1:</td>
<td colspan="2" class="diff-lineno">سطر 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude>{{DISPLAYTITLE:العنصر <code><video></code>}}</noinclude></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude>{{DISPLAYTITLE:العنصر <code><video></code>}}</noinclude></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>يُستعمَل العنصر <code><video></code> لتضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية <code>src</code> أو عبر العنصر <code><nowiki><source></nowiki></code>، وسيختار المتصفح أنسب صيغة لتشغيلها.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>يُستعمَل العنصر <code><video></code> لتضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية <code>src</code> أو عبر العنصر <code><nowiki><source></nowiki></code>، وسيختار المتصفح أنسب صيغة لتشغيلها.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>مثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) <del class="diffchange diffchange-inline">يبدأ تلقائيًا </del>(عبر الخاصية <code>[[#<del class="diffchange diffchange-inline">autoplay</del>|<del class="diffchange diffchange-inline">autoplay</del>]]</code>) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية <code>[[#poster|poster]]</code>)، وستُعرَض رسالة نصية تنوِّه المستخدم أنَّ متصفحه لا يدعم العنصر <code><video></code>:<syntaxhighlight lang="html"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>مثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) <ins class="diffchange diffchange-inline">بارتفاع <code>360</code>، مع عرض عناصر التحكم </ins>(عبر الخاصية <code>[[#<ins class="diffchange diffchange-inline">controls</ins>|<ins class="diffchange diffchange-inline">controls</ins>]]</code>) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية <code>[[#poster|poster]]</code>)، وستُعرَض رسالة نصية تنوِّه المستخدم أنَّ متصفحه لا يدعم العنصر <code><video></code>:<syntaxhighlight lang="html"></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><video src="<del class="diffchange diffchange-inline">videofile</del>.webm" <del class="diffchange diffchange-inline">autoplay </del>poster="<del class="diffchange diffchange-inline">posterimage</del>.jpg"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><video src="<ins class="diffchange diffchange-inline">khamsat</ins>.webm" <ins class="diffchange diffchange-inline">controls </ins>poster="<ins class="diffchange diffchange-inline">khamsat-poster</ins>.jpg<ins class="diffchange diffchange-inline">" height="360</ins>"></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">Sorry, your browser doesn't support embedded videos, </del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline"> لا يدعم متصفحك العنصر </ins><<ins class="diffchange diffchange-inline">code</ins>><ins class="diffchange diffchange-inline">video</ins></<ins class="diffchange diffchange-inline">code</ins>><ins class="diffchange diffchange-inline">.</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">but don't worry, you can </del><<del class="diffchange diffchange-inline">a href="videofile.webm"</del>><del class="diffchange diffchange-inline">download it</del></<del class="diffchange diffchange-inline">a</del>></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">and watch it with your favorite video player!</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></video></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>هذا المثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) مع عرض <del class="diffchange diffchange-inline">ترجمتين </del>(subtitles) <del class="diffchange diffchange-inline">واحدة بالإنكليزية والأخرى </del>بالعربية وذلك عبر العنصر <code>[[HTML/track|<track>]]</code>:<syntaxhighlight lang="html"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight>هذا المثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src<ins class="diffchange diffchange-inline">]]</code>) مع عناصر تحكم (عبر الخاصية <code>[[#controls|controls]]</code>) ويبدأ تشغيله تلقائيًا (الخاصية <code>[[#autoplay|autoplay</ins>]]</code>) مع عرض <ins class="diffchange diffchange-inline">ترجمة </ins>(subtitles) بالعربية وذلك عبر العنصر <code>[[HTML/track|<track>]]</code>:<syntaxhighlight lang="html"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="videofile.webm"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><video src="videofile.webm"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <track kind="subtitles" src="videofile.en.vtt" srclang="en"</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <track kind="subtitles" src="videofile.en.vtt" srclang="en"</div></td></tr>
</table>
عبد اللطيف ايمش
https://wiki.hsoub.com/index.php?title=HTML/video&diff=2125&oldid=prev
عبد اللطيف ايمش: استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
2018-01-28T15:41:15Z
<p>استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'<a href="/index.php?title=%D8%AA%D8%B5%D9%86%D9%8A%D9%81:$1&action=edit&redlink=1" class="new" title="تصنيف:$1 (الصفحة غير موجودة)">{{SUBPAGENAME}}</a>'</p>
<table class="diff diff-contentalign-right diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ar">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">→ مراجعة أقدم</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">مراجعة 15:41، 28 يناير 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l127" >سطر 127:</td>
<td colspan="2" class="diff-lineno">سطر 127:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element HTML Living Standard].</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element HTML Living Standard].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*مواصفة [https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element HTML5].</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*مواصفة [https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element HTML5].</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML]]</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML<ins class="diffchange diffchange-inline">|{{SUBPAGENAME}}</ins>]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML Elements]]</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML Elements<ins class="diffchange diffchange-inline">|{{SUBPAGENAME}}</ins>]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML Multimedia]]</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML Multimedia<ins class="diffchange diffchange-inline">|{{SUBPAGENAME}}</ins>]]</div></td></tr>
</table>
عبد اللطيف ايمش
https://wiki.hsoub.com/index.php?title=HTML/video&diff=2066&oldid=prev
عبد اللطيف ايمش: استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1'
2018-01-28T15:40:40Z
<p>استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1'</p>
<table class="diff diff-contentalign-right diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ar">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">→ مراجعة أقدم</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">مراجعة 15:40، 28 يناير 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l129" >سطر 129:</td>
<td colspan="2" class="diff-lineno">سطر 129:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML Elements]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML Elements]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:Multimedia]]</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:<ins class="diffchange diffchange-inline">HTML </ins>Multimedia]]</div></td></tr>
</table>
عبد اللطيف ايمش
https://wiki.hsoub.com/index.php?title=HTML/video&diff=1254&oldid=prev
عبد اللطيف ايمش: تغيير ترتيب التصنيفات
2018-01-27T09:05:36Z
<p>تغيير ترتيب التصنيفات</p>
<table class="diff diff-contentalign-right diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ar">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">→ مراجعة أقدم</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">مراجعة 09:05، 27 يناير 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l127" >سطر 127:</td>
<td colspan="2" class="diff-lineno">سطر 127:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element HTML Living Standard].</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element HTML Living Standard].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*مواصفة [https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element HTML5].</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*مواصفة [https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element HTML5].</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[تصنيف:Multimedia]]</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML Elements]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[تصنيف:HTML Elements]]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[تصنيف:Multimedia]]</ins></div></td></tr>
</table>
عبد اللطيف ايمش
https://wiki.hsoub.com/index.php?title=HTML/video&diff=60&oldid=prev
عبد اللطيف ايمش في 13:24، 17 سبتمبر 2017
2017-09-17T13:24:36Z
<p></p>
<p><b>صفحة جديدة</b></p><div><noinclude>{{DISPLAYTITLE:العنصر <code><video></code>}}</noinclude><br />
يُستعمَل العنصر <code><video></code> لتضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية <code>src</code> أو عبر العنصر <code><nowiki><source></nowiki></code>، وسيختار المتصفح أنسب صيغة لتشغيلها.<br />
مثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) يبدأ تلقائيًا (عبر الخاصية <code>[[#autoplay|autoplay]]</code>) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية <code>[[#poster|poster]]</code>)، وستُعرَض رسالة نصية تنوِّه المستخدم أنَّ متصفحه لا يدعم العنصر <code><video></code>:<syntaxhighlight lang="html"><br />
<video src="videofile.webm" autoplay poster="posterimage.jpg"><br />
Sorry, your browser doesn't support embedded videos, <br />
but don't worry, you can <a href="videofile.webm">download it</a><br />
and watch it with your favorite video player!<br />
</video><br />
</syntaxhighlight>هذا المثال عن استخدام العنصر <code><video></code> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية <code>[[#src|src]]</code>) مع عرض ترجمتين (subtitles) واحدة بالإنكليزية والأخرى بالعربية وذلك عبر العنصر <code>[[HTML/track|<track>]]</code>:<syntaxhighlight lang="html"><br />
<video src="videofile.webm"><br />
<track kind="subtitles" src="videofile.en.vtt" srclang="en"<br />
label="English"><br />
<track kind="subtitles" src="videofile.sv.vtt" srclang="ar"<br />
label="Arabic"><br />
</video><br />
</syntaxhighlight>أما هذا المثال فيوفِّر ثلاثة مصادر مختلفة للمقطع، مما يسمح بتشغيله في المتصفح مهما كانت المرمازات (codex) التي يدعمها المتصفح، إذ سيُجرِّب المتصفح صيغة WebM وإن لم يستطع تشغيلها فسيجرب تشغيل MP4، وإن لم يستطع تشغيلها فسيجرب OGG.<br />
<br />
لاحظ استخدام الخاصية <code>[[#width|width]]</code> لتحديد عرض الفيديو (بالبكسل)، مع استخدام الخاصية <code>[[#controls|controls]]</code> لإضافة عناصر للتحكم بالمقطع، والخاصية <code>[[#poster|poster]]</code> لإضافة غلاف له.<syntaxhighlight lang="html"><br />
<video width="480" controls poster="videofile.gif" ><br />
<source src="videofile.webm" type="video/webm"><br />
<source src="videofile.mp4" type="video/mp4"><br />
<source src="videofile.ogv" type="video/ogg"><br />
Your browser doesn't support HTML5 video tag.<br />
</video><br />
</syntaxhighlight><br />
<br />
{| class="wikitable" style="width: 100%;"<br />
|-<br />
! scope="row" style="width: 20%;" | تصنيفات المحتوى<br />
| عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.<br />
|-<br />
! scope="row" | المحتوى المسموح<br />
| إذا كان للعنصر الخاصية <code>src</code> فيمكن أن يحتوي على عنصر <code>[[HTML/track|<track>]]</code> واحد أو أكثر يتبعه محتوى عادي لا يتضمن العنصرين <code>[[HTML/audio|<audio>]]</code> و <code><video></code>.<br />
أما إذا لم تكن له الخاصية <code>src</code> فيمكن أن يحتوي على عنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code> واحد أو أكثر، يتبعه عنصر <code>[[HTML/track|<track>]]</code> واحد أو أكثر ويتبعه محتوى عادي لا يتضمن العنصر <code>[[HTML/audio|<audio>]]</code> و <code><video></code>.<br />
|-<br />
! scope="row" | الوسم المختصر<br />
| لا يمكن حذف أيّ من وسمَي البداية أو النهاية.<br />
|-<br />
! scope="row" | العناصر الأب<br />
| أي عنصر يقبل العناصر التضمينية.<br />
|-<br />
! scope="row" | واجهة DOM<br />
| <code>HTMLVideoElement</code><br />
|}<br />
<br />
== دعم المتصفحات ==<br />
{| class="wikitable" style="width: 50%;"<br />
!| Chrome<br />
! Firefox<br />
! Edge<br />
! Safari<br />
! Opera<br />
|-<br />
|مدعوم<br />
|مدعوم<br />
|مدعوم<br />
|مدعوم<br />
|مدعوم<br />
|}<br />
بعض الخاصيات المُضافة حديثًا في HTML5 لا تعمل في جميع المتصفحات.<br />
<br />
== الخاصيات ==<br />
يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.<br />
<br />
=== <code>autoplay</code> ===<br />
هذه الخاصية منطقية (Boolean) وإذا اُستعملت (حتى لو كانت قيمتها <code>"false"</code>!) فسيبدأ تشغيل مقطع الفيديو في أسرع وقت ممكن، دون الانتظار حتى يكتمل تنزيل الملف كله.<br />
<br />
لاحظ أنَّ المواقع التي تُشغِّل الصوت تلقائيًا (أو تُشغِّل مقاطع الفيديو التي لها صوت) يمكن أن تزعج المستخدمي، لذا يجب تفادي استخدام هذه الخاصية إلا عند الضرورة، وإذا كان لا بُدّ فيجب أن تجعل هذه الميزة اختيارية وتطلب من المستخدم تفعيله. لكن قد تستفيد من هذه الميزة لو كان الغرض الرئيسي من الصفحة هو تشغيل مقطع فيديو معيّن.<br />
<br />
=== <code>buffered</code> ===<br />
خاصية قابلة للقراءة لتحديد ما هي المجالات التي نُزِّلَت من المقطع، إذ تحتوي هذه الخاصية على كائن <code>TimeRanges</code>.<br />
<br />
=== <code>controls</code> ===<br />
إذا كان هذه الخاصية موجودة، فسيوفر المتصفح عناصر تحكم ليسمح عبرها للمستخدم بالتحكم بتشغيل الفيديو، بما في ذلك مستوى الصوت والانتقال إلى مواضع مختلفة في المقطع والإيقاف المؤقت والتشغيل...<br />
<br />
=== <code>height</code> ===<br />
ارتفاع منطقة عرض الفيديو بواحدة البكسل (يسمح بالقيم المطلقة فقط، ولا يجوز استخدام [https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes القيم النسبية]).<br />
<br />
=== <code>width</code> ===<br />
عرض منطقة عرض الفيديو بواحدة البكسل (يسمح بالقيم المطلقة فقط، ولا يجوز استخدام [https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes القيم النسبية]).<br />
<br />
=== <code>loop</code> ===<br />
هذه الخاصية منطقية (Boolean)، فإن كانت موجودةً فسيُعاد تشغيل المقطع من البداية بعد الوصول إلى نهايته.<br />
<br />
=== <code>muted</code> ===<br />
هذه الخاصية منطقية (Boolean) تُشير إذا ما كان المقطع مكتوم الصوت بادئ الأمر. القيمة الافتراضية هي <code>false</code>.<br />
<br />
=== <code>played</code> ===<br />
هذه الخاصية قابلة للقراءة وتحتوي على كائن <code>TimeRanges</code> الذي يُشير إلى المجالات التي شغّلها المستخدم من المقطع.<br />
<br />
=== <code>preload</code> ===<br />
الغرض من هذه الخاصية هو إعطاء المتصفح فكرة عمّا يظنه مطور الصفحة أفضل لتجربة المستخدم، وتأخذ إحدى القيم الآتية:<br />
* <code>none</code>: يجب ألّا يُحمَّل المقطع مسبقًا.<br />
* <code>metadata</code>: يجب أن تُحمَّل البيانات الوصفية (مثل طول المقطع) فقط.<br />
* <code>auto</code>: تُشير إلى أنَّ المقطع يمكن أن يُحمَّل حتى لو كان من المتوقع ألّا يشغله المستخدم.<br />
* إذا كانت القيمة هي سلسلة نصية فارغة فهي تكافئ القيمة <code>auto</code>.<br />
إذا لم تُضبَط قيمة هذه الخاصية، فستؤخذ القيمة الافتراضية من المتصفح (ولكل متصفح قيمة افتراضية خاصة به)، لكن تنصح المواصفة المتصفحات أن تكون القيمة الافتراضية هي <code>metadata</code>.<br />
<br />
لاحظ أنَّ الخاصية <code>[[#autoplay|autoplay]]</code> لها أولوية على الخاصية <code>preload</code>، فلو حُدِّدَت الخاصية <code>[[#autoplay|autoplay]]</code> فمن المنطقي أن يبدأ المتصفح تنزيل المقطع مباشرةً.<br />
<br />
يجدر بالذكر أنَّ المواصفة لم تُجبِر المتصفح على اتباع قيمة هذه الخاصية، فهي مجرد تلميحة عمّا يريده مطوِّر الصفحة.<br />
<br />
=== <code>poster</code> ===<br />
رابط URL يُشير إلى غلاف للفيديو الذي سيظهر حتى يبدأ المستخدم تشغيل الفيديو. إن لم تُحدَّد قيمة هذه الخاصية فلن يُعرَض شيء حتى يتوافر أوّل إطار من إطارات الفيديو، ثم سيُعرَض أوّل إطار كغلاف للفيديو.<br />
<br />
=== <code>src</code> ===<br />
تحتوي هذه الخاصية على رابط URL لملف الفيديو الذي سيُحمَّل، وهذه الخاصية اختيارية، ويمكنك استخدام العنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code> داخل العنصر <code><video></code> لتحديد رابط URL للمقطع (أو المقاطع) التي ترغب في تضمينها.<br />
<br />
== ملاحظات الاستخدام ==<br />
<br />
يمكن أن يحتوي العنصر <code><video></code> على رابط URL لمقطع أو أكثر من مقاطع الفيديو، يمكن استخدام الخاصية <code>src</code> أو العنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code>، وسيختار المتصفح أكثر مقطع ملائم لتشغيله.<br />
<br />
== دعم الخادوم ==<br />
إن كان نوع MIME لنوع مقاطع الفيديو الذي تستعمله ليس مضبوطًا ضبطًا صحيحًا، فقد لا يظهر مقطع الفيديو أو سيُعرَض مستطيلٌ فضيٌ يحتوي على إشارة × (إن كانت JavaScript مفعّلة).<br />
<br />
إذا كنتَ تستخدم خادوم أباتشي (Apache) لتخديم مقاطع فيديو Ogg، فيمكنك حلّ هذه المشكلة بإضافة لاحقة ملفات الفيديو إلى نوع MIME باسم <code>"video/ogg"</code>. أشهر امتدادات ملفات فيديو Ogg هي <code>".ogm"</code> و <code>".ogv"</code> و <code>".ogg"</code>.<br />
<br />
لفعل ذلك عليك تعديل ملف <code>mime.types</code> في مجلد <code>/etc/apache</code> أو استخدم تعليمة الضبط <code>AddType</code> في ملف <code>httpd.conf</code>:<syntaxhighlight lang="apache"><br />
AddType video/ogg .ogm<br />
AddType video/ogg .ogv<br />
AddType video/ogg .ogg<br />
</syntaxhighlight>أما إذا كانت صيغة ملفات الفيديو عندك هي WebM، فيمكنك حلّ هذه المشكلة في خادوم أباتشي بإضافة الامتداد الذي تستعمله لمقاطع الفيديو عندك (أشهر امتداد هو <code>".webm"</code>) إلى نوع MIME باسم <code>"video/webm"</code> في ملف <code>mime.types</code> في مجلد <code>/etc/apache</code> أو استخدم تعليمة الضبط <code>AddType</code> في ملف <code>httpd.conf</code>:<syntaxhighlight lang="apache"><br />
AddType video/webm .webm<br />
</syntaxhighlight>قد يوفِّر لك موفِّر خدمة الاستضافة واجهةً سهلةً لتعديل ضبط أنواع MIME.<br />
<br />
==مصادر ومواصفات==<br />
*معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element HTML Living Standard].<br />
*مواصفة [https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element HTML5].<br />
[[تصنيف:Multimedia]]<br />
[[تصنيف:HTML]]<br />
[[تصنيف:HTML Elements]]</div>
عبد اللطيف ايمش