آموزش جامع نمایش ویدیو در html5

Html 5 جدیدترین نسخه زبان وب است که بدون نیاز به جاواسکریپت و یا پلاگین هایی نظیر فلش و سیلورلایت قادر به نمایش جلوه های خاص یا پخش ویدیو به صورت آنلاین در وب است.

به صورت خلاصه برخی از قابلیت های html5 به این شرح است:

canvas element : یک canvas element در اصل یک bitmap خالی بر روی یک صفحه است که می توان از آن برای رندر کردن نمودارها، گرافیک بازی ها یا تصاویر استفاده کرد.

Web Worker API : با این قابلیت مرورگر قادر به انجام چند عملیات به صورت همزمان می شود. شما می توانید چندین وظیفه را به طور همزمان انجام دهید.

Offline Web : در حال حاضر شما می توانید صفخات وب را به صورت آفلاین در مرورگرتان مشاهده کنید. اما در Html5 علاوه بر مشاهده وب سایت به صورت آفلاین قادرید با صفحه وب ارتباط برقرار کرده و مثلاً ویدیو تماشا کنید و یا فرم های موجود در صفحه را پر کنید و هنگامیکه به اینترنت متصل شدید، مرورگر تغییرات را آپلود می کند.

drag&drop و کنترل های جدید برای فرم ها (مانند تشخیص صحت آدرس ایمیل و url) از دیگر ویژگی های html5 است.

در حال حاضر آخرین نسخه از مرورگرهای اپرا ، فایرفاکس ، کروم ، اینترنت اکسپلورر ، سافاری از html5 پشتیبانی می کنند.

و اما بحث نمایش ویدیو در Html 5 - اچ تی ام ال 5 :
در حال حاضر ویدئو ها از طریق یک پلاگین مثل فلش (شرکت ادوبی) یا سیلورلایت (شرکت مایکروسافت) نشان داده می شوند که برای نمایش ویدیو باید پلاگین مورد نظر روی مرورگر نصب گردد. اما به کمک Html 5 نمایش آنلاین ویدئو در وب بدون نیاز به هیچ پلاگینی و فقط از طریق خود مرورگر میسر خواهد شد. اینجاست که شرکتی مانند ادوبی که سالها عهده دار نمایش ویدیو آنلاین در وب بوده است، احتمالاً در آینده ای نچندان دور طعم شکست را تجربه خواهد کرد. زیرا از طرفی شرکتی مانند اپل سالهاست که با فرمت فلش سر جنگ دارد! از آنطرف هم گوگل به تدریج در حال مهاجرت از فلش به Html5 و کدک مخصوص خودش است.

برای نمایش ویدیو در اچ تی ام ال 5 - Html5 تنها به کدهای زیر احتیاج است:

<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="http://doamin.tdl/Video.mp4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="http://doamin.tdl/Video.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>

ویژگی controls برای افزودن کنترل های play، pause و ولوم صداست.
بین دو تگ <video> و </video> پیغامی نوشته میشود که اگر مرورگر کاربر از عنصر Video پشتیبانی نمی کند نمایش داده شود:

<video src="video.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

در مثال فوق نوع فایل Ogg بود که در مرورگرهای فایرفاکس و اوپرا و کروم قابل اجراست. برای نمایش ویدیو در اینترنت اکسپلورر و سافاری باید فرمت WebM و MPEG 4 فایل خود را تهیه و به صورت زیر استفاده کنید:

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

تگ ویدیو اجازه استفاده از چند source را می دهد. تگ های source می تواند به فایل های ویدیویی مختلف وصل باشد. مرورگر اولین فرمتی که قابلیت نمایش آن را داشته باشد همان را به کاربر نشان می دهد.

