نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
همان طور که می دانیم امروزه فیلم ها و کلیپ های ویدئویی جزء جدایی ناپذیر از دنیای وب شده اند و بیش از پیش کاربران و مدیران سایت ها و وبلاگ ها تمایل دارند که از این نوع محتوا در صفحات خود استفاده کنند و کلیپ هایشان را با دیگران به اشتراک بگذارند، متاسفانه به لحاظ فنی درج فایل های تصویری برای اکثر افراد به صورت حرفه ای و به راحتی ممکن نیست و بیشتر کاربران ترجیح می دهند از شبکه ها و سرویس های عمومی اشتراک گذاری فیلم و کلیپ استفاده نمایند تا اینکه خود را درگیر پیچیدگی های فنی درج و نمایش فیلم و ویدئوهای اختصاصی کنند، هرچند استفاده از سرویس های عمومی راه حل به اصطلاح دم دستی مناسبی است اما همواره ممکن است شرایطی وجود داشته باشد که نخواهیم یا نتوانیم از این سرویس ها استفاده کنیم، از این رو در این مطلب قصد داریم تا حد امکان به ساده ترین شکل ممکن نحوه درج و پخش فیلم و کلیپ های ویدئویی در فرمت های مختلف (mp4، ogg، webm و flv) را در صفحات وب اعم از سایت، وبلاگ و... آموزش دهیم.
پخش ویدئو در وب چه مسیری را طی کرده و به چه سمتی در حرکت است؟
اگر به تاریخچه پخش ویدئو در وب نگاه کنیم پیش از فراگیر شدن فرمت 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 استفاده کنیم.
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
نحوه درج علامت های خاص در HTML
کاربرد متاتگ refresh در صفحات وب (HTML)
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
باتشکر از دوست عزیز
این کد گذاری برای نمایش آنلاین کار کن نیستش. لطفا نحوه گذاشتن فیلم و پخش آنلاینش رو با کد شروع اول embed رو بگذارید .
یه خواهش دارم برای بهتر متوجه شدن و بهتر یاد گرفتن کسایی مثل من اون محل های که باید آدرس لینک مستقیم گذاشته بشه رو هم بگید . من از آپارات فیلم گذاشتم و شروع کدشم با این بود embed و الان به صورت آنلاین نشون میده تو وبم ولی یه مشکلی که داره ، تبلیغه آپارات هم گوشه فیلم نشون میده اگر بگذارید که سایتتون فوق فوق فوق فوق عالی میشه در ضمن از نحوه گذاشتن گذاشتن تصویری لینک دانلود هم ممنونم و من یه کد که نمایش بده به چه شکل میگم برای شما گذاشتم و امیدوارم منظورمو بفهمید.
<embed src="http://netnama.com/player/cbplayer/player.swf?config=http%3A%2F%2Fnetnama.com%2Fplayer%2Fcbplayer%2Fembed_player.php%3Fvid%3D1191%26autoplay%3Dyes" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="300" height="250"></embed>
http://example.com
به جای آدرس های پیش فرض قرار دهید. شما باید بسته نرم افزار را که در مطلب قرار داده ایم دانلود و در سروری آن را آپلود کنید، سپس تنظیمات مربوط را انجام دهید، صرف قرار دادن کدها کافی نیست.
http://www.longtailvideo.com/players/jw-flv-player
من یک وبلاگ دارم چجوری میتونم این کد هارو قرار بدم
عکس زیر رو نگاه کن این کد ها رو میگم
لینک عکس:
http://www.pic1.iran-forum.ir/images/up8/83282731404009115424.bmp
آدرس وبلاگم: www.cs-gta.rozblog.com
نکته: برخی سرویس های آپلود اجازه ایجاد لینک مستقیم به فایل ها (مخصوصا فایل های فلش) را نمی دهند و باید برای دانلود آن فایل به صفحه آنها رجوع شود، این گونه سایت ها مناسب این کار نیستند.
آموزش هایی که دادید برای گذاشتن فیلم در قالب وبلاگ بود اما چطوری در پست وبلاگم فیلم بگذارم سرویسم هم لوکس بلاگ هست
با هزاران بار تشکر
یعنی هیچ امکانی وجود ندارد این کار را (گذاشتن فیلم در پست وبلاگ) انجام داد
متشکر خیلی خوب یود .
مثل همیشه عالی.
سوالات:
1- چطوری می تونم تعیین کنم که اگه مرورگری از تگ ویدئو پشتیبانی می کنه پلیر تگ ویدئو نشون داده بشه و دیگه پلیر پلاگین نشون داده نشه و همچنین اگه مرورگر از تگ ویدئو پشتیبانی نمی کنه دیگه خطای عدم پشتیبانی از تگ ویدئو نشون داده نشه و به جایش پلیر پلاگین نشون داده بشه؟
2- چرا وقتی فیلم رو با پلیر پلاگین پخش می کنم برنامه ی مربوط به دانلود مثل IDM باز میشه و می خواد که دانلود رو انجام بده در صورتی که می خوام این طور نباشه؟
از جوابتون ممنونم.
<script type="text/javascript">
function checkVideo(){
var canPlay = false;
var v = document.createElement('video');
if(v.canPlayType && v.canPlayType('video/mp4').replace(/no/, '')) {
canPlay = true;
}
else if(v.canPlayType && v.canPlayType('video/ogg').replace(/no/, '')) {
canPlay = true;
}
else if(v.canPlayType && v.canPlayType('video/webm').replace(/no/, '')) {
canPlay = true;
}
if (canPlay == true){
document.write('این مرورگر از تگ های ویدئو پشتیبانی <font color=\'green\'><b>می کند</b></font>');
}
else{
document.write('این مرورگر از تگ های ویدئو پشتیبانی <font color=\'red\'><b>نمی کند</b></font>');
}
}
</script>
که کافی است تابع را به فرض به صورت زیر فراخوانی کنید:<body onload="checkVideo();">
اگر تگ های HTML5 پشتیبانی شوند در خروجی کدهای ویدئو را قرار دهید و در غیر این صورت کدهای پلیر را به خروجی بدهید، البته بهتر است فعلا از همان پلاگین استفاده کنید تا هنگامی که HTML5 به یک استاندارد فراگیر تبدیل شود.در مورد سوال دوم، این موضوع به تنظیمات IDM مربوط می شود، در قسمت Downloads => Options => File types فرمتی که نمی خواهید به صورت خودکار دانلود شود را حذف کنید.
https://addons.mozilla.org/de/firefox/addon/easy-youtube-video-downl-10137/
مجددا دانلود نمائید، این سایت ها به صور ت خودکار، معمولا حجم کلیپ را کاهش می دهند.خیلی ممنون از سایت خوبتون.
فقط یه سوال اون دو تا کدو که معرفی کردین تو اولی آدرس فایل و قرار میدیم و تو دومیش درباره تنظیماتشه ....
اونا رو پشت سر هم تو قسمت ویرایش قرار بدیم...
شرمنده اگه سوالم ابتدایی هستش..
فایل swfobject.js را در یک سرویس آپلود و آدرس لینک مستقیم آن را جایگزین نمائید، سپس در قسمت دوم فایل های mpw_player.swf و فیلم خود را آپلود کرده و آدرس ها را جایگزین کنید (فیلم را باید در قسمت movie.flv جایگزین کنید).
دقت کنید که آدرس ها، به صورت لینک مستقیم باشند.
شرمنده من سنم کمه واسه همین زیاد اشنایی ندارم
من که میخوام یه فایل ویدیویی رو تو یکی از پستای وبم بزارم
1- بایدفایل و آپلود کنم بعد example.com تو این قسمت بزارم
2-بعد دو تا کدو پشت سر هم تو قسمت ویرایش بزارم؟
این طوری کردم ولی نشد ....
میخوام تو یکی از پستام بزارم
داداش ممنون میشم اگه ساده توضیح بدی...
ممنون
قسمت های دیگه رو خوندم یه چی حالیم شد...
عالی بود...
تونستم یه ویدیو بزارم...
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.