آگهی
article

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

web-flv-video-player

همان طور که می دانیم امروزه فیلم ها و کلیپ های ویدئویی جزء جدایی ناپذیر از دنیای وب شده اند و بیش از پیش کاربران و مدیران سایت ها و وبلاگ ها تمایل دارند که از این نوع محتوا در صفحات خود استفاده کنند و کلیپ هایشان را با دیگران به اشتراک بگذارند، متاسفانه به لحاظ فنی برای اکثر افراد انجام این کار به صورت حرفه ای و به راحتی ممکن نیست و بیشتر کاربران ترجیح می دهند از شبکه ها و سرویس های عمومی اشتراک گذاری فیلم و کلیپ استفاده نمایند تا اینکه خود را درگیر پیچیدگی های فنی درج و پخش فیلم و ویدئوهای اختصاصی کنند، هرچند استفاده از سرویس های عمومی راه حل به اصطلاح دم دستی مناسبی است اما همواره ممکن است شرایطی وجود داشته باشد که نخواهیم یا نتوانیم از این سرویس ها استفاده کنیم، از این رو در این مطلب قصد داریم تا حد امکان به ساده ترین شکل ممکن روش های درج و پخش کلیپ های FLV (برگرفته از عبارت Flash Video) و فیلم ها و ویدئوهای اختصاصی را در صفحات وب اعم از سایت، وبلاگ و... آموزش دهیم.

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


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

درج و پخش کلیپ های Flash Video) 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) FLV) و تنظیمات آن


اغلب فایل های تصویری که در اختیارمان قرار دارد یا به صورت خام و فرمت های فشرده نشده هستند و یا با استاندارد پخش دستگاه هایی نظیر تلویزیون خروجی گرفته شده و به همان صورت مناسب استفاده در وب نیستند، به همین دلیل قبل از هر چیز باید ویدئوها و کلیپ های خود را با برنامه هایی نظیر 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 به نحو دلخواه و البته یکسان تغییر دهیم، با این کار از تداخل پلیرهای چندگانه در یک صفحه جلوگیری می شود.
web flv mpw player
سایر پارامترهایی که می توانیم از آنها استفاده کنیم، تصویر پس زمینه پلیر، قابلیت پخش خودکار و تنظیمات مربوط به رنگ (پس زمینه و متن) است:
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 برنامه:
web mp3 mpw player
تنظیمات این کد نیز مانند مثال بالا است، کافی است فایل ها را آپلود و آدرس ها را در کد جایگزین کنیم.

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


لزوم ایجاد استانداردی فراگیر جهت پخش فایل های تصویری در وب سبب شد تا در HTML نسخه 5 تگ video معرفی شود، از این تگ می توانیم برای نمایش فیلم و کلیپ های ویدئویی با فرمت های مناسب وب استفاده کنیم اما قبل از اینکه بتوانیم فایل های تصویری در سایت یا وبلاگ خود درج کنیم باید فرمت ها و قابلیت های آنها را بشناسیم، فرمت هایی که در HTML 5 برای پخش فیلم مورد استفاده قرار می گیرد عبارتند از mp4، ogg و webm، از آنجایی که مرورگرهای مختلف فرمت یا فرمت های خاص خود را پشتیبانی می کنند برای درج کلیپ خود باید آن را به چندین فرمت تبدیل کنیم و همه ی فایل ها را در یک کد در کنار هم قرار دهیم تا اگر مرورگری با یک فرمت سازگار نبود به فرمت بعدی مراجعه و آن را پخش کند، مثال زیر گویا است:
<video width="300" height="220" controls="controls">
   <source src="your-movie.mp4" type="video/mp4" />
   <source src="your-movie.ogg" type="video/ogg" />
   <source src="your-movie.webm" type="video/webm" />
متاسفانه مرورگر شما از این قابلیت پشتیبانی نمی کند
 </video>
