ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

نمایش ویدئو در صفحات HTML مطلب ویژه

توسط 11 تیر, 1393 4136 0

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

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

در جدول زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :

شکل کلی استفاده از < video > تگ

 

<video width='320' height='240' controls='controls'>
    <source src='http://www.learning.asarayan.com/movie.mp4' type='video/mp4' />
    <source src='http://www.learning.asarayan.com/movie.ogg' type='video/ogg' />
    Your browser does not support the video tag.
</video>

 

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

2.خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .


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


در حال حاضر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در زیر می بینید:
MP4 : مرورگرهای گوگل کروم و اپرا پشتیبانی می کنند .
WebM : مرورگرهای گوگل کروم و موزیلا فایرفاکس و اپرا پشتیبانی می کنند .
Ogg : مرورگرهای گوگل کروم و موزیلا فایرفاکس و اپرا پشتیبانی می کنند .

تگ های مربوط به پخش ویدیو در صفحات وب :

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

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


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

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

 

<video width='320' height='240' controls='controls'>
    <source src='http://www.learning.asarayan.com/movie.mp4' type='video/mp4' />
    <source src='http://www.learning.asarayan.com/movie.ogg' type='video/ogg' />
    Your browser does not support the video tag.
</video>

 

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در سه شنبه, 03 شهریور 1394 ساعت 15:49
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا