آموزش html 5 - پخش فایل های تصویری در صفحات وب

[TAHA]

نمایش ویدیو در صفحات HTML :
بسیاری از صفحات وب به پخش و اجرای فایل های ویدیویی و فلش می پردازند . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های ویدویی در صفحات وب وجود نداشت و طراحان وب برای نمایش اینگونه فایل ها از ابزارهای جانبی مثل falsh player استفاده می کردند .
این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل ویدویی را نمایش دهد .
اما HTML 5 ، یک استاندارد برای نمایش فایل های ویدویی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .
تگ جدید < video > ، برای نمایش فایل های ویدویی در صفحات وب به کار می رود .
در جدول زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :


شکل کلی استفاده از
< video > تگ
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>


در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :


خواص width و height : این خواص ابعاد فریم نمایش ویدیو را تعیین می کنند . تعیین این پارامترها اجباری نیست ، اما تعیین آنها از قبل ، این امکان را به مرورگر و طراح صفحه می دهد تا قبل از اجرای صفحه میزان فضای لازم برای این تگ را در نظر گرفته و طرح صفحه به هم نریزد . اگر مقدار این خواص تعیین نشوند ، فریم پخش ویدیو به اندازه سایز فایل ویدویی در خواهد آمد .
خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .
تعیین چند فرمت برای فایل ویدویی توسط تگ < source > : همانطور که متوجه شده اید ، چند فرمت مختلف از یک فایل یکسان را به وسیله تگ < source > در درون تگ < video > قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص ویدویی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است . هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می کند . این کار برای سازگاری با مرورگرهای مختلف است .

در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :


Ogg
WebM
MP4
نوع مرورگر


Yes
Yes
No
http://pnu-club.com/imported/2012/07/122.gif


Yes
Yes
No
http://pnu-club.com/imported/2012/07/123.gif


No
No
Yes
http://pnu-club.com/imported/2012/07/124.gif


Yes
Yes
Yes
http://pnu-club.com/imported/2012/07/125.gif



تگ های مربوط به پخش ویدیو در صفحات وب "
در لیست زیر تگ های اصلی و مهم مرتبط با پخش ویدیو در HTML 5 را به همراه توضیحات مختصری راجع به هر کدام ، قرار داده ایم . برای دریافت اطلاعات بیشتر بر روی نام آن تگ کلیک نمایید :


شرح
تگ


این تگ تگ اصلی پخش ویدیو در HTML 5 است ، که به وسیله آن کد لازم برای نمایش ویدیو را قرار می دهیم .
< video >


این تگ آدرس و نوع فایل ویدیویی که می خواهیم نمایش دهیم را تعیین می کند .
< source >



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


Example


<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
کد


Your browser does not support the video tag.
خروجی


مثال : در مثال دوم ، همان مثال قبل را بازنویسی کرده ایم ، با این تفاوت در آن خاصیت controls را مقدار د هی نکرده ایم . می بینید که ویدیو دکمه های پخش و توقف را ندارد :
نکته : اگر مرورگر شما از تگ < video > پشتیانی نکند ، پیام هشدار قرار داده شده در کد مثال نمایش داده خواهد شد .


Example


<video width="320" height="240" >
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
کد


Your browser does not support the video tag.
خروجی