تضمين الوسائط المتعددة في HTML
وسائط المتعددة في HTML تستخدم لعرض وتشغيل المحتوى الوسائط المتنوعة مثل الصور والفيديو والصوت والتفاعلات المتعددة الأخرى على صفحات الويب. توفر HTML عدة عناصر لدعم تضمين وتشغيل وسائط مختلفة.
سوف نتحدث عن وسوم الملفات الصوتية و الفيديو في هذه اللغة, يوجد وسم لإستحضار الملفات الصوتية وهو audio و وسم استحضار الفيديو هو video سوف نتحدث عنها بشكل مفصل مع أمثلة حية.
فيما يلي بعض العناصر الرئيسية في HTML المستخدمة للوسائط المتعددة:
- عنصر <img>: يستخدم لعرض الصور على الصفحة. يُعطى العنصر مسار الصورة في خاصية src، ويمكن تعيين النص البديل للصورة في خاصية alt للوصولية.
- عنصر <video>: يستخدم لتضمين وتشغيل مقاطع الفيديو. يمكنك تحديد مصدر الفيديو في خاصية src وتحديد خيارات تشغيل مختلفة مثل التحكم في الصوت والتشغيل التلقائي باستخدام الخصائص الأخرى.
- عنصر <audio>: يستخدم لتضمين وتشغيل ملفات الصوت. يمكنك تحديد مصدر الصوت في خاصية src وتحديد خيارات تشغيل مختلفة مثل التحكم في الصوت والتشغيل التلقائي باستخدام الخصائص الأخرى.
- عنصر <iframe>: يستخدم لتضمين محتوى خارجي في صفحة الويب، مثل صفحة ويب أخرى أو فيديو من موقع مشاركة الفيديو. يتم تحديد مصدر المحتوى في خاصية src.
- عنصر <canvas>: يستخدم لرسم الرسومات والرسوم المتحركة وعرض الوسائط التفاعلية باستخدام جافا سكريبت. يتطلب استخدام سكريبت للتحكم في العنصر ورسم الرسومات عليه.
هذه هي بعض العناصر الأساسية في HTML المستخدمة لدعم الوسائط المتعددة. هناك أيضًا العديد من الخصائص والأحداث الأخرى التي يمكن استخدامها لتخصيص والتحكم في تجربة الوسائط المتعددة على صفحة الويب.
وسم <audio> للملفات الصوتية تضمين الوسائط المتعددة في HTML
وسم <audio> في HTML يستخدم لتضمين وتشغيل ملفات الصوت على صفحة الويب. يمكن استخدامه لتشغيل ملفات صوتية بتنسيقات مختلفة مثل MP3 و WAV و OGG وغيرها.
الشكل العام لإستخدام وسم <audio> في HTML
<audio src="مسار الملف وصيغه"></audio> .
ضمن اشارات الاقتباس نضع مسار تواجد الملف الصوتي الذي نرغب بإضافته و نقطه ثم صيغته, المسار عادتاً ما يوضع الملف ضمن المجلد الذيى نعمل به بجانب ملف html و البعض يرغب بإضافة رابط خارجي من موقع, كلاهما جيد, لكن الافضل و المعتاد عليه هو ان يكون بنفس مجلد العمل.
إليك مثال على كيفية استخدام وسم <audio>:
<audio src="audiofile.mp3" controls> Your browser does not support the audio element. </audio>
في المثال أعلاه، يتم تحديد مصدر الملف الصوتي في الخاصية src حيث يجب استبدال "audiofile.mp3" بمسار الملف الصوتي الفعلي.
الخاصية controls تضيف واجهة تحكم لتشغيل الملف الصوتي، بما في ذلك زر التشغيل والإيقاف وشريط التقدم. يمكن للزوار استخدام هذه الواجهة للتحكم في التشغيل والإيقاف وتعديل مستوى الصوت.
نص العنصر بين علامتي <audio> و </audio> هو النص الذي يتم عرضه إذا كان المستعرض غير قادر على تشغيل ملف الصوت المضمن. يمكن استخدامه لعرض رسالة بديلة أو تعليمات للمستخدم بشأن كيفية الوصول إلى الملف الصوتي.
يمكنك تخصيص وتنسيق وسم <audio> باستخدام الخصائص والأحداث الأخرى المتاحة في HTML و CSS و JavaScript لتحقيق المظهر والسلوك المطلوب لعنصر الصوت على صفحتك.
مثال
<audio src="alasr.mp3" controls></audio> .
بدون خاصية controls لن تظهر لديكم ازرار على الملف في المتصفح. وضعت الملف الصوتي الذي اسمه alasr وصيغته هي mp3 ضمن المجلد الذي اعمل عليه حالياًَ.
خاصية muted المستخدمة مع وسم <audio> تضمين الوسائط المتعددة في HTML
خاصية muted هذه تجعل الصوت صامت أي سيكون اشارة خط على المايكروفون, يمكن تشغيله لكن قيمته الافتراضية تكون صامت.
<audio src="alasr.mp3" controls muted></audio> .
خاصية autoplay المستخدمة مع وسم <audio> تضمين الوسائط المتعددة في HTML
خاصية autoplay تجعل الملف الصوتي يعمل بشكل تلقائي مجرد زيارة الموقع في المتصفح و توجد متصفحات يكون بها هذا ممنوع اي لا يعمل الصوت بشكل تلقائي عند زيارة الصفحة.
<audio src="alasr.mp3" controls autoplay></audio> .
خاصية loop المستخدمة مع وسم <audio> تضمين الوسائط المتعددة في HTML
خاصية loop هذه تجعل الملف الصوتي يتكرر بشكل مستمر كلما ينتهي يعيد البدء من جديد.
<audio src="alasr.mp3" controls loop></audio> .
خاصية preload المستخدمة مع وسم <audio> تضمين الوسائط المتعددة في HTML
خاصية preload نمنع التشغيل التلقائي للملف عند زيارة الصفحة لكن يكون سرعه فتح الصفحه افضل ولا يستهلك ميغابايت من المستخدم اكثر, و تأخذ القيمة none هنا , و القيمة metadata يتم تشغيل الملف مجرد الانتهاء من تحميل الصفحة بالكامل, وللتحميل التلقائي حسب سرعه الانترنت لدى الزائر نختار auto.
<audio src="alasr.mp3" controls preload="none"></audio> .
لنأخذ الكود مستخدمين به كل الخصائص الذي ذكرناها قبل قليل
<audio src="alasr.mp3" controls muted preload="none"></audio> .
وسم <video> لملفات الفيديو تضمين الوسائط المتعددة في HTML
وسم <video> هو وسم HTML يستخدم لتضمين الوسائط المتعددة في صفحات الويب باستخدام تنسيق الفيديو. يمكن استخدامه لعرض مقاطع الفيديو على الصفحة بطرق مختلفة.
الشكل العام لإستخدام وسم <video> في HTML
<video src="مسار الملف وصيغه"></video> .
ضمن اشارات الاقتباس نضع مسار تواجد ملف الفيديو الذي نرغب بإضافته و نقطه ثم صيغته, المسار عادتاً ما يوضع الملف ضمن المجلد الذي نعمل به بجانب ملف html و البعض يرغب بإضافة رابط خارجي من موقع, كلاهما جيد, لكن الافضل و المعتاد عليه هو ان يكون بنفس مجلد العمل.
فيما يلي مثال بسيط يوضح كيفية استخدام وسم <video> لتضمين ملف فيديو في صفحة HTML:
<video src="video.mp4" controls> Your browser does not support the video tag. </video>
في هذا المثال، يتم استخدام الخاصية src لتحديد موقع ملف الفيديو الذي ترغب في تضمينه. يمكنك تحديد مسار محلي لملف الفيديو على جهاز الكمبيوتر الخاص بك، أو يمكنك استخدام رابط URL لملف الفيديو.
الخاصية controls تضيف عناصر تحكم لعرض أزرار التشغيل والإيقاف وشريط التقدم للفيديو.
إذا كان المتصفح الذي يستخدمه الزائر لا يدعم عنصر <video>، سيتم عرض النص "Your browser does not support the video tag." بدلاً من الفيديو.
يمكنك تخصيص وتعديل واجهة وسم <video> باستخدام عدة خصائص وأحداث مختلفة. يمكنك قراءة المزيد عن هذا الوسم وخصائصه في وثائق HTML ومنصات تعلم الويب الأخرى.
مثال
<video src="brmu.mp4" controls></video> .
خاصية muted المستخدمة مع وسم <video> تضمين الوسائط المتعددة في HTML
خاصية muted يكون الفيديو بالوضع الصامت ويمكن تشغيل الصوت لكن افتراضيته صامت.
<video src="brmu.mp4" controls muted></video> .
خاصية autoplay المستخدمة مع وسم <video> تضمين الوسائط المتعددة في HTML
خاصية autoplay تشغيل تلقائي في المتصفح مجرد تحميل او تحديث الصفحة
<video src="brmu.mp4" controls autoplay></video> .
خاصية loop المستخدمة مع وسم <video> تضمين الوسائط المتعددة في HTML
خاصية loop تكرار الفيديو في حال انتهاءه يعاد مرة اخرى تلقائي لعدد غير محدود من المرات.
<video src="brmu.mp4" controls loop></video> .
خاصية preload المستخدمة مع وسم <video> تضمين الوسائط المتعددة في HTML
خاصية preload منع الملف من التشغيل التقلائي عند زيارة الصفحة بوضع له القيمة none و تشغيله تلقائي بعد تحميل كامل الصفحة بوضع له القيمة metadata و لعرضه بشكل تلقائي حسب سرعة النت عند الزائر نختار القيمة auto.
<video src="brmu.mp4" controls preload="none"></video> .
خاصية poster المستخدمة مع وسم <video> تضمين الوسائط المتعددة في HTML
خاصية poster هذه تستخدم لوضع صورة كغلاف للفيديو يراءه الزائر عادتاً ما تكون الصورة ضمن مجلد العمل .
<video src="brmu.mp4" controls poster="NusurTech.jpg"></video> .
وباقي الخصائص تتحكم بالطول و العرض حسب رغبه المبرمج وموقع الفيديو من الموقع. مثال شامل عن جميع الخصائص
<video src="brmu.mp4" controls poster="NusurTech.jpg" preload="none" loop autoplay></video> .
وسم <embed> للرسوم المتحركة تضمين الوسائط المتعددة في HTML
وسم <embed> هو وسم HTML القديم الذي كان يُستخدم لتضمين محتوى متعدد الوسائط في صفحة الويب، بما في ذلك الرسوم المتحركة. ومع ذلك، فإنه لم يعد مستخدمًا على نطاق واسع ويفضل الاعتماد على تقنيات أحدث مثل HTML5 وCSS3 لتضمين الرسوم المتحركة.
بدلاً من <embed>، يُفضل استخدام عنصر <video> أو <object> في HTML5 لتضمين الرسوم المتحركة. يمكنك استخدام الوسم <video> لتضمين ملفات الفيديو والرسوم المتحركة بتنسيقات مشهورة مثل MP4 و WebM وغيرها. ويمكن استخدام الوسم <object> لتضمين ملفات الفلاش وتنسيقات الرسوم المتحركة الأخرى.
الشكل العام لإستخدام وسم <embed> في HTML
<embed> .
هو وسم لجعل الفيديو كصورة متحركة او وضع لرابط موقع و استعمال التصفح كصورة.
فيما يلي مثال على كيفية استخدام الوسم <video> لتضمين فيديو أو رسوم متحركة:
<video src="animation.mp4" width="480" height="360" controls></video> .
وفيما يلي مثال على كيفية استخدام الوسم <object> لتضمين ملف فلاش:
<object data="animation.swf" width="480" height="360" type="application/x-shockwave-flash"></object> .
يرجى ملاحظة أنه قد يتطلب استخدام تقنيات إضافية مثل JavaScript أو CSS لتحقيق تفاعل أو تحكم أكبر في الرسوم المتحركة المضمنة.
مثال
مثال عندما يكون فيديو
<embed src="brmu.mp4"> .
مثال عندما يكون رابط موقع خارجي
<embed src="https://www.nusurtech.ca/"> .
ويستخدم معه للعرض الخاصية width و للطول الخاصيه height .