راهنمایی برای پخش ویدیو د ر html5 ؟

[mosi2007]

سلام
دوستان مقاله ای رو خوندم را جع به html5 نوشته بود که دیگه دوران فلش و ادوب با اومدن html 5 به پایان رسیده چون میتونه که تو صفحات بدون استفاده از فلش پلیر ویدیو و موزیک پخش کنه

اگه امکان داره دوستان کدی که مربوط به پخش ویدیو در html5 است رو بدن
چون میخوام که ویدیوهای سایتمو با html5 پخش کنم و دیگه از jwplayer و adobe flash player تو سایتم استفاده نکنم
این امکان وجود داره دوستان؟؟؟؟!!!!!!

[mosyhey]

HTML5 Tutorial (http://www.w3schools.com/html5/default.asp)
HTML5 Video (http://www.w3schools.com/html5/html5_video.asp)
HTML5 <video> - Take Control Using the DOM (http://www.w3schools.com/html5/html5_video_dom.asp)
HTML5 Audio (http://www.w3schools.com/html5/html5_audio.asp)

[cyrusthegreat]

سلام
دوستان مقاله ای رو خوندم را جع به html5 نوشته بود که دیگه دوران فلش و ادوب با اومدن html 5 به پایان رسیده چون میتونه که تو صفحات بدون استفاده از فلش پلیر ویدیو و موزیک پخش کنه

اگه امکان داره دوستان کدی که مربوط به پخش ویدیو در html5 است رو بدن
چون میخوام که ویدیوهای سایتمو با html5 پخش کنم و دیگه از jwplayer و adobe flash player تو سایتم استفاده نکنم
این امکان وجود داره دوستان؟؟؟؟!!!!!!

دوست عزیز

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

حالا کد هاش. براساس ما تگ video داریم که با اون می تونید بگید که ویدئو می خوایید اجرا کنید. این تگ یه سری Attr داره که مهمترینشون اینها هستن:


height و width برای مشخص کردن ارتفاع و طول ویدئو.
autoplay برای اینه که مشخص کنید که آیا بلافاصله پس از آماده شدن، اجرا بشه یا نه. که مقدارش خود autoplay هستش.
controls که مشخص می کنید دکمه های کنترلی مثل توقف و اجرا نمایش داده بشن یا نه که مقدارش هم باز خود controls هستش.
loop که برای این هست که مشخص کنید بعد از پایان دوباره اجراه بشه بصورت خودکار یا نه که مقدارش loop هست.
muted برای انکه صدارو قطع کنید که مقدارش muted هستش.
poster برای نشان دادن عکسی که قبل از اجرای ویدئو نمایش داده بشه که مقدارش آدرس اون عکس هستش.
Src برای مشخص کردن آدرس ویدئو، که فقط یکی می تونه باشه که توصیه می کنم از تگ Source بجاش استفاده کنید.


تا حالا، اینجوری شده تگ شما:


<video controls="controls" autoplay="autoplay" height="500px" width="600px" loop="loop" muted="muted" poster="images/poster.jpg">
مرورگر شما از تگ ویدئو پشتیبانی نمی کند.
</video>


دیدید که از Src استفاده نکردیم. چون بدلیل اینکه مرورگر های مختلف، از فرمت های مختلف ویدئو پشتیبانی می کنن، باید با استفاده از تگ source انواع مختلف ویدئو رو براش مشخص کنید. شکل کلی تگ source اینجوری هست و در داخل تگ form قرار می گیره.


<source src="URL" type="video/TYPE" />


سه نوع مختلف ویدئو برای وب داریم.


OGG: مرورگر های پشتیبانی کننده: FF4 به بالا، Chrome 6 به بالا و Opera 10.6 به بالا
WEBM: مرورگر های پشتیبانی کننده: FF4 به بالا، Chrome 6 به بالا و Opera 10.6 به بالا
MP4: مرورگر های پشتیبانی کننده: IE نسخه 9، Chrome 6 به بالا و Safari 5


تا اینجای کار شما باید بخش پخش ویدئوت اینجوری باشه:



<video controls="controls" autoplay="autoplay" height="500px" width="600px" loop="loop" muted="muted" poster="images/poster.jpg">
<source src="URL/NAME.mp4" type="video/mp4" />
<source src="URL/NAME.ogg" type="video/ogg" />
مرورگر شما از تگ ویدئو پشتیبانی نمی کند.
</video>

می بینید که با دادن دو فرمت MP4 و OGG کلیه مرورگر هارو می تونید پشتیبانی کنید.

شما داخل تگ video دوتا تگ می تونی استفاده کنی. یکیش همون source بود و دیگری track. حالا بریم سراغ تگ track. این تگ برای نشان دادن زیرنویس هستش که هم اکنون هیچ مرورگری ازش پشتیبانی نمی کنه. پس نیازی بهش نداریم فعلا.