نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ

پخش ویدئو در وب چه مسیری را طی کرده و به چه سمتی در حرکت است؟

اگر به تاریخچه پخش ویدئو در وب نگاه کنیم پیش از فراگیر شدن فرمت FLV یا همان Flash Video به عنوان فرمتی استاندارد برای پخش ویدئوها در وب، کاربران ناچار بودند از ویندوز مدیا پلیر (Windows Media Player) یا برنامه کیوک تایم (Quick Time) و فرمت های پشتیبانی شده توسط آنها استفاده کنند که هر کدام مشکلاتی را برای بازدیدکنندگان صفحات وب به وجود می آورد، از جمله اینکه فرمت خروجی این برنامه ها حجم زیاد، کیفیت کم و قابلیت سازگاری محدودتری با مرورگرهای مختلف داشت و عموما در یک یا چند مرورگر و آن هم با نصب پلاگین های خاص امکان پخش بی دردسر فایل های ویدئویی فراهم می شد، اینچنین بود که به مرور FLV جای خود را بین کاربران باز کرد و سایت های زیادی از آن به عنوان فرمت استاندارد استفاده نمودند، هرچند امکان نمایش FLV در اغلب مرورگرها وجود داشت اما این فرمت برای پخش نیاز به پلیری با قابلیت پشتبانی از فلش ویدئو داشت و همچنان مشکل درج و پخش مستقیم ویدئو در صفحات وب حل نشده باقی مانده بود یعنی برای پخش کلیپ های FLV نیز ناچار بودیم از پلاگین ها و پلیرهای جانبی استفاده نمائیم با این تفاوت که کمی کار ساده تر و سازگاری بیشتر شده بود، به همین دلیل با معرفی HTML نسخه 5 این مسائل تا حدود زیادی حل شد و مرورگرها اغلب از پلیرهای درونی خود بدون نیاز به نصب ابزار یا پلاگین خاص دیگری برای پخش فایل های صوتی و تصویری بهره می بردند و HTML 5 در حال حاضر شیوه استاندارد نمایش نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ است، با این وجود ممکن است در شرایطی نخواهیم یا نتوانیم از این قابلیت استفاده کنیم (به فرض امکان مهاجرت به HTML نسخه 5 موقتا مخصوصا برای سایت های قدیمی وجود نداشته باشد) به همین دلیل در این آموزش سعی می کنیم هر دو روش پخش فیلم با کدهای HTML 5 (تگ video) و پخش کلیپ های Flash Video) FLV) با پلاگین MPW Player را بیان کنیم.
یادآور می شویم که در حال حاضر آینده وب به سمت استفاده از قابلیت های HTML 5 در حرکت است و روش استفاده از فرمت FLV صرفا جهت آشنایی بیشتر و موارد ضروری توضیح داده می شود.

درج و پخش فیلم با کدهای HTML5 و تگ video

لزوم ایجاد استانداردی فراگیر جهت پخش فایل های تصویری در وب سبب شد تا در HTML نسخه 5 تگ video معرفی شود، از این تگ می توانیم برای نمایش فیلم و کلیپ های ویدئویی با فرمت های مناسب وب استفاده کنیم اما قبل از اینکه بتوانیم فایل های تصویری در سایت یا وبلاگ خود درج کنیم باید فرمت ها و قابلیت های آنها را بشناسیم، فرمت هایی که در HTML 5 برای پخش فیلم مورد استفاده قرار می گیرد عبارتند از mp4، ogg و webm، از آنجایی که مرورگرهای مختلف فرمت یا فرمت های خاص خود را پشتیبانی می کنند برای درج کلیپ خود باید آن را به چندین فرمت تبدیل کنیم و همه ی فایل ها را در یک کد در کنار هم قرار دهیم تا اگر مرورگری با یک فرمت سازگار نبود به فرمت بعدی مراجعه و آن را پخش کند، مثال زیر گویا است:

<video width="300" height="220" controls="controls">
<source src="http://example.com/upload/video/your-movie.mp4" type="video/mp4" />
<source src="http://example.com/upload/video/your-movie.ogg" type="video/ogg" />
<source src="http://example.com/upload/video/your-movie.webm" type="video/webm" />
متاسفانه مرورگر شما از اين قابليت پشتيباني نمي کند
</video>

