درباره HTML5‌ و قابلیت‌های آن – پخش ویدیو

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

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


تکه کدی که برای این کار قرار داده شده است بسیار ساده بوده و نیازی به توضیح اضافی ندارد. همانطور که مشاهده می‌کنید:
<video src="movie.mp4" controls="controls">
Your browser does not support the video tag.
</video>
همانطور که در کد بالا مشاهده می‌کنید، ما با چند دستور بسیار ساده، توانستیم یک ویدیو را در مرورگر وب فراخوانی کرده و آن را مشاهده کنیم. در تکه کد بالا، یک تگ با عنوان Video را آغاز کردیم و با استفاده از دستور src محل قرارگیری ویدیو را مشخص نمودیم. و البته با دستور controls که مقدار آن را نیز همان controls قرار دادیم، به مرورگر وب اجازه دادیم برای سهولت کاربر در تماشای ویدیو، از کنترلر (نواری برای کنترل ویدیو)  استفاده کند. در خط دوم جمله‌ای نوشتیم که در صورت پشتیبانی نکردن مرورگر کاربر از این تگ (یعنی تگ پخش ویدیو در HTML5)، اخطار مذکور را به کاربر نشان دهد. اخطاری که در اینجا از آن استفاده کردیم فقط یک جمله ساده بود. شما می‌توانید به جای این جمله، با جایگزین کردن جملات دیگر، کاربر را به سمت استفاده از مرورگرهای جدیدتر و یا ارتقای مرورگر مورد استفاده راهنمایی کنید.
اما کل دستور اجرای ویدیو در HTML5 فقط به این دستور خلاصه نمی‌شود بلکه شما می‌توانید ویژگی‌های دیگری را نیز وارد کار کنید. به عنوان مثال شما می‌توانید پهنا و ارتفاعی را برای ویدیوی خود در نظر بگیرید تا سبک‌دهی وبسایت یا وبلاگ شما به هم نریزد. در تکه کد زیر، دستور پهنا و ارتفاع را اضافه کرده‌ام.
<video src="movie.mp4" controls="controls" width="320" height="240" >
Your browser does not support the video tag.
</video>
همانطور که مشاهده می‌کنید پهنا را با ویژگی width و ارتفاع را با ویژگی height مشخص کردم. یعنی مشخص کردم که پهنا و ارتفاع ویدیو نباید از این مقدار بیشتر یا کمتر باشد. در صورتی که اندازه ویدیوی من از این پهنا بیشتر و یا کمتر بود، مرورگر به طور پیشفرض ویدیوی من را به این اندازه به من نشان خواهد داد. البته لازم به ذکر است که اگر شما فقط از یکی از ویژگی‌های width یا height استفاده کنید، مرورگر شما با حفظ تناسب، تصویر را برای بیننده با توجه به مقدار داده شده، هماهنگ می‌کند.(دقت داشته باشید که مقدارهای وارد شده در width و height باید به صورت عددی باشند و بر حسب pixel محاسبه می‌شوند)
اما شما دستورات دیگری را نیز می‌توانید وارد تگ video بکنید که در ادامه با هر یک از آنها بیشتر آشنا خواهیم شد.
autoplay
این دستور که مقدار(value) آن autoplay  است، باعث می‌شود که ویدیوی شما پس از بارگذاری سایت، به صورت خودکار اجرا شده و نیازی به اجرای دستی آن از سوی کاربر نداشته باشد.
loop
به احتمال خیلی زیاد، عبارت repeat را در بسیاری از دستگاه‌های پخش ویدیو و موزیک دیده‌اید. loop هم دقیقا همان کار را انجام می‌دهد. یعنی به طور اتوماتیک بعد از اتمام پخش ویدیو، آن را دوباره به صورت خودکار اجرا می‌کند. مقدار این دستور نیز loop می‌باشد.
preload
این گزینه همانند ویژگی autoplay عمل میکند با این تفاوت که ویژگی autoplay بعد از بارگذاری کامل صفحه، ویدیو را برای بیننده پخش می‌کند اما این گزینه، ویدیو را در هنگام بارگذاری صفحه پخش میکند. این کار در وبسایت‌های دانلود فایل که بیننده منتظر پایان شمارش معکوس برای دانلود است، متداول می‌باشد. البته باید دقت داشته باشید که نمی‌توانید از هر دو دستور autoplay و preload به طور همزمان استفاده کنید.
اگر مرورگر وبسایت شما در HTML5 پشتیبانی کند، دقیقا در زیر همین متن، یک ویدئو برای شما پخش خواهد شد اما اگر پشتیبانی نکند، متنی با عنوان “مرورگر شما قادر به پشتیبانی HTML5 نیست” را خواهید دید.

ویژگی‌های src و control و height و width را هم در ابتدا به شما معرفی کردیم. شما هم‌اکنون می‌توانید یک صفحه پخش ویدیو با دستوراتی که در این مقاله فراگرفتید، راه‌اندازی کنید.
هم اکنون که این مقاله نوشته شده است، دستورات html5 قادر به اجرای فایل‌هایی با پسوندهای ogg و mp4 هستند و مرورگرهای firefox4, chromo3, safari4, opera10, internet explorer9 و جدیدتر، قادر به اجرای این دستور می‌باشند.
تمامی حقوق این مقاله مربوط به فاروکسا بوده و کپی از آن فقط با ذکر منبع مجاز است.
موفق و پیروز باشید.

10 دیدگاه برای «درباره HTML5‌ و قابلیت‌های آن – پخش ویدیو»

  1. مزیت دیگر این کد سیو کردن راحت ویدئو هست … فقط کافیه راست کلیک بکنید و سیو ویدئو رو بزنید .
    ممنون بابت معرفی

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

  3. درسته. متاسفانه یکی از مشکلات همه، استفاده از اینترنت اکسپلورر 6 هست که خوشبختانه و خوشبختانه طبق آماری که وبلاگ من ارائه میده، اینترنت اکسپلورر 6 در ردیف پنجم قرار داره. البته فقط در این وبلاگ…
    ممنون از دیدگاهتون

  4. ممنون که توجه داری دوست عزیز
    به محض تموم شدن امتحانات دانشگاه دوباره وبلاگ آپدیت میشه
    البته با قدرت بیشتر

  5. سلام ممنون ازراهنماییتون ولی برای من اجرانمیشه !ویدیورومیاره ولی نشون نمیده مرورگرم هم firefox4هست!
    ممون میشم راهنمایی کنید

امکان ثبت دیدگاه وجود ندارد.