توضیح:
- کد بالا یک کلیپ با سه فرمت مختلف را در خود دارد که این کار برای اطمینان از سازگاری با تمام مرورگرهاست.
- کلیپ خود را باید با برنامه هایی نظیر Total Video Converter به فرمت های mp4، ogg و webm تبدیل کنیم.
- پس از تبدیل کلیپ فایل را در سرور شخصی یا سرویس های رایگان آپلود کرده و آدرس لینک مستقیم آن را در قسمت src جایگزین می کنیم (دقت کنیم که آدرس لینک مستقیم باشد، برخی از سرویس های آپلود رایگان تنها با مراجعه به صفحه واسط اجازه دانلود فایل را می دهند، این نوع سرویس ها برای درج و پخش ویدئو مناسب نیستند).
تگ video خاصیت های دیگری مانند poster، buffered، crossorigin و... دارد که در این خصوص در آموزشی جداگانه مفصلا توضیح خواهیم داد، یادآور می شویم که آینده وب به سمت استفاده از امکانات HTML 5 در حرکت است و توصیه می کنیم اگر ضرورت خاصی برای استفاده از فرمت FLV وجود ندارد از تگ video در HTML 5 استفاده کنیم.
sectionدسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
» پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
» نحوه قرار دادن جستجوی گوگل در سایت یا وبلاگ
» چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
» کاربرد متاتگ refresh در صفحات وب (HTML)
» نحوه متحرک ساختن متن با تگ marquee در HTML
commentنظرات (۱۷۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: بساط دهقانی
زمان: ۲۳:۱۶:۳۱ - تاریخ: ۱۳۹۵/۰۴/۲۰
چگونه یک فیلم در سایتی قرار دهیم
پاسخ: 
مطلب در همین خصوص است!
نویسنده: احمد
زمان: ۱۲:۴۴:۳۰ - تاریخ: ۱۳۹۵/۰۴/۲۳
سلام
چطور می شود که Flash Video را طوری غیر فعال کنیم که فقط ظاهر آن در سایت ما نمایش پیدا کند و کاربر با کلیک بر روی آن به صفحۀ دیگری انتقال یابد (به صفحه ای که قصد داریم Flash Video را در آنجا نمایش دهیم).
در واقع Flash Video در صفحۀ اول فقط یک پیشنمایش باشد و کاربر نتواند با کلیک بر روی آن فیلم را تماشا کند.
پاسخ: 
برای این موارد معمولا از یک تصویر جایگزین استفاده می شود، این تصویر می تواند به صفحه مورد نظر به صورت معمول یا با جاوا اسکریپت لینک شود.
نویسنده: علی
زمان: ۱۱:۰۶:۴۳ - تاریخ: ۱۳۹۵/۰۵/۲۳
داخل وبلاگم فایل هایی با پسوند EXE (با استفاده از گوگل درایو و کد HTML آن فایل) قرار دادم ولی فقط در کامپیوتر اجرا میشه و در موبایل و تبلت پشتیبانی نمیشه، لطفا راهنمایی کنید چطوری این فایل رو قرار بدم که اندروید هم پشتیبانی کنه و فایلم اجرا بشه .
پاسخ: 
فایل های با پسوند exe از نوع اجرایی مخصوص ویندوز و چند سیستم عامل دیگر است، لذا در همه پلتفرم ها اجرا نمی شود! سیستم عامل ها پسوندهای مجاز خود را دارند به طور مثال برای اندروید باید فایلتان به صورت apk باشد!
نویسنده: ا
زمان: ۱۹:۱۴:۳۹ - تاریخ: ۱۳۹۶/۱۲/۰۲
سلام میخواستم فایل صوتی با استفاده از پلیر شما پخش کنم ولی کاربرا نتونن دانلود کنن. لطفا راهنمایی کنید..
پاسخ: 
متاسفانه این پلیر چنین قابلیتی ندارد، در کل در حال حاضر اگر محتوایی در وب به صورت عمومی پخش شود امکان دانلود آن نیز به نحوی وجود خواهد داشت!
نویسنده: احسان
زمان: ۱۰:۲۸:۰۹ - تاریخ: ۱۳۹۶/۱۲/۰۳
سلام ما یک وبسایت آموزشی داریم با استفاده از پلیر شما مشکل در اجرا نداریم .
چطور جلوی دانلود رو بگیریم که کاربر فقط از طریق وبسایت انلاین ببینه و فیلم اموزشی ما دانلود نشه
پاسخ: 
تا آنجا که اطلاع داریم قابلیتی تحت عنوان Encrypted Media Extensions توسط W3C معرفی شده که می توانید با آن فایل های صوتی و تصویری را رمزی کنید، برای کسب اطلاعات بیشتر لطفا به این دو منبع مراجعه نمائید:
https://w3c.github.io/encrypted-media/

https://www.html5rocks.com/en/tutorials/eme/basics/
نکته: با وجود این روش ها نیز نمی توان به صورت قطعی از امکان عدم دانلود محتوا مطمئن بود، برای حفظ حقوق مولف اثر باید مجموعه ای از روش ها از جمله درج لوگو و... را استفاده کنید.
نویسنده: احسان
زمان: ۲۱:۴۸:۳۴ - تاریخ: ۱۳۹۶/۱۲/۰۳
سپاس از راهنماییتون
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




5 × 3
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form مجید بیگلوئی
در:
با سلام میخوام فایل پیوست بسازم برای اسکریپت وبلاگ از کد زیر استفاده میکنم تا فایل را آپلود و اطلاعات را به دیتابیس ارسال...
۱۰:۰۲:۵۸ ۱۳۹۸/۱۲/۰۶

form پیمان نقی پور
در:
سلام میخواستم بدونم فیلتر نویسی بورس هم با همین زبان جاوا انجام میشه؟ چطور میشه شرطی تعیین کرد تا نتیجه فیلتر در هنگام...
۱۸:۲۱:۳۲ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، css رو تسلط کامل دارم تا حدودیش هم به لطف شما و جاوا اسکریپت هم چند روزی میشه شروع کردم به آموزش...
۱۵:۴۸:۳۳ ۱۳۹۸/۱۲/۰۵

form amin
در:
با سلام آدرس مطالب سایت وبگو بعد از ای دی پست عنوان فارسی هست ولی زمانی که به سورس کد پست نگاه میکنیم قسمت فارسی...
۱۴:۵۹:۴۴ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، لینک آموزش مقدماتی جاوا اسکریپت توی منوی بالایی خرابه ، به وظیفه شهروندیم عمل کردم :)
۱۵:۰۹:۰۰ ۱۳۹۸/۱۲/۰۴

