اموزش ساخت ویدئو پلیر html5 با گرافیک مورد نظر خودمون!

در این آموزش قصد داریم تا طریقه ی طراحی یک html5 video player رو به شما دوستان عزیز اموزش بدیم 😀 بعد از این اموزش میتونید ویدئو پلیر خودتون رو با استایل مورد نظرتون بسازید! همچنین سورس کد مربوط به این اموزش رو میتونید از انتهای همین پست دانلود کنید و پیش نمایش چیزی که در انتها میسازیم رو از اینجا ببینید(کلیک کنید).

همونطور که میدونید مرورگرها مجهز به پخش کننده های فایل های صوتی و تصویری هستند! منظور همون تگ های Video و audio هست که میتونید ادرس فایل خودتون رو بهشون بدید تا بتونید فایل ویدئویی یا صوتی خودتون رو پخش کنید. نحوه ی استفاده از این تگ ها به صورت زیر است:

در دستورات بالا ابتدا یک تگ Audio گذاشتیم و توش ادرس فایل صوتی خودمون رو قرار دادیم و بعدش یه تگ video گذاشتیم و ادرس فایل ویدئویی خودمون رو قرار دادیم! همونطور که میبینید برای قرار دادن ادرس فایل های خودمون از تگ source استفاده کردیم! در زیر تگ source خودمون یه تگ p قرار دادیم تا در صورتی که مرورگر ما قدیمی بود متن داخل تگ p رو نمایش بده و به کاربر یا بازدیدکننده بگه که مرورگرش قدیمیه و باید اون رو اپدیت کنه.

اگه تگ های video و audio رو توی وب سایت خودتون استفاده کنید و بعدش سایت خودتون رو توی مرورگرهای مختلف بررسی کنید خواهید دید که شکل و شمایلی که مرورگر های مختلف ویدئو پلیر یا موزیک پلیر رو به شما نشون میدن متفاوت خواهد بود! همینجاست که ما میایم و مدیاپلیر تحت وب خودمون رو میسازیم 😀

برای طراحی یک مدیا پلیر تحت وب مراحل زیر رو باید انجام بدیم:

مرحله اول : ساخت بدنه ی HTML مدیا پلیر خودمون

مرحله دوم : اظافه کردن مقداری CSS برای خوشکل کردن مدیا پلیر

مرحله سوم : نوشتن دستوراتی js برای دکمه های مدیاپلیر

مرحله چهارم : افزودن دستوراتی برای کنترل بهتر مدیاپلیر تحت شرایط مختلف!

حالا مراحلی که در بالا ذکر کردیم رو انجام میدیم 😀 برو که برییییییییییییم:

ساخت بدنه ی HTML مدیاپلیر :

برای بدنه ی مدیاپلیر خودمون موارد زیر رو در نظر میگیریم:

  1. استیج فیلم : جایی که ویدئو توی اون نمایش داده بشه!
  2. کاور ویدئو : تصویری که قبل از نمایش ویدئو نمایش داده بشه!
  3. دکمه ی پخش (play)
  4. تایم لاین نمایش دهنده ی میزان پیشرفت ویدئو
  5. تایم لاین نمایش دهنده ی میزان اینکه چقدر از ویدئو لود شده!
  6. دکمه ای برای قطع کردن یا وصل کردن صدای ویدئو
  7. دکمه ای برای تمام صفحه کردن ویدئو (fullScreen)
  8. قرار دادن تگ های متنی (مثلا تگ p) برای نمایش زمان کلی ویدئو و زمان کنونی ویدئو

خب امکانات بالا رو برای ویدئو پلیر خودمون در نظر گرفتیم! حالا میایم و اون رو میسازیم 😀 به صورت زیر ساختار HTML خودمون رو طراحی میکنیم:

هشت موردی که ذکر کردیم رو به صورت HTML در بالا پیاده سازی کردیم. چیزی که پیاده سازی کردیم رو میتونید از اینجا (کلیک کنید و ببینید) , شاید به نظرتون برسه که این دیگه چیه؟ چقد مزخرفه! عجله نکنید 😀 تا اخر کار یه چیز خوشکل تحویل خواهید گرفت 🙂

افزودن مقداری CSS برای مدیاپلیر و زیبا سازی اون :

حالا میایم چیزی که در مرحله ی قبل ساختیم رو با CSS بهش استایل میدیم , به صورت زیر:

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

افزودن دستورات JS برای دکمه های مدیاپلیر : (مرحله سوم و چهارم باهم)

حالا دستوراتی رو برای دکمه های مختلف مدیاپلیر قرار میدیم! مثلا اگه روی دکمه ی play کلیک شد فیلم ما شروع به پخش شدن بکنه! اگه دوباره روی دکمه ی play کلیک شد فیلم ما به حالت pause بره! و برای دکمه های دیگه هم همینطور 😀 دستورات زیر رو مینویسیم برای دکمه ها :

خب با نوشتن دستورات بالا مدیاپلیر ما به درستی کار خواهد کرد , پیش نمایش رو میتونید از اینجا ببینید (کلیک کنید) , دستورات بالا باعث میشن که قسمت Timeline یا نوار پیشرفت ویدئو پلیر ما شروع به کار کردن کنه! همچنین میتونید روی اون کلیک کنید تا ویدئو جلوتر بره , سورس کد این ویدئو پلیر رو میتونید از انتهای همین پست دانلود و استفاده کنید. دقت کنید که این ویدئو پلیر رسپانسیو هست و با توجه به سایز والد (parent) تغییر سایز میده 😀

دوستان عزیز من تمامی مطالب و کدهای این اموزش رو خودم چندین ساعت وقت گذاشتم نوشتم و این اموزش نمونه ی خارجی دیگه ای نداره! این اموزش رو با توجه به درخواست بسیاری از دوستان عزیز قرار دادم تا بتونن از برنامه نویسی لذت ببرن و تبادل علم کرده باشیم 😀  امیدوارم که بتونید از این ویدئو پلیر تحت وب (html video player) استفاده کنید. همچنین اگه خواستید میتونید استایل اون رو تغییر بدید یا اینکه اگه به مشکلی خوردید از پایین نظرات همین پست بگید تا بهتون کمک کنم. موفق باشییییییییییییید.

برای دانلود سورس کد ویدئو پلیر html5 روی دکمه ی زیر کلیک کنید(حجم فایل حدودا ۵ مگابایت است)

دانلود ویدئو پلیر html5

به اشتراک بگذارید: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
  1. pezhman

    ممنون از آموزش خوبتون.فقز اینکه اگه بخوایم دکمه share در کنار بقیه دکمه ها استفاده کنیم باید از چه خصوصیت data-button استفاده کرد؟

    • سلام , دکمه ی شیر رو میتونید به راحتی اظافه کنید. دکمه ی share چیز خاصی نداره! یه لینکه و باید از تگ a استفاده کرد! شیر برای کجا میخواید؟ فیس بوک یا گوگل پلاس یا جای دیگه؟

  2. میشه کنار اون دکمه که صفحه رو تمام صفحه میکنه یه لوگو هم قرار بدی؟
    ممنون

    • چه لوگویی؟ دکمه رو با css و html ایجاد کردیم اگه سورس کدشو ببینید خودتون راحت میتونید این کار رو انجام بدید! بازم اگه نتونستید بگید براتون انجام میدیم. موفق باشید.

  3. سلام باید این کدارو کجا بزاریم تا عمل کنه من میخوام تو نوشته های سایت وردپرسیم به کار ببرم

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