نمایش ویدئو در HTML5
وب سایت های جدید، اکثراً از ویدئو در محتوای خود استفاده می کنند. HTML5 استانداردی را برای نمایش آن ها فراهم کرده است.
نمایش ویدئو در وب
تا به حال، هرگز استانداردی برای نمایش ویدئو در صفحات وب وجود نداشته است.
امروزه، ویدئوها عموماً از طریق یک پلاگین مثل Flash نشان داده می شوند. هر چند همه مرورگرها پلاگین های مشابهی ندارند.
HTML5 روش استانداردی را برای نمایش ویدئو با استفاده از عنصر (video) فراهم کرده است.
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <video> را پشتیبانی می کنند.
توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عنصر <video> را پشتیبانی نمی کنند.
عنصر <video> چگونه کار می کند؟
برای نمایش ویدئو در HTML5 تنها به یک چیز نیاز دارید:
مثال (نمایش ویدئو در HTML5)
<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/> جمله ای مناسب مانند زیر قرار داده شود:
تگ <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)
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 استفاده شده است.
خودتان امتحان کنید »- نوشته شده توسط امیر پهلوان صادق
- بازدید: 25972
دیدگاه‌ها
با سلام
اگر چند تا ویدئو بخواهیم بگذاریم در یک صفحه آیا باید برای هر ویدئو یک تگ video باز کنیم یا نه؟ و این کار چگونه انجام می شود؟
آیا یک تگ video با چند سورس به معنای پخش چند فیلم هست؟
سلام
برای هر تگ ویدئو باید یک تگ video را باز کنید درست همانطور که برای هر تگ پاراگراف، یک تگ p را باز می کنید.
البته فکر می کنم که به وسیله ی php آنچه که مد نظر شما است قابل انجام باشد. مثلا فرض کنید با فراخوانی یک صفحه از یک سایت، یک فایل php اجرا شود . سپس بعنوان مثال براساس روزهای هفته، نام هفت فیلم که شماره گذاری شده اند(از 1 تا 7) را در یک آرایه قرار دهیم. حالا می توانیم به وسیله ی php بر اساس روز های هفته، آدرس ویدئوی مورد نظر را به تگ video بدهیم.
در ضمن یک تگ video با چند سورس به معنی پخش چند فیلم نیست بلکه به معنی یک ویدئو ی جایگزین با یک فرمت متفاوت می باشد تا بتواند در تمام مرورگرها اجرا شود.