نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

در این جلسه در طراحی سایت کار با عناصر چندرسانه ای را باهم خواهیم آموخت:

استفاده از ویژگی هاي HTML5براي نمایش صدا و ویدئو

HTML5روش ھا و تگ ھای جدیدی برای قرار دادن عناصر چندرسانه ای در صفحات وب را فراھم کرده است. تگ video برای قرار دادن فایل ھای ویدیویی و تگ audioبرای قرار دادن فایل ھای صوتی در این نسخه ارائه شده اند. مزیت ھای این دو تگ نسبت به تگ ھایی ھمچون objectو embedاین است که مرورگرھایی که از این دو تگ جدید پشتیبانی می کنند قادرند اینگونه فایل ھای صوتی و ویدیویی را بدون نیاز به پلاگین ھا اجرا کنند.

تگ <video>:

ابتدا به بررسی تگ videoمی پزدازیم. این تگ از صفت ھای زیر پشتیبانی می کند:

audio:وضعیت پیش فرض صدای فایل ویدیویی را مشخص می کند و در صورتی که آن را برابر مقدار mutedقرار دھید صدای فایل از ھمان ابتدای اجرا قطع خواھد بود.
autoplay:این صفت بولین ھمانطور که از نامش پیداست در صورتی که تعیین شود فایل ویدیویی را به محض بارگذاری و آماده شدن، به ورت خودکار اجرا خواھد کرد.
controls:این صفت بولین در صورتی که تعیین شود، که مشخص می کند که کلید ھای کنترلی پخش فایل ویدیویی باید نمایش داده شود. مرورگرھا می بایست کلیدھای کنترلی زیر را فراھم کنند. کلیدھای میی باشندFullscreen , و دکمهplay , pause , seeking , volume کنترلی شامل

Loop:این صفت بولین در صورت ذکر شدن، فایل ویدیویی را پس از پایان مجددا اجرا خواھد کرد.
poster:این صفت موجب نمایش یک عکس در ھنگام بارگذاری فایل یا تا زمانی که کاربر فایل را اجرا نکرده است خواھد شد. این صفت آدرس یک عکس را به عنوان مقدار می پذیرد. بھتر است این تصویر، تصویر یکی ازز فریم ھای فیلم باشد. در صورتی که از این صفت استفاده نشود مرورگر به صورت پیش فرض اولین فریم از فیلم را نمایش خواھد داد.

preload:این صفت مشخص می کند که آیا فایل ویدیویی باید ھمزمان با بارگذاری صفحه، دانلود شود خیر؟ این صفت سه مقدار زیر را می پذیرد.
autoo: تعیین این مقدار موجب بارگذاری فایل ھمزمان با بازگذاری صفحه خواھد شد.

metadata: این مقدارفقط موجب دریافت اطلاعات اضافی فایل و عدم بارگذاری آن ھمزمان بارگذاری صفحه خواھد شد. اطلاعات اضافی شامل مواردی ھمچون ابعاد فیلم، اولین فریم، لیستی از trackھا، مدت زمان و … می باشد.
none: تعیین این مقدار از بارگذاری فایل ھمزمان با بارگذاری صفحه جلوگیری خواھد کرد.
src: این صفت آدرس فایلی که باید پخش شود را مشخص می کند.
width:
height:
در مثال زیر یک نمومه از کاربرد این تگ ھمراه با صفت ھایی که در بالا گفتیم را مشاھده می کنید:

 <video src="videos/movie.mp4" controls="controls" preload="auto" width="500" height="400"
 poster="img_poster.jpg" autoplay="autoplay" audio="muted"> </video>

تگ<audio> :

از این تگ برای گنجاندن فایل صوتی در صفحات اینترنتی استفاده می شود. این تگ از صفت ھای زیر یل ھمان توضیحات ذکر شده در تگ videoپشتیبانی می کند.

autoplay
controls
loop
preload
src

 <audio src="sounds/1.mp3" controls="controls">
 You'r Browser Does not support the audio alement.
 Please Install Last Version of You'r Browser!
 </audio>

ھمانطور که می دانید ھمه مرورگرھا از تمامی فرمت ھای ویدیویی و صوتی به صورت یکسان پشتیبانی نمی کنند. در این صورت چنانچه ما در تگ ھای audioو videoبا استفاده از صفت srcفایلی با فرمت خاص را مشخص کنیم ممکن است در بعضی از مرورگرھا نمایش داده نشود.
یکی از مزیت ھای تگ ھای فوق امکان تعریف ھمزمان چندین فرمت از یک فایل برای حل این مشکل است. برای اینکار کافی است از تگی به نام sourceاستفاده کنیم. ما می توانیم ھمزمان از ھر تعداد تگ sourceبرایی تعیین فرمت ھای مختلف در داخل تگ ھای audioو videoاستفاده کنیم. در این صورت مرورگرھا از میان فرمت ھای مشخص شده اولین فرمتی که با آن سازگار است را اجرا می کند. تگ sourceدر این حالتدو صفت می پذیرد که به شرح زیر است:

src:این صفت آدرس فایل مورد نظر را تعیین می کند.
type:این صفت ھم mime Typeفایل مورد نظر را تعیین می کند.
کد زیر نحوه استفاده از تگ ھای audioو sourceeھمزمان با یکدیگر را نشان می دھد:

 <audio controls="controls">
 <source src="song.ogg" type="audio/ogg" />
 <source src="song.mp3" type="audio/mpeg" />
 </audio>

نحوه استفاده از تگ ھای videoو sourceنیز به ھمین شکل است.