سبد (0)

نمایش ویدئو در HTML5

وب سایت های جدید، اکثراً از ویدئو در محتوای خود استفاده می کنند. HTML5 استانداردی را برای نمایش آن ها فراهم کرده است.


نمایش ویدئو در وب

تا به حال، هرگز استانداردی برای نمایش ویدئو در صفحات وب وجود نداشته است.

امروزه، ویدئوها عموماً از طریق یک پلاگین مثل Flash نشان داده می شوند. هر چند همه مرورگرها پلاگین های مشابهی ندارند.

HTML5 روش استانداردی را برای نمایش ویدئو با استفاده از عنصر (video) فراهم کرده است.


پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <video> را پشتیبانی می کنند.

توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عنصر <video> را پشتیبانی نمی کنند.


عنصر <video> چگونه کار می کند؟

برای نمایش ویدئو در HTML5 تنها به یک چیز نیاز دارید:

مثال (نمایش ویدئو در HTML5)

<video width="320" height="240" controls>
  <source src="/movie.mp4" type="video/mp4">
  <source src="/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
خودتان امتحان کنید »

ویژگی controls برای افزودن کنترل های play ،pause و صدا بکار برده می شود.

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

 در صورتی که مرورگر از عنصر <video> پشتیبانی نمی کند باید بین دو تگ <video> و <video/> جمله ای مناسب مانند زیر قرار داده شود:

Your browser does not support the video tag.

تگ <video> به شما اجازه می دهد که چند تگ <source> داشته باشید. تگ های <source> می تواند به فایل های ویدئویی مختلفی لینک شوند. مرورگر اولین فرمتی که قابلیت نمایش آن را داشته باشد، به کاربر نشان می دهد.

مثال بالا از یک فایل Ogg استفاده کرده است و در مرورگرهای Firefox, Opera, Chrome کار می کند. برای اینکه ویدئو در IE و Safari و نسخه های قبلی Chrome نیز نمایش داده شود، باید از فابل های MP4 استفاده کنید.

تمام خصوصیت های تگ <video>

audio: حالت پیش فرض صدا را تعریف می کند. در حال حاضر فقط یک مقدا می تواند بگیرد: muted

autoplay: در صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود و مقداری که می تواند بگیرد: autoplay

controls: در صورت وجود دکمه های کنترلی توضیح داده شده در بالا نمایش داده می شود. مقدار: controls

Height: ارتفاع پخش کننده ویدئو را تنظیم می کند. مقدار: عددی بر حسب pixel

loop: در صورت وجود پس از اتمام نمایش ویدئو پخش آن دوباره شروع می شود. مقدار:loop

poster: مشخص کننده تصویری است که به عنوان پیش نمایش ویدئو از آن استفاده می کند. مقدار آن یک url یا آدرس اینترنتی است.

preload: در صورت وجود ویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.

src: آدرس ویدئویی که باید پخش شود. مقدار آن یک url یا آدرس اینترنتی است.

width: پهنای پخش کننده ویدئو را تنشیم می کند. مقدار: عددی بر حسب pixel


فرمت های ویدئویی و پشتیبانی مرورگرها

در حال حاضر 3 فرمت توسط تگ <video> پشتیبانی می شود:

  • MP4: فایل های MPEG 4 با کدک تصویری H264 و کدک صوتی AAC
  • WebM: فایل های WebM با کدک تصویری VP8 و کدک صوتی Vorbis
  • Ogg: فایل های Ogg با کدک تصویری Theora و کدک صوتی Vorbis
Browser MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES

MIME Types for Video Formats

Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

متدها و خصوصیت های عنصر <video>

در HTML5 برای عناصر <video> و <audio>، متدها، خصوصیت ها و رویدادهایی تعریف شده است.

این متدها، خصوصیت ها و رویدادها به شما اجازه می دهد تا با استفاده از JavaScript عناصر <video> و <audio> را دستکاری نمایید.

برای مثال متدهایی برای پخش، توقف و بارگذاری ویدئو وجود دارد و همچنین خصوصیت هایی مثل duration و volume و یا رویدادهایی که می تواند شما را از شروع و یا توقف و یا به پایان رسیدن ویدئو مطلع کند.

در مثال زیر، به روشی ساده چگونگی آدرس دهی یک عنصر <video>، خواندن و تنظیم خصوصیت ها و صدا زدن متدها توضیح داده شده است.

مثال 1

ساخت یک کنترل ویدئوی ساده (play/pause + resize)

<script>
var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
  myVideo.play();
else
  myVideo.pause();
}

function makeBig()
{
myVideo.width=560;
}

function makeSmall()
{
myVideo.width=320;
}

function makeNormal()
{
myVideo.width=420;
}
</script>

در مثال بالا از دو متد ()play و ()pause و همچنین دو خصوصیت paused و width استفاده شده است.

خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه