جلب الملفات الصوتية والصور المتحركة و الفيديو في لغة html الدرس |16| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الخميس، 26 مارس 2020

جلب الملفات الصوتية والصور المتحركة و الفيديو في لغة html الدرس |16|

جلب الملفات الصوتية والصور المتحركة و الفيديو music and video في html الدرس |16|

سوف نتحدث عن وسوم الملفات الصوتية و الفيديو في هذه اللغة, يوجد وسم لإستحضار الملفات الصوتية وهو audio و وسم استحضار الفيديو هو video سوف نتحدث عنها بشكل مفصل مع أمثلة حية.

وسم الملفات الصوتية audio

الشكل العام له
<audio src="مسار الملف وصيغه"></audio>
ضمن اشارات الاقتباس نضع مسار تواجد الملف الصوتي الذي نرغب بإضافته و نقطه ثم صيغته, المسار عادتاً ما يوضع الملف ضمن المجلد الذيى نعمل به بجانب ملف html و البعض يرغب بإضافة رابط خارجي من موقع, كلاهما جيد, لكن الافضل و المعتاد عليه هو ان يكون بنفس مجلد العمل.
مثال
<audio src="alasr.mp3" controls></audio>

بدون خاصية controls لن تظهر لديكم ازرار على الملف في المتصفح.
وضعت الملف الصوتي الذي اسمه alasr وصيغته هي mp3 ضمن المجلد الذي اعمل عليه حالياًَ.
جلب الملفات الصوتية والصور المتحركة و الفيديو music and video في html الدرس |16|

والكود في المحرر
جلب الملفات الصوتية والصور المتحركة و الفيديو music and video في html الدرس |16|

وفي المتصفح
جلب الملفات الصوتية والصور المتحركة و الفيديو music and video في html الدرس |16|

الخصائص الذي تستخدم معه

خاصية muted هذه تجعل الصوت صامت أي سيكون اشارة خط على المايكروفون, يمكن تشغيله لكن قيمته الافتراضية تكون صامت.
<audio src="alasr.mp3" controls muted></audio>

خاصية autoplay تجعل الملف الصوتي يعمل بشكل تلقائي مجرد زيارة الموقع في المتصفح و توجد متصفحات يكون بها هذا ممنوع اي لا يعمل الصوت بشكل تلقائي عند زيارة الصفحة.
<audio src="alasr.mp3" controls autoplay></audio>

خاصية loop هذه تجعل الملف الصوتي يتكرر بشكل مستمر كلما ينتهي يعيد البدء من جديد.
<audio src="alasr.mp3" controls loop></audio>

خاصية preload نمنع التشغيل التلقائي للملف عند زيارة الصفحة لكن يكون سرعه فتح الصفحه افضل ولا يستهلك ميغابايت من المستخدم اكثر, و تأخذ القيمة none هنا , و القيمة metadata يتم تشغيل الملف مجرد الانتهاء من تحميل الصفحة بالكامل, وللتحميل التلقائي حسب سرعه الانترنت لدى الزائر نختار auto.
<audio src="alasr.mp3" controls preload="none"></audio>

لنأخذ الكود مستخدمين به كل الخصائص الذي ذكرناها قبل قليل
<audio src="alasr.mp3" controls muted preload="none"></audio>

وسم الفيديو video

الشكل العام له
<video src="مسار الملف وصيغه"></video>
ضمن اشارات الاقتباس نضع مسار تواجد ملف الفيديو الذي نرغب بإضافته و نقطه ثم صيغته, المسار عادتاً ما يوضع الملف ضمن المجلد الذي نعمل به بجانب ملف html و البعض يرغب بإضافة رابط خارجي من موقع, كلاهما جيد, لكن الافضل و المعتاد عليه هو ان يكون بنفس مجلد العمل.
مثال
<html dir="ltr" lang="en">
<head>
<title>Programmer Tech</title>
</head>
<body>
    <video src="brmu.mp4" controls></video>
</body>
</html>
هذا يكون في html
والنتيجة في المتصفح
جلب الملفات الصوتية والصور المتحركة و الفيديو music and video في html الدرس |16|

الخصائص الذي تستخدم معه

خاصية muted يكون الفيديو بالوضع الصامت ويمكن تشغيل الصوت لكن افتراضيته صامت.
<video src="brmu.mp4" controls muted></video>

خاصية autoplay تشغيل تلقائي في المتصفح مجرد تحميل او تحديث الصفحة
<video src="brmu.mp4" controls autoplay></video>

خاصية loop تكرار الفيديو في حال انتهاءه يعاد مرة اخرى تلقائي لعدد غير محدود من المرات.
<video src="brmu.mp4" controls loop></video>

خاصية preload منع الملف من التشغيل التقلائي عند زيارة الصفحة بوضع له القيمة none و تشغيله تلقائي بعد تحميل كامل الصفحة بوضع له القيمة metadata و لعرضه بشكل تلقائي حسب سرعة النت عند الزائر نختار القيمة auto.
<video src="brmu.mp4" controls preload="none"></video>

خاصية poster هذه تستخدم لوضع صورة كغلاف للفيديو يراءه الزائر عادتاً ما تكون الصورة ضمن مجلد  العمل .
<video src="brmu.mp4" controls poster="kaissar.jpg"></video>

وباقي الخصائص تتحكم بالطول و العرض حسب رغبه المبرمج وموقع الفيديو من الموقع.
مثال شامل عن جميع الخصائص
<video src="brmu.mp4" controls poster="kaissar.jpg" preload="none" loop autoplay></video>

وسم الصور المتحركة embed

الشكل العام له 
<embed>
هو وسم لجعل الفيديو كصورة متحركة او وضع لرابط موقع و استعمال التصفح كصورة 
مثال عندما يكون فيديو
<embed src="brmu.mp4">
نتيجة المتصفح
جلب الملفات الصوتية والصور المتحركة و الفيديو music and video في html الدرس |16|
مثال عندما يكون رابط موقع خارجي
<embed src="https://www.programmer-tech.com/">

فتح النتيجة في المتصفح
جلب الملفات الصوتية والصور المتحركة و الفيديو music and video في html الدرس |16|

ويستخدم معه للعرض الخاصية width و للطول الخاصيه height .

إلى هنا نكون قد انتهينا من درسنا هذا نتمنى لكم صفحات جميلة و تفوق للجميع.

قناتنا التلغرام
المدونة
صفحة الفيسبوك
قناة اليوتيوب 1:
قناة اليوتيوب 2:

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام