استمر في شرح مهارات HTML5:
16. دعم الفيديو
العنصر الصوتي <Oudio> مشابه جدًا ويدعم مقاطع فيديو HTML5 على متصفحات جديدة. في الواقع ، أعلنت YouTube مؤخرًا عن فيديو HTML5 جديد. لسوء الحظ ، نظرًا لأن وثائق HTML5 لا تشير إلى تشفير معين للفيديو ، فإنه يعتمد بشكل أساسي على المتصفح. على الرغم من أن Safari و IE9 يمكن أن يدعمان مقاطع الفيديو بتنسيقات H.264 ، إلا أن Firefox و Opera لا يزالان يلتزمان بتنسيقات Theora و Vorbis. لذلك ، عند عرض مقاطع فيديو HTML5 ، يجب عليك تقديم تنسيقين.
17. الفيديو المسبق
تحتاج أولاً إلى تحديد ما إذا كنت بحاجة إلى متصفح لتحميل الفيديو مسبقًا. هل هناك حاجة؟ لنفترض أن الزائر يدخل صفحة مخصصة لعرض مقاطع الفيديو ، فمن الضروري للغاية التحميل مسبقًا للصفحة لحفظ بعض وقت الانتظار. يمكنك التحميل المسبق للفيديو عن طريق تعيين مسبق = التحميل المسبق ، أو إضافة التحميل المسبق بينهما.
<video preload>
...
</video>
18. عناصر التحكم في العرض
ربما لاحظت أنه مع الكود أعلاه ، سيظهر الفيديو فقط كصورة بدون أي مكونات يمكن التحكم فيها. من أجل الحصول على عناصر تحكم التشغيل هذه ، يجب علينا تحديد خصائص التحكم هذه في عنصر الفيديو.
<فيديو تحكم مسبق>
...
</video>
19. التعبيرات العادية
بفضل خصائص النمط الجديد ، يمكننا إدراج تعبير منتظم مباشرة في الكود.
<method method = post Action =>
<label for = username> إنشاء اسم مستخدم: </label>
<input id = type type = text name = username applicher = 4 <> 10 ″ مطلوب = مطلوب ضبط تلقائي = نمط ضبط تلقائي = [a-za-z] {4،10}>
<button type = submit> go </utron>
</form>
إذا كنت أكثر دراية بالتعبيرات العادية ، ستلاحظ هذا النمط الجديد: [A-ZA-Z] {4،10} يقبل فقط الأحرف العلوية والسفلية. يجب أن تحتوي هذه السلسلة على أربعة أحرف على الأقل ، ما يصل إلى عشرة أحرف.
20. اكتشف دعم المتصفح للسمات
كما ذكرنا سابقًا ، لا تدعم جميع المتصفحات هذه الخصائص ، فهل هناك أي طريقة لمعرفة ما إذا كان المتصفح يمكنه التعرف عليها؟ هذا السؤال جيد جدا. فيما يلي طريقتان لتقديمك لك. الخيار الأول هو استخدام Modernizr للكشف ، أو يمكنك أيضًا إنشاء هذه العناصر وتحليلها لمعرفة ما لدى المتصفح. على سبيل المثال ، في المثال السابق ، إذا أردنا تحديد ما إذا كان يمكن للمتصفح تنفيذ خاصية النمط ، فيمكننا إضافة JavaScript إلى الصفحة:
تنبيه ("نمط" في المستند.
في الواقع ، هذه طريقة شائعة جدًا لتحديد توافق المتصفح. تستفيد مكتبة jQuery من هذه الخدعة. في الكود أعلاه ، نقوم بإنشاء عنصر إدخال جديد ونؤكد ما إذا كان يمكن التعرف على سمة النمط. إذا كان يمكن الاعتراف به ، فإن المتصفح يدعم هذه الوظيفة ، وإلا فلن يتم دعمه.
<script>
if (! "نمط" في المستند.
// قم بالتحقق من صحة جانب العميل/الخادم
}
</script>
تذكر أن هذا سوف يتحقق من خلال الاعتماد على JavaScript!
21. مارك عناصر
تتمثل الوظيفة الرئيسية لعنصر <Mark> في تمييز النص على الصفحة التي تحتاج إلى تسليط الضوء بصريًا على أهميتها للمستخدم. يجب أن تكون السلسلة ملفوفة في هذه العلامة مرتبطة بسلوك المستخدم الحالي. على سبيل المثال ، إذا بحثت عن فتح عقلك في بعض المدونات ، فيمكنني استخدام JavaScript في علامة <Mark> للف كل إجراء.
<h3> نتائج البحث </h3>
<H6> تمت مقاطعة ، بعد أن قال Quato ، <mark> افتح عقلك </mark>. </h6>
22. متى يجب استخدام <viv>
هل ما زلت بحاجة إلى استخدام علامة <viv>؟ بالطبع هو ضروري. على سبيل المثال ، إذا كنت ترغب في لف قطعة من التعليمات البرمجية في عنصر ، خاصة بالنسبة لتحديد موقع المحتوى ، فسيكون <Div> اختيارًا مثاليًا للغاية. ومع ذلك ، إذا لم يكن هذا هو الموقف أعلاه ولكن لفصل قائمة منشور المدونة أو قائمة ارتباطات تذييل ، فمن المستحسن استخدام عناصر <article> و <v> على التوالي.