طراحی سایت در تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش HTML – بخش نوزدهم

آموزش html

در بخش هجدهم آموزش HTML مبحث چند رسانه ای و المان هایی که برای افزودن فایل های چند رسانه ای در HTML5 ایجاد شده اند را بررسی خواهیم کرد.

می دانید که منظور از چند رسانه ای، فایل های عکس، فیلم، آهنگ، صدا، انیمیشن و … می باشد که برای استفاده از آنها در صفحه وب المان های HTML را به کار می بریم. همانطورکه می دانید هر فایل چند رسانه ای را می توان در چندین قالب ذخیره کرد. حال سوال این است که بهترین قالب برای ذخیره سازی این فایل ها چه قالبی است؟ آیا مرورگرها از تمامی قالب ها پشتیبانی می کنند؟

مرورگرهای اولیه، تنها یک فونت و یک رنگ را پشتیبانی می کردند که با پیشرفت اینترنت و تکنولوژی، مرورگرهای پیشرفته تر به وجود آمدند که از اکثر قالب ها برای پخش فایل های چند رسانه ای پشتیبانی می کنند. در این جلسه بهترین قالب ها برای استفاده از فایل های چند رسانه ای در فضای وب را بررسی خواهیم کرد.

قالب مناسب برای فایل های چند رسانه ای

همان طور که می دانید فایل های چند رسانه ای را می توان در قالب های مختلفی ذخیره کرد و برای دسترسی راحت به آنها بهتر است که دسته بندی شده و در پوشه ای خاص قرار داده شوند.

قالب مناسب برای فایل های ویدئویی

بهترین قالب برای فایل های ویدئویی، MP4 است چرا که بیشتر مرورگرها و فلش پلیرها و همچنین HTML5 نیز از این قالب پشتیبانی می کنند.

فایل های ویدئویی در قالب های دیگری مثل MPEG، AVI، WMV، QuickTime، RealVideo، Ogg، WebM و MP4 و … ذخیره می شوند که در میان آنها ۳ قالب MP4، WebM . Ogg در HTML5 پشتیبانی می شوند.

قالب مناسب برای فایل های صوتی

برای فایل های صوتی نیز قالب های متعددی مانند MIDI، RealAudio، WMA، AAC، Ogg، MP3 و … تعریف شده است که بهترین گزینه برای استفاده از این فایل ها در صفحات وب، MP3، WAV و Ogg خواهد بود.

فایل ویدئویی در HTML5

قبل از HTML5 فایل های ویدئویی فقط در مرورگرهایی اجرا می شد که پلاگینی خاص مثل flash بر روی آنها نصب بود. اما در HTML5 المان <video>  به وجود آمد تا این مشکل را تا حدودی بر طرف سازد. نسخه های ۴ به بعد مرورگرهای سافاری، فایر فاکس و کروم از این المان پشتیبانی می کنند. و در اینترنت اکسپلورر نسخه ۹ و مرورگر opera از نسخه ۱۰٫۵ به بعد پشتیبانی می شود.

خصیصه های width و height برای المان <video>  باید تنظیم شوند. همچنین برای ایجاد دکمه های کنترل، می توان از خصیصه control استفاده کرد.

کنار فایل index.html یک پوشه با نام videos ساخته ایم و فایل ویدئویی را با نام video01 در آن پوشه قرار داده ایم. حال می خواهیم این فایل را در صفحه جای دهیم. برای این کار ابتدا تگ <video>  که یک زوج تگ است را می نویسیم و خصیصه های گفته شده را برای آن تنظیم می کنیم.

از آنجا که کاربران با مرورگرهای متفاوتی سایت را بازدید کنند بهتر است فایل ویدئویی را با قالب های مناسب برای همه ی مرورگرها، بر روی سایت بارگذاری کنیم. برای این کار از تگ <source>  استفاده می کنیم و دو خصیصه src برای تعیین آدرس فایل و خصیصه type برای تعیین قالب فایل، را برای آن تنظیم می کنیم. مقدار خصیصه type برای قالب های مختلف به صورت زیر خواهد بود:

