مبحث html5 دارای عناصر جدید زیادی است و به برخی عناصر جدید html5 در مطلب کار با فرم ها و فیلد های ورود اطلاعات و عناصر input اشاره شد.

اما ما در این جا تنها به چند تگ کاربردی می پردازیم زیرا html5 وابستگی زیادی به javascript دارد که موضوع بحث ما نیست. ما در این مطلب به عناصر کاربردی HTML5 در کار با نمایش فایل های تصویری و صوتی می پردازیم.

Video:

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

 

تنها صفت جدید در تکه کد بالا controls است. این صفت که می تواند به صورت controls=”controls” هم نوشته شود برای نمایش دکمه های کنترل مانند دکمه “پخش” می باشد.

عنصر جدید که در کد بالا دیده می شود عنصر <source/> است. این عنصر برای پیوست یک فایل به عنصر video می باشد. صفت src که مسیر فایل ویدئو است و صفت type نوع فایل و فرمت آن را مشخص می کند. مثالی از کد ویدئو را در زیر می بینید:

 

اگر به صفت type دقت کنید این صفت شامل دو قسمت است:video که برای فایل های ویدئویی است و پس از کاراکتر / فرمت فایل ویدئویی قرار می گیرد.

اگر مرورگر فرمت mp4 را پشتیبانی نکند، آنگاه به سراغ فرمت ogg می رود تا آن را نمایش دهد و اگر آن را هم پشتیبانی نکند و نتواند نمایش دهد، پیغام “مرورگر شما نمی تواند این فایل ویدئو را نمایش دهد” را نمایش می دهد. بنابراین بهتر است چندین فایل با چندین فرمت مختلف از یک فایل را به عنصر video اضافه کنید تا با هر مرورگری قابل مشاهده باشد.

خروجی تگ ویدئو در مرورگر های مختلف دارای شکل متفاوتی است. در زیر در مرورگر گوگل کروم خروجی را مشاهده می کنید:

استفاده از HTML5 برای نمایش فایل های ویدئویی

که در اینترنت اکسپلورر (Internet Explorer) به این صورت است:

 

استفاده از HTML5 برای نمایش فایل های ویدئویی در اینترنت اکسپلورر

 

مرورگرهای مختلف فرمت های مختلف را پشتیبانی می کند. در زیر جدولی از پشتیبانی فرمت های مختلف ویدئو در مرورگرهای مختلف را می بینید:

Ogg WebM MP4 مرورگر
خیر خیر بلی Internet Explorer 9+
بلی بلی بلی Chrome 6+
بلی بلی خیر Firefox 3.6+
خیر خیر بلی Safari 5+
بلی بلی خیر Opera 10.6+

 

Audio:

همچنین مانند عنصر <video> برای نمایش فایل های صوتی از این عنصر استفاده می شود که با تگ <audio> شناخته می شود.

در این عنصر خبری از صفات height و width نیست. در زیر مثالی از این عنصر را مشاهده می کنید:

که خروجی آن به شکل زیر است:

استفاده از HTML5 برای نمایش فایل های صوتی در صفحات وب

Embed:

استفاده از تگ های <audio> و <video> در صفحات وب مشکلات زیادی دارد. مثلا لازم است فرمت های مختلف یک فایل را داشته باشید و صفحه ی خود را با مرورگرهای مختلف سازگار کنید.

برای سادگی کار می توان از تگ <embed> استفاده کرد که به صورت یک پلاگین بر روی مرورگرها ظاهر می شود.

در این عنصر نیازی به مقداردهی صفت type نیست زیرا برای مرورگز فرقی نمی کند و برای هر دو نوع فایل صوتی و تصویری باید مقادیر height و width را تنظیم کرد:

که خروجی آن در اینترنت اکسپلورر به صورت زیر است:

استفاده از HTML5 برای نمایش فایل های تصویری - embed

و در Google Chrome به صورت زیر است:

استفاده از تگ embed برای نمایش فایل های تصویری