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

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

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