قالب فایل مقدار خصیصه type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

آموزش html

در مرورگر فایرفاکس با راست کلیک بر روی ویدئو و کلیک بر روی show controls ، دکمه های کنترل پخش ویدئو را در کنار پنجره پخش قرار می دهد. اما با تازه سازی صفحه، مجددا پنهان خواهند شد.

خصیصه دیگری که می تواند برای تگ <video>  به کار رود خصیصه autoplay است که با بارگذاری صفحه ویدئو را به طور خودکار پخش خواهد کرد.

نکته دیگری که لازم است به آن اشاره کرد این است که می توان عبارتی را درون تگ <video>  نوشت که این عبارت تنها زمانی نمایش داده می شود که مرورگر از قالب فایل ویدئویی پشتیبانی نکند.

آموزش html

اگر نسخه اینترنت اکسپلورر را به نسخه کمتر از ۹ تغییر دهید ( تا تگ video را پشتیبانی نکند. در جلسه شانزدهم آموزش HTML نحوه تغییر نسخه اینترنت اکسپلورر گفته شد. ) نتیجه به صورت زیر خواهد بود:

آموزش html

فرمت های WebM و Ogg در مرورگرهای سافاری و اینترنت اکسپلورر پشتیبانی نمی شوند.

علاوه بر استفاده از خصیصه controls می توان از طریق جاوااسکریپت پخش فیلم را کنترل کرد. در مثال زیر این کار را با هم انجام می دهیم. توجه کنید که قصد آموزش جاوا اسکریپت نداریم. صرفا می خواهیم با این روش آشنا شویم. توابع جاوا اسکریپت در آموزش های جاوا اسکریپت به طور کامل بررسی می شوند.

آموزش html

فایل صوتی در HTML5

تا قبل از ظهور HTML5 مرورگرها برای پخش فایل های صوتی نیز از پلاگین استفاده می کردند که در HTML5 نیز این مشکل تا حدودی بر طرف شد.

قرار دادن یک فایل صوتی در صفحه

برای جای دادن یک فایل صوتی در صفحه ابتدا المان در برگیرنده فایل صوتی یعنی <audio>  را ایجاد می کنیم. در این المان نیز از تگ <source>  و خصیصه های src و type استفاده می کنیم.

موسیقی ها را در پوشه audio در کنار فایل index.html قرار داده ایم و طبق آن آدرس دهی را انجام داده ایم. مقدار خصیصه type برای فایل های صوتی به صورت جدول زیر خواهد بود:

قالب فایل مقدار خصیصه type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

آموزش html

اینترنت اکسپلورر فرمت های wav و ogg و مرورگر سافاری نیز فرمت ogg را پشتیبانی نمی کنند.

می توان با استفاده از جاوااسکریپت، دکمه هایی را برای فایل صوتی قرار داد و با آن پخش آهنگ را کنترل کرد. ( همان کاری را که برای پخش ویدئو انجام دادیم. )

آموزش html

تا اینجا نکات و المان های ضروری در HTML5 را بررسی کردیم. حال می توانید ساختمان اصلی یک صفحه وب را به راحتی طراحی کنید. در قدم بعدی به آموزش CSS خواهیم پرداخت و خواهیم دید که چگونه و با استفاده از چه دستوراتی میتوان المان های سند HTML را سبک دهی کرد.
نظرات و پیشنهادات شما عزیزان و همراهان، مشوق و راهنمای ما در ارائه آموزشهای کامل تر و مفیدتر خواهد بود و از بخش دیدگاه ها، خواهید توانست با کارشناسان سایت سازان ارتباط برقرار نمایید.

نوشته های مرتبط

دیدگاه ‏خود را بنویسید