خواص ویژگی ها یا Attribute تگ video
audio: حالت پیش فرض صدا را تعریف می کند. مقدار=muted
autoplay: ویدیو به محض اینکه آماده شود خود به خود پخش می شود. مقدار=autoplay
controls: در صورت وجود دکمه های کنترلی نمایش داده می شود. مقدار=controls
width: پهنای پخش کننده ویدیو را تنظیم می کند. مقدار=عددی بر حسبpixel
Height: ارتفاع پخش کننده ویدیو را تنظیم می کند. مقدار=عددی بر حسب pixel
loop: در صورت وجود پس از اتمام نمایش ویدیو پخش آن دوباره شروع می شود. مقدار=loop
poster: مشخص کننده تصویری است که به عنوان پیش نمایش ویدیو از آن استفاده می کند. مقدار=یک url یا آدرس اینترنتی است.
preload: در صورت وجود ویدیو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.
src: آدرس ویدیویی که باید پخش شود. مقدار=url یا آدرس اینترنتی است. اما کمی صبر کنید! قضیه به راحتی تمام نمیشود! حالا اول بحث و جدال و درگیری است که نتیجه آن هم مسلماً سردرگمی کاربران و توسعه دهندگان وب است. کجای قضیه مشکل دارد؟
Html5 تنها یک قالب استاندارد برای نمایش ویدیو ارائه کرده است و بخش اصلی در نمایش ویدیو که همان کدک تصویری می باشد را به عهده مرورگرها گذاشته است. یعنی نمایش ویدیو وابسته به کدک های موجود در مرورگر است. اینجاست که جنگ بین مرورگرها از سر گرفته می شود.

فرمت های ویدیویی پیشنهادی:

الف) H.264 که توسط گروه MPEG نگهداری می شود (mp4) که یک کدک غیررایگان است و برای استفاده باید لایسنس آن را خریداری نمود. یعنی هم مرورگرها برای استفاده از این فرمت باید هزینه پرداخت کنند، هم کسانی که ویدیوها را با فرمت Mp4 بر روی سایت خود قرار می دهند. مرورگر اینترنت اکسپلورر و سافاری و کروم از فرمت mp4 h264 پشتیبانی می کنند.

ب) Ogg Theora محصولی از بنیاد Xiph.org که به صورت رایگان عرضه شده است و ویدیوهای این کدک با فرمت Ogv یا Ogg شناخته می شوند. در حال حاضر مرورگرهای کروم ، اپرا و فایرفاکس از این استاندارد پشتیبانی می کنند.

ج) WebM با کدک تصویری VP8 و کدک صوتی Vorbis که توسط گوگل توسعه یافته است. مرورگرهای کروم ، اپرا و فایرفاکس از این استاندارد پشتیبانی می کنند.

کدام کدک پیروز است؟
در مورد این سوال بحث های زیادی مطرح شده اما پاسخ قاطعی به این پرسش وجود ندارد. اما این را بدانید گوگل در پروژه Html5 مربوط به وبسایت «یوtیوb!!» از فرمت h264 برای نمایش ویدیوها استفاده کرد، اما بعد از مدتی گوگل کدک VP8 را خریداری کرد و این کدک را به یک استاندارد کد منبع باز تبدیل نمود و آنرا به فرمت WebM افزود. بعد از این جریان گوگل در سایت مذکور، ویدیوها را با فرمت WebM قرار می دهد و استفاده از h264 را کنار گذاشته است.

MPEG 4: فایل های MPEG 4 با کدک تصویری H.264 و کدک صوتی AAC
پشتیبانی در:
IE 9.0+
Chrome 5.0+
پشتیبانی نمی شود در:
Firefox
Opera
Safari

Ogg: فایل های Ogg با کدک تصویری Theora و کدک صوتی Vorbis
پشتیبانی در:
Firefox 3.5+
Opera 10.5+
Chrome 5.0+
پشتیبانی نمی شود در:
InternetExplorer
Safari

WebM: فایل های WebM با کدک تصویری VP8 و کدک صوتی Vorbis
پشتیبانی در:
Firefox 4.0+
Opera 10.6+
Chrome 6.0+
پشتیبانی نمی شود در:
IE
Safari

توضیحات بیشتر...
نمایش یک ویدیو در Html5 - دمو