توضیح:
- کد بالا یک کلیپ با سه فرمت مختلف را در خود دارد که این کار برای اطمینان از سازگاری با تمام مرورگرهاست.
- کلیپ خود را باید با برنامه هایی نظیر Total Video Converter به فرمت های mp4، ogg و webm تبدیل کنیم.
- پس از تبدیل کلیپ فایل را در سرور شخصی یا سرویس های رایگان آپلود کرده و آدرس لینک مستقیم آن را در قسمت src جایگزین می کنیم (دقت کنیم که آدرس لینک مستقیم باشد یعنی به محض درج آن در نوار آدرس مرورگر، فیلم شروع به پخش یا دانلود خودکار شود، برخی از سرویس های آپلود رایگان تنها با مراجعه به صفحه آنها اجازه دانلود فایل را می دهند که این نوع سرویس ها برای درج و پخش ویدئو مناسب نیستند).
- در نهایت کد آماده شده را در قسمت ویرایش قالب (سایت یا وبلاگ) یا در قسمت ارسال مطلب (در حالت نمایش به صورت سورس HTML) درج می کنیم، ممکن است برخی ارائه دهنده گان خدمات وبلاگ نویسی از قابلیت درج مستقیم و پخش کلیپ در مطالب پشتیبانی نکنند که با توجه به نیاز فراگیر کاربران این کار خیلی جالب و منطقی نیست!
تگ video خاصیت های دیگری مانند poster، buffered، crossorigin و... دارد که در این خصوص باید در آموزشی جداگانه توضیح داد.

درج و پخش کلیپ های FLV با پلاگین MPW Player

همانطور که گفتیم آینده وب به سمت استفاده از امکانات HTML 5 در حرکت است و کمتر نیاز به استفاده از کدها و فایل های جانبی خواهیم داشت، با این حال اطلاع از روش های جایگزین نمی تواند خالی از لطف باشد ضمن اینکه هنوز هم بخشی از کاربران از مرورگرهایی استفاده می کنند که از تگ های HTML 5 به درستی پشتیبانی نمی کنند، لذا استفاده از پلیرهای رایگان می تواند در شرایط فعلی یکی از گزینه های جایگزین ما باشد، به هر صورت بدین منظور تا به امروز در بستر وب برنامه های رایگان و خوبی ارائه شده که از جمله بهترین آنها می توان Flow Player و JW Player را نام برد، اما این برنامه ها با وجود توانایی هایشان یک ایراد اساسی دارند و آن هم حجم زیادی است که برای بارگذاری فایل های خود از منابع سرور اشغال می کنند، قاعدتا حجم زیاد فایل ها باعث به زحمت افتادن کاربران و استفاده بیش از حد از ظرفیت منابع سرور می شود لذا بهینه این است که به فکر جایگزینی برای این برنامه ها باشیم، تا آنجا که بررسی کرده ایم برنامه ای به نام MPW Player از خیلی جهات مناسب است، این برنامه علی رغم حجم کم، توانایی پخش ویدئوهای FLV و همچنین فرمت MP3 را دارد، از جمله دیگر ویژگی های مثبت آن می توان به قابلیت سفارشی سازی، نمایش پیام در حال بارگذاری، امکان نمایش ویدئو به صورت Full Screen، دارا بودن تایم لاین و کنترل بر روی کلیپ و همچنین کنترل های مربوط به صدا را نام برد که در لینک زیر نسخه ای از آن را جهت دریافت قرار داده ایم.
دانلود برنامه پخش ویدئوهای MPW Player) FLV) - حجم: کمتر از 50 کیلوبایت
توضیح:
- بسته بالا حاوی چند فایل با نام های mpw_player.swf (فایل اصلی پلیر)، index.html (جهت نمونه و مثال)، mpw_player.fla (سورس فایل فلش با فرمت fla برای اعمال تنظیمات سفارشی) و یک فایل جاوا اسکریپتی با نام swfobject.js در مجموع با حجمی کمتر از 50 کیلوبایت است.
- فایل index.html نیاز به دو فایل با نام های video.flv و audio.mp3 دارد که برای کم حجم تر شدن و راحتی دانلود، آنها را حذف کرده ایم، برای تست و دیدن نحوه اجرای برنامه این دو فایل را به صورت دلخواه ایجاد و با نام های عنوان شده در کنار فایل ایندکس قرار می دهیم (برای فایل video.flv یک کلیپ ویدئویی با همین نام و فرمت تهیه کرده و برای audio.mp3 نیز یک صوت با همین نام و فرمت در کنار فایل index.html قرار می دهیم، در این صورت می توانیم با اجرای صفحه وب در مرورگر پلیر را تست کنیم).

نحوه استفاده از برنامه MPW Player و تنظیمات آن

