HTML5 الدرس الثانى فى

Video and Audio

من المعروف انة لتشغيل فيديوهات او صوتيات على مواقع الانترنت فذلك يتطلب منا ان نقوم بتسطيب برنامج كالفلاش لتشغيل الفيديوهات او الصوتيات لكن مع هذا الاصدار من لغة (HTML) نستطيع مشاهدة الفيديوهات او سماع الصوتيات مباشرة بدون الحاجة الى تسطيب برامج.

(1)Video:

التاج المستخدم فى اداج فيديو فى صفحة الويب هو <video></video> كالتالى:

<!DOCTYPE html>

<html>

<body>

<video width=”290″ height=”180″ controls>

<source src=”videoname.mp4″ type=”video/mp4″>

</video>

</body>

</html>

حيث يتم تحديد عرض وطول الفيديو داخل تاج (video) وايضا يمكن استخدام كلمة (controls) للتحكم فى تشغيل وتوقيف الفيديو وايضا التحكم فى درجة الصوت.ويستخدم مع تاج (video) تاج (source) وهو المسئول عن تحديد مسار الفيديو من الجهاز وايضا تحديد صيغة الفيديو ومن امثلتها (MP4,WebM,Ogg) حيث (MP4) تعمل مع متصفحات (Firefox, Explorer,Chrome,Safar) اما (Ogg,WebM) فتعمل مع متصفحات (Firefox,Opera,Chrome) ولا بد ان تسبق اسم صيغة الفيديو كلمة (video) كما فى المثال السابق.

(2) Audio:

مثال:

<!DOCTYPE html>

<html>

<body>

<audio controls>

<source src=”audioname.ogg” type=”audio/ogg”>

</audio>

</body>

</html>

وبالمثل كما ذكرنا سابقا فان صيغ الاوديو هى (Ogg,Wav,MP3) حيث (MP3) تعمل مع متصفحات (Safari, Explorer ,Chrome) اما (Wav) فتعمل مع متصفحات(Firefox,Opera,Safari, Chrome) كما ان (Ogg) فتعمل مع متصفحات(Chrome, Firefox,Opera).

– فى الحالتين السابقتين الخاصة بالفيديوهات والصوتيات يمكن تكرار تاج (source) لضمان تشغيل الفيديوهات او الصوتيات على كل المتصفحات كالتالى:

<video width=”320″ height=”240″ controls>
<source src=”videoname.mp4″ type=”video/mp4″>
<source src=”videpname.ogg” type=”video/ogg”>
<source src=”videpname.webm ” type=”video/webm “>
</video>

وبالمثل مع الاوديو.

 

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: