اليوم سنأخذ احد دروس ال html وهو درس مسلي وممتع وسهل الا وهو تضمين الوسائط المتعددة في صفحاتك وسنستخدم لهذا الغرض الوسم <embed> وهو وسم بدون نهاية وسنستخدمه بالشكل التالي :
<embed src="file">
حيث سنستبدل كلمة file بمسار الملف المراد تشغيله
ويمكن استخدام الوسم السابق لادراج مقطع فيديو او مقطع فلاش او مقطع موسيقي وسنأخذ امثلة على كل هذا ان شاء الله .
مع الوسم <embed> يمكنك استخدام عدة خصائص للتحكم بمقطع الوسائط وسنأخذ هذه الخصائص كالتالي :
اولا : عرض وارتفاع مقطع الوسائط
اذا كنت تريد تضمين مقطع فيديو فلا بد ان تتحكم بعرض وارتفاع هذا المقطع وكالعادة سنستخدم الخاصيتين width لتحديد العرض و height لتحديد الارتفاع وسنستخدمهما بالشكل التالي :
<embed width="100" height="70">
حيث قمت بالمثال السابق بتحديد العرض ب100 بيكسل والارتفاع بـ70 بيكسل .
ثانياً : التشغيل التلقائي
عند اضافة مقطع فيديو او مقطع موسيقي فان لديك امكانية تشغيله تلقائياً عندما يفتح الزائر الصفحة ولعمل ذلك نستخدم الوسم autostart وذلك بالشكل التالي :
<embed autostart="true">
في المثال السابق قمنا بتشغيل خاصية البدء التلقائي وذلك باستخدام القيمة true اما اذا اردت تعطيل هذه الخاصية فاستبدل القيمة السابقة ب false .
ثالثاً : خاصية التكرار
عند اضافة مقطع وسائط وعندما يقوم الزائر بتشغيلة وعند انتهاء العرض سيتوقف مقطع الوسائط ولكن هناك خاصية تجعل المقطع يبدء من جديد كلما انتهى منه العرض وهي الخاصية loop ونستخدم القيمة true لتشغيلها والقيمة false لتعطيلها , مثال على ذلك :
<embed loop="true">
حيث وانه في المثال السابق قمنا بتفعيل هذه الخاصية
مثال تطبيقي
سنقوم بهذا المثال بادراج مقطع فيديو وسنستخدم احدى افلام هارون يحيى في مثالنا هذا ورابط الفيديو هو :
http://174.121.197.240/download/24/18/d9f5cda25e327e45db6906e30a02a6a7%20%20%20/Harun.Yahya.Miracles.of.the.Brain.Smell.and.Taste.Arabic.wmv
http://174.121.197.240/download/24/18/d9f5cda25e327e45db6906e30a02a6a7%20%20%20/Harun.Yahya.Miracles.of.the.Brain.Smell.and.Taste.Arabic.wmv
وسنقوم بادراج المقطع بعرض 400 بيكسل وارتفاع 300 بيكسل وسيكون الوسم بالشكل التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<embed src="http://174.121.197.240/download/24/18/d9f5cda25e327e45db6906e30a02a6a7/Harun.Yahya.Miracles.of.the.Brain.Smell.and.Taste.Arabic.wmv" width="400" height="300">
</body>
</html>
وسيكون الناتج بالشكل التالي :
مثال تطبيقي 2
في هذه المره سنقوم بادراج مقطع صوتي وسنستخدم محاضرة للدكتور طارق السويدان ذات صيغة ريل بلاير ورابط المحاضرة هو
وسنقوم بادراج المحاضرة السابقة بعرض 300 وارتفاع 80 وسيكون الوسم بالشكل التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<embed src="http://live1.islamweb.net/Lecturs/tariqsuwaydan/47746.rm" width="300" height="80">
</body>
</html>
والنتيجة ستكون :
مثال تطبيقي 3
في هذا المثال سوف نقوم بتعلم كيفية ادراج مقطع فلاش الى موقعك وسنستخدم في المثال مقطع فلاش من موقع صيد الفوائد ومسار المقطع هو :
وسندرجه بعرض 550 بيكسل وارتفاع 600 بيكسل وسيكون الوسم كالتالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<embed src="http://saaid.net/flash/al7jaz-1250692516.swf" width="550" height="600">
</body>
</html>
والنتيجة ستكون هكذا :
الوسم noembed
عند اضافة مقطع فلاش او مقطع صوتي مثلا مقطع ريل بلاير وليس لدى الزائر المشغل المناسب مثلا ليس لديه مشغل فلاش فان المقطع الذي قمت بادراجه لن يظهر وسيظن الزائر انه لا يوجد مقطع فلاش بالاصل , ولكن الوسم noembed سيحل المشكلة حيث انه سيظهر عبارة تخبر الزائر انه ليس لدية المشغل المناسب وهذه العبارة او الصورة او اي شيء تريده ان يظهر للزائر تكتبه بين الوسم <noembed></noembed> وذلك بالشكل التالي :
<noembed>اي شيء تريده ان يظهر للزائر سواء نص او صورة</noembed>
وسنقوم بتطبيق هذا الوسم على المثال التطبيقي رقم 3 بحيث يظهر للزائر نص يخبره انه لا يملك مشغل فلاش وانه يجب ان يحمله من موقع ادوبي وسنقوم بكتابة الوسم بالشكل التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<embed src="http://saaid.net/flash/al7jaz-1250692516.swf" width="550" height="600">
<noembed> عزيزي الزائر ليس لديك مشغل فلاش الرجاء تحميله من موقع ادوبي <a href="http://www.google.com/url?sa=t&source=web&cd=1&ved=0CCQQFjAA&url=http%3A%2F%2Fwww.adobe.com%2Fproducts%2Fflashplayer%2F&rct=j&q=adobe%20flash&ei=fqs9TZzuNYi38QO33qDwCA&usg=AFQjCNFH3fipPYooBuUGHwTUnIF-clf-mA&sig2=gQxO3HHenBSFR2iHmCzquQ&cad=rja">من هنا </a></noembed>
</body>
</html>
وسيظهر النص الذي كتبناه اعلاه للزائر في حالة لم يكن يمتلك مشغل فلاش .
نرجوا ان يكون الدرس ممتعاً وسهلا واذا كانت هناك اي استفسارات فلا تترد بتركها عبر التعليقات .
الانتقال الى فهرس الدروس ...
الانتقال الى فهرس الدروس ...
اترك تعليقك على الموضوع