اغلب فایل های تصویری که در اختیارمان قرار دارد یا به صورت خام و فرمت های فشرده نشده هستند و یا با استاندارد پخش دستگاه هایی نظیر تلویزیون خروجی گرفته شده و به همان صورت مناسب استفاده در وب نیستند، به همین دلیل قبل از هر چیز باید ویدئوها و کلیپ های خود را با برنامه هایی نظیر Total Video Converter یا Riva FLV Encoder به فرمت FLV تبدیل کنیم، پس از تبدیل فرمت فایل های اصلی پلیر را به همراه کلیپ FLV خود در سرور یا یک سایت آپلود رایگان قرار داده و لینک مستقیم آن را در کدهای زیر جایگزین می کنیم (منظور از لینک مستقیم آدرسی است که با درج آن در مرورگر فایل بی واسطه دریافت و به طور مثال به صفحه دانلود ارجاع داده نشود).
پس از آپلود فایل های پلیر، ابتدا فایل جاوا اسکریپت آن را در کدنویسی HTML صفحه ایمپورت می کنیم، به طور مثال:

<script src="http://example.com/includes/swfobject.js" type="text/javascript"></script>

اکنون کد زیر را مطابق با فایل های خود تنظیم می نمائیم:

<div id="flvplayer"></div>  
<script type="text/javascript">
var so = new SWFObject("http://example.com/mpw_player.swf", "swfplayer", "400", "327", "9", "#000000");
so.addVariable("flv", "http://example.com/movie.flv");   
so.addParam("allowFullScreen","true");
so.write("flvplayer");
</script>

توضیح:
- آدرس فایل های آپلود شده خود را در قسمت  http://example.com به جای آدرس های پیش فرض قرار می دهیم.
- اعداد 400 و 327 در کد بالا برای تنظیم ارتفاع و عرض پلیر و کد هگز 000000 برای تنظیم رنگ پس زمینه پلیر است.
- پارامتر allowFullScreen در کد اگر مقدار آن true باشد یعنی کاربر می تواند کلیپ را به صورت تمام صفحه (FullScreen) ببیند و اگر مقدارش برابر false باشد، این امکان را ندارد.
- تگ پایانی کد یا so.write در بلاکی که آی دی آن به عنوان مقدار تنظیم شده است، خروجی ما را نشان خواهد داد (در اینجا بلاک div با آی دی پیش فرض flvplayer تنظیم شده است).
- برای استفاده چند باره از پلیر، در هر کد آی دی بلاک را باید در دو قسمت div و so.write به نحو دلخواه و البته یکسان تغییر دهیم، با این کار از تداخل پلیرهای چندگانه در یک صفحه جلوگیری می شود.

سایر پارامترهایی که می توانیم از آنها استفاده کنیم، تصویر پس زمینه پلیر، قابلیت پخش خودکار و تنظیمات مربوط به رنگ (پس زمینه و متن) است:

so.addVariable("jpg","image.jpg");
so.addVariable("autoplay","true");
so.addVariable("backcolor","000000");
so.addVariable("frontcolor","ffffff");

استفاده از MPW Player برای پخش فایل صوتی

علاوه بر قدرت برنامه MPW Player در پخش ویدئوهای FLV، به راحتی می توانیم از آن به عنوان پلیر پخش فایل های صوتی با فرمت mp3 در سایت یا وبلاگ خود استفاده کنیم، بدین منظور کافی است نمونه کد را مطابق الگوی زیر تنظیم نمائیم:

<div id="mp3player"></div>
<script type="text/javascript">
var so = new SWFObject("http://example.com/mpw_player.swf", "swfplayer", "400", "27", "9", "#FFFFFF");
so.addVariable("mp3", "http://example.com/audio.mp3");
//so.addVariable("autoplay","true");
so.addVariable("effect","false");
so.addVariable("backcolor","FFFFFF");
so.addVariable("frontcolor","1864AF");
so.addVariable("fullscreen","false");
so.addParam("allowFullScreen","true");
so.write("mp3player");
</script>

پیش نمایش حالت mp3 Player برنامه:

تنظیمات این کد نیز مانند مثال بالا است، کافی است فایل ها را آپلود و آدرس ها را در کد جایگزین کنیم.
یادآور می شویم که آینده وب به سمت استفاده از امکانات HTML 5 در حرکت است و توصیه می کنیم اگر ضرورت خاصی برای استفاده از فرمت FLV وجود ندارد از تگ video در HTML 5 استفاده کنیم.