Posted in HTML5

الفيديو في HTML5


الفيديو في HTML5

HTML5 video

لحد الان لا يوجد اي طريقة موحدة لعرض الفيديو علي صفحات الانترنت .. كل الفيديوهات تقريبا هذه الايام تعمل عن طريق الفلاش

HTML5   تظهر عنصر جديد مسمي بالفيديو وهو لعرض الفيديو بدون الحاجة الي ملحقات اضافية كالفلاش

<video>

 المتصفحات التي تدعم التاج المسمي بالفيديو  <video>

  • الغبي انترنت اكسبلورر 9
  • فايرفوكس
  • اوبرا
  • كروم
  • سفاري

كيف يعمل الفيديو في HTML5

انها بعض الاكواد البسيطه التي تستطيع كتابتها ليظهر لك الفيديو

<!DOCTYPE html>

<html>

<body>

<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”http://www.w3schools.com/html5/movie.ogg&#8221; type=”video/ogg” />
Your browser does not support the video tag.
</video>

</body>

</html>

الخاصية  control تقوم باضافة الازرار تشغيل و ايقاف وللتحكم بالصوت

يجب وضع الخاصية width  و height لن المتصحف لا يعلم ما هي المساحة المحجوزة في الصفحة للفيديو .. فعند عدم تمكين هذه الخواص تظهر عيوب في شكل وتصميم الصفحة

ايضا يجب كتابة اي شئ بين العنصر فيديو واغلاقه .. تعرض هذه الجملة عندما يكون المتصحف لا يدعم الفيديو او HTML5

المصفحات التي تدعم امتدادات الفيديو

يوجد ثلاثة انواع للفيديو مدعومة في HTML5  و <video> .. وهم . MP4و  WebM, و  Ogg:

 

المتصحف MP4 WebM Ogg
اكسبلورر 9 نعم لا لا
فايرفوكس 4 لا نعم نعم
كروم 6 نعم نعم نعم
سفاري 5 نعم لا لا
اوبرا 10,4 لا نعم نعم

Advertisements
Posted in HTML5

العناصر الجديدة في HTML5


بسم الله الرحمن الرحيم … ساسرد اليوم بعض العناصر الجديده الموجوده في لغة HTML5

الوصف الخاص به

العنصر

لتعريف مقال

<article>

تعريف جانب للمحتوي في الصفحة

<aside>

تخصيص جزء من الكلام .. ممكن ان ياخذ اتجاه مخالف في الظهور .. عكس المحتوي المكتوب فيه

<bdi>

لتعريف زرار .. يمكن ان يستدعيه المستخدم

<command>

لاضافة محتوي اضافي في الصفحة يستطيع المستخدم اظهاره او اخفاءة كيفما شاء

<details>

اظهار الكتابة بطريقة اكثر ظهورا .. وهو يتبع العنصر <details>

<summary>

عنصر لتحديد الصور .. والرسومات التوضيحية في الصفحة

<figure>

لوضح شرح خاص بالعنصر

<figure>

<figcaption>

لعمل فوتر للصفحة ^_^

<footer>

لعمل هيدر للصفحة 😀

<header>

لا اعلم المعني الحقيقي لها .. ولكنها خاصة بالعناصر <H1> الي  <H6>

<hgroup>

نص بلون مختلف ..

<mark>

لعمل مقياس عددي

<meter>

لعمل قوائم حركة في الموقع

<nav>

لا اعلم ما هو

<progress>

لتعريف منطقة كتابة لحروف شرق اسيا

<ruby>

لعمل جزء مخصص من الكتابة في الصفحة

<section>

لتعريف وقت

<time>

لتعريف موضع معين للخط الفاصل  <BR >

<wbr>

في هذه التدوينة تم عرض بعض التاجات الجديده في لغة اتش تي ام ال 5

في التدوينات اللاحقة ان شاء الله سيتم اضافة المزيد

والسلام عليكم ورحمة الله وبركاته

Posted in تطوير الويب

عالم HTML5 مقدمة


تعريف عن لغة HTML5

السلام عليكم ورحمة الله وبركاته .. ساتحدث اليوم عن HTML5 … الاصدار الجديد من لغة HTML

لغة HTML5 مازالت تحت التحديثات والاضافات .. ولكن الكثير من المتصفحات خلال هذه الايام تدعم الكثير من التاجز الخاصة بهذه اللغة

HTML%

بعض القواعد للغة HTML5

لن تحتاج لاضافات خاصة مثل الفلاش

افضل في معالجة الاخطاء

افضل من ناحية الملائمة البرمجية في تشبه الي حد كبير لغة برمجة وسوف تحل محل لغة برمجة من يعلم

كيف ابدأ

لا يوجد الا تاج واحد فقط DOCTYPE

ويتم كتابته علي النحو التالي

<!DOCTYPE html>

مزايا لغة HTML5

التاج المسمي <canvas> تستطيع رسم 2d من خلاله

التاج المستمي <video> تستطيع تشغيل فيديو بدون الحاجة الي مشغل فلاش

التاج المسمي <audio> تستطيع تشغيل صوت من خلاله

دعم التخزين الداخلي

الكثير من التاجات الجديده لمحتوي الصفحة مثل <article> و <footer> و <header>, و <nav> و <section>

الكثير من الادوات مثل calendar, date, time, email, url, search

 

المتصفحات التي تدعم HTML5

لا يوجد متصفح يدعم HTML5 بصورة كاملة

اللغة مازالت تحت التحديثات

للحديث بقية ان شاء الله ساتحدث عن اللغة بشكل مستفيض