html5-video-player

آموزش ساخت ویدئو پلیر HTML5 , در دو سوت!

سلامی دوباره به همه دوستان گرامی , توی بخش نظرات یکی از دوستان پرسیده بود که چجوری میشه یه video player (پخش کننده ویدئو)  یا audio player (پخش کننده صدا) درون صفحات وب ساخت , منم این پست رو برای دوستانی که علاقمند به شخصی سازی پخش کننده ویدئو و یا صوت در صفحات وب هستند میزارم.

در این پست ما قصد داریم تا با استفاده از HTML5 یک پخش کننده فایل ویدئویی با توجه به سلیقه خودمون بسازیم. پیش نمایش این پخش کننده ویدئو رو میتونید از اینجا مشاهده کنید (کلیک کنید) , همچنین سورس کد و فایل های مربوطه رو میتونید از انتهای این پست دانلود کنید و استفاده کنید.

ما چرا مجبور میشیم که پخش کننده پیش فرض مرورگر خودمون رو تغییر بدیم؟ همونطور که میدونید مرورگر های مختلفی از جمله فایرفاکس (FireFox) , کروم (Chrome) , سافاری (Safari) , اپرا (Opera) , اینترنت اکسپلورر (IE) و … وجود دارند. هنگامی که شما میخواید یک فایل تصویری یا صوتی رو پخش کنید هر کدوم از این مرورگر ها استایل منحصر به فرد خودشون رو برای پخش کننده شما در نظر می گیرند.

حالا اگه ما بخوایم که پخش کننده فایلهای صوتی و تصویری ما در همه مرورگر ها به صورت یکسان نمایش داده شود (یعنی استایل دکمه ها و … در همه مرورگر ها یکسان باشد) نیاز داریم که خودمون دست به کار بشیم و یه پخش کننده منحصر به فرد برای خودمون بسازیم 😀 برای ساختن یک ویدئو پلیر با ما همراه باشید.

خب ما ویدئو پلیر خودمون رو در چند مرحله میسازیم , برو که بریم:

مرحله اول: ساختن بدنه ی video player با استفاده از HTML :

مرحله دوم: استفاده از جاوا اسکریپت برای غیر فعال کردن دکمه های کنترلی پیش فرض ویدئو پلیر:

مرحله سوم: ساختن دکمه های کنترلی مورد نظر خودمون با استفاده از  HTML :

مرحله چهارم: اتصال دکمه های کنترلی به ویدئو پلیر با استفاده از جاوا اسکریپت:

مرحله پنجم: (آخرین مرحله) : نوشتن کمی CSS برای خوشکل شدن ویدئو پلیر :

خب کار تموم شد. میتونید پیش نمایش رو از اینجا ببینید. همچنین فایل این ویدئو پلیر رو میتونید از انتهای این پست دانلود کنید و استفاده کنید.

من زیاد حوصله نداشتم که روی خوشکل سازی این Video پلیر کار کنم. اگه شما تونستید خوشکل تر بسازیدش , برای منم بفرستید تا در اختیار دوستان عزیز قرار بدم تا همه استفاده کنیم 😀 موفق باشیییییییید.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
سورس کد ساختن ویدئو پلیر دلخواه
سورس کد ساختن ویدئو پلیر دلخواه
html5-Video-player.zip
Version: 1.0
1.6 MiB
62 Downloads
اطلاعات بیشتر
  1. پیمان

    استاد دمت گرررررررررررررررررررررررررررررررم یه دونه ایی
    واقعا هر جا که بتونم تبلیغ وب سایت و عملکردتونو مینکم
    عالی بود

    • خواهش میکنم. در صورت هرگونه سوال یا ابهام میتونید از بخش نظرات مطرح کنید. موفق باشید

  2. درود عزیز..چجوری این ویدیو پلیر رو به وردپرس فراخوانی و توی قالب نشون بدم؟
    ممنون میشم جواب بدید…

    • سلام . در صورتی که بخواید از این ویدئو پلیر استفاده کنید دو راه پیش رو خواهید داشت :
      راه اول: ایجاد پلاگین
      راه دوم: ایجاد شورت کات
      راه دوم ساده تر خواهد بود. میتونید یه تابع شورت کات تعریف کنید که یک پارامتر (ادرس ویدئو) رو بپذیره و بعد از گرفتن ادرس ویدئو بیاد اون رو توی صفحه echo کنه.
      همچنین میتونید از این افزونه استفاده کنید
      امیدوارم متوجه شده باشید. موفق باشید.

  3. درود…راه دوم گفتی باید یه کد شورت کات توی فایل فانکیشن و همراه سورس ویدیو پلیر تعریف کنم و با لینک مستقیم دانلود ویدیو ساپورت کنه و انلاین نمایش بدهد مثل نمایش انلاین ویدیو ها در مرورگر با لینک دانلود ویدیو…
    بالاخره فهمیدم…

  4. سهیل

    سلام این ویدئو پلیر خوبه ولی نمیشه که سبک طراحیش مثه موزیک پلیری که گذاشتین باشه؟ تنکیو

    • سلام دوست گرامی. به زودی یه ویدئو پلیر خواهم ساخت و برای شما دوست گرامی ایمیل میکنم. ویدئو پلیرهایی که تحت وب وجود دارند متاسفانه یا فلش هستند یا اینکه قابلیت هایی که میخواهید رو ندارند مثلا video.js هست که من باهاش کار کردم و خوب نبود!

می‌خواهید دیدگاهتان را بیان کنید؟