الجمعة , 7 فبراير 2025
احدث الدروس
الرئيسية » courses » Course HTML » 24 – الوسائط المتعددة HTML Multimedia

24 – الوسائط المتعددة HTML Multimedia

بسم الله الرحمن الرحيم

اليوم
سنتحدث عن الوسائط المتعددة في html
ما هي الوسائط المتعددة؟
الوسائط المتعددة تأتي في العديد من الأشكال المختلفة. يمكن أن يكون أي شيء ..
الأمثلة على ذلك:
الصور والموسيقى والصوت ، والفيديو، والتسجيلات ، والأفلام، والرسوم المتحركة، وأكثر من ذلك. ا

العنصر embed وهو يستخدم لاضافة ملفات الفلاش
لنقوم بالتجربة …
سنستخدم ملف فلاش متواجد علي الانترنت .. وهذا الرابط http://download.media.islamway.net/flashes/sa-7c2c93d03d.swf

ساضع مثالا لطريقه كتابه العنصر وايضا كل السمات التي يمكن ان تستخدم معه 2013-09-30_165321
اظنني متوقع ان كل من تابع الدور من بدايتها يعرف ما هي هذة السمات

src = رابط ملف الفلاش

height = الطول بالبكسل

width = العرض بالبكسل

ولنا وقفه هنا معtype لانه يختلف نوع ما وله استخدام محدد لاحظ انه اذا ما وضعت type بالعنصر سوف يعمل ايضا بشكل طبيعي هذا العنصر متوافق مع اغلب المتصفحات فلذلك هو يعلم الtype تنلقائيا ولكن قد تصادف متصفحات يجب عليك اضافة ال type ليعمل ملف الفلاش فالافضل ان نقوم باضافة type في كل الاحوال وتكتب هكذا

2013-09-30_165742 اعتقد الامر سهل ولا يحتاج الكثير من الشرح

العنصر Video
هذا العنصر يستخدم لاصافة عروض الفديو داخل موقعك كـ يوتيوب مثالا
هذا العنصر جديد في html5
لنلقي نظره خاطفة عن طريقه كتابته
2013-09-24_085738
كما نري يوجد وسم فتح واغلاق للعنصر Video وبداخلة يكون محتويات ..مشابة  لطريقه انشاء الجداول
وبالطبع نعلم ان السمات المستخدمة height لتحديد الطول و width لتحديد العرض اما عن controls
فهي تعني اظهار شريط التحكم كـ التحكم بالصوت والايقاف والتشغيل وتكبير الشاشة
داخل وسوم Video يكون هناك عنصر source
<source> وهو كما موضح بالاعلي لتحديد موقع الملف المراد عرضه ونوعية الملف من خلال type
وهو يدعم ثلاث  انواع من الملفات

MP4 video/mp4
WebM video/webm
Ogg video/ogg

وفي الحقيقه لدينا وقفة كبيرة مع هذا العنصر وسنقوم بشرحها في درس خاص نظرا لتعدد خيارات هذا العنصر
العنصر Audio
وهو يستخدم لتشغيل ملفات الصوت لنلقي نظره خاطفة

2013-10-02_193707

وهو مشابة لطريقه كتابة العنصر السابق و controls ايضا تعني اظهار شريط الادوات
و source لتحديد رابط الملف و نوع الملف ويدعم ثلاث انواع

MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

ولدينا وقفه ايضا مع هذا العنصر وسابقة بدرس منفصل

وسنتحدث الان عن طريقه اضافة ملفات فديو من موقع يوتيوب
وهناك طريقتان لفعل ذلك
الطريقة الاولي عن طريق عنصر تعلمناه من قبل وهو iframe
هكذا
2013-10-02_194619

لكن لاحظ الرابط ؟؟

[code]
[/code]

يجب عليك اسبتدال حروف x  ب عنوان الملف علي يوتيوب
هذا مثال لرابط فديو اريد اضافته

2013-10-02_205743

لاحظ watch?v=9uK1yCo0WTk
نحن نريد 9uK1yCo0WTk
ليكن رابطنا كالتالي

2013-10-02_205830

هل اتضحت الفكرة لديك ؟

والطريقه الاخري عن طريق العنصر embed
2013-10-02_195416
ولكن الرابط هنا سيختلف عن ما سبق
نفس الفكرة تماما مع استبدال بسيط

2013-10-02_210009

ليصبح هكذا

2013-10-02_210055

لعلك لاحظت التغيير في الرابط فمع iframe كان الرابط هكذا

2013-10-02_210140

ومع embed الرابط هكذا

2013-10-02_210218

الي هنا اعلن انتهاء جزئي لدورة html
انت الان تعلمت كل الاساسية التي تؤهلك لبناء موقعك
ولكنه ليس انتهاء بالمعني الحقيقي
فهناء اشياء عديدة لم نتعلمها في هذة الدورة ولكنها مرتبطة بلغات اخري يجب ان نتعلمها اولا
وهناك اشياء اخري سنتعلمها من وقت لاخر فهذا القسم لن يتوقف عن موافاتكم بكل جديد والسعي وراء الكمال في هذة اللغة الرائعة
ساكمل اضافة دروس الي هذة الدورة واضافة المعلومات والتحديثات ولكن في نفس الوقت يجب علينا البدء في دورة اخري وهي لغة css واعتقد اننا تعلمنا عنها قليلا وسنتعلمها ان شاء الله خلال الايام القادمة
وسنستمر من لغه لاخري ان شاء الله

اتمني منكم اي اسئلة او استفسارات
ساظل دائما معكم اجيب علي اسئلتكم

اضف رد

لن يتم نشر البريد الإلكتروني . الحقول المطلوبة مشار لها بـ *

*

إلى الأعلى