form aseman
در:
با سلام . میخوام هر وقت توی تکس باکسم عدد 1 وارد شد در خروجی تگ p معادل حروفی یک رو بهم بده. مثلا:...
۱۴:۴۵:۲۹ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد ، گذاشتمش توی این وبلاگ رمزش هم ******* هستش ، واقعیت فهمیدم که میشه درستش کرد ولی چجوریشو نفهمیدم :) خیلی ممنون...
۱۳:۲۰:۱۴ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد، وبلاگ ندارم، اینا رو برای یادگیری و یه هدف دیگه دارم سوال میکنم، مطالب مرتبط رو پیدا کردم راهشو، فقط قسمت ارسال نظر...
۲۰:۱۵:۰۲ ۱۳۹۸/۱۲/۰۳

form نیما
در:
سلام. من میخوام با استفاده از یک input مقدار عددی رو از کاربر دریافت کنم و بعد از ضرب در عددی خاص که خودم تعیین...
۱۸:۰۷:۰۴ ۱۳۹۸/۱۲/۰۳

form وحید
در:
سلام وقت بخیر حدود شش ماه هست با فیلتر شکن کار میکنم به اسم Lightvpn. یک روز هست این خطا رو میده و...
۱۸:۰۰:۰۶ ۱۳۹۸/۱۲/۰۳

form mahdi
در:
سلام ، استاد شرمنده یه سوال دیگه هم داشتم مثل قبلی ، مطالب مرتبط که انتهای هر پست میاد رو چطوری با جاوا اسکریپت توی...
۲۳:۴۶:۲۳ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد عزیز ، توی لوکس بلاگ میشه چیزی مثل پست های شاخص که توی وردپرس هست با جاوا اسکریپت درست کنیم که مثلا داخل...
۲۳:۱۴:۴۰ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد ، بخش نظرات قالب لوکس بلاگ یعنی طرح کل صفحش رو چطوری دسترسی داشته باشیم که خودمون بتونیم طراحیش کنیم ؟ منظورم اینه...
۱۸:۱۱:۳۳ ۱۳۹۸/۱۲/۰۱

form علیرضا سهیلی
در:
سلام من وقتی میخوام شارژ بزنم این کد واسم میاد معنیش یعنی چی
۱۴:۳۳:۱۴ ۱۳۹۸/۱۲/۰۱

form mahdi
در:
سلام استاد ، فهمیدم چطوریه نیازی به پاسخ نیست، چقدرم ساده بود :) مرسی
۰۹:۴۸:۴۹ ۱۳۹۸/۱۱/۳۰
آگهی