۱۰ قطعه کد خلاقانه برای طراحی مدیا پلیر

به لطف پیشرفت‌های HTML5 و تکنولوژی‌هایی که ما را قادر می سازند تا حالت‌های چندرسانه‌ای استفاده کنیم، اضافه کردن ویدیو و صدا به محتوای وبسایت‌مان بسیار ساده شده است. در حالی که می شود از مدیا پلیر پیشفرض مرورگر یا یک سیستم منحصر به فرد مانند وردپرس استفاده کرد، اما راه‌هایی نیز وجود دارد که می شود تجربه کاربری بهتری را ارائه نمود. 

پلیر پیشفرض ممکن است حاوی یکسری از فانکشن های ضروری (پخش/ توقف و…) باشد اما برای اینکه بتوانیم آن را با برند‌مان ادغام کنیم و یا اینکه از ویژگی‌های حرفه ای تری استفاده نماییم کافی نیست. به همین دلیل طراحان تصمیم گرفته‌اند تا خلاقیت خود را بالا ببرند و شروع به ساخت یک مدیا پلیر یونیک و منحصر به فرد نمایند. بیایید نگاهی به موارد زیر بیاندازیم و به صورت آزاد و رایگان به سورس‌کدهای آن ها دسترسی داشته باشیم.

پلیر‌های صوتی

۱. Round and Beautiful

این پلیر صوتی کاری از توسعه دهنده Sebastian Beltz است. از نظر ظاهری این مورد بسیار زیبا است و جدای از آن دارای دکمه هایی مانند Favorite و به اشتراک‌گذاری است. در حقیقت باید گفت که این یک رابط کاربری کامل است.

2.Draggable Playlist

فکر کردن به این حالت که می توانید پخش کننده صوتی‌تان را در تمام صفحه درگ کنید، بسیار چیز جالبی است. جالب‌تر از این رابط کاربری ساده و هوشمندی است که Antoinette Janus طراحی نموده و در آن شما می توانید در میان لیست آهنگ‌ها اسکرول نمایید و یک آهنگ را برای پخش کردن انتخاب نمایید. 

۳. Accessibility Built In

در واقع این مورد یک پلیر بسیار ساده است. اما توسعه دهنده آن سعی کرده از یک رابط کاربری فوق‌العاده برای قابلیت دسترسی‌پذیری استفاده نماید. دکمه‌های مبتنی بر متن برای پخش کردن و متوقف کردن صوت این امکان را به هر کاربری می دهد تا بتواند به سادگی با آن کار کند. پیاده سازی حالت transcript -رونوشت یا زیرنویس همراه با صوت- واقعا عالی است.

۴. Material Design Comes to Audio

استفاده Michael Zhigulin از متریال دیزاین در طراحی این پلیر واقعا کاری زیبا و برجسته است. از لایه‌بندی به صورت -کارد- تا انیمیشن‌های موجود همگی با استاندارد‌های گوگل متریال همخوانی دارد.

5. Spinning Some Vinyl

مفهومی که اینجا وجود دارد واقعا جذاب است. از نظر کارکرد درست مانند حالت پیشفرض کار می کند اما از نظر طراحی تفاوت‌هایی دارد که می توان در Embed زیر مشاهده کنید:

پخش کننده‌های ویدیویی

6. Smooth and Responsive

یکی از بخش‌های مسئله رسانه در HTML5 این بوده که دستگاه‌های مختلف به صورت همزمان بتوانند به یک محتوا دسترسی داشته باشند. این مورد که توسط Simon Goellner توسعه داده شده است به صورت واکنشگرا ارائه شده و البته به صورت ساده می توان با استفاده از CSS استایل دهی شود. 

7. Labeled Controls

یکی از زیبایی‌های این ویدیو پلیر HTML5 هاور کردن ماوس روی کنترل بار آن است که تمام موارد به صورت متن نمایش داده می شود. با وجود آنکه موارد آورده شده در این پلیر همان موارد پیش فرض هستند اما استفاده از این حالت متن به کاربر این کمک را می کند که از انجام کارهای‌ش مطمئن شود.

8. Ultimate Accessibility

در قسمت پخش‌ کننده‌های صوتی راجع به کار توسعه دهنده Joe Watkins حرف زدیم اما اینجا باید به یک ویدیو پلیر اشاره کنیم که به همان میزان شایسته ستایش است. در این پلیر گزینه هایی برای ترانسکریپت، کپشن، زبان‌ نشانه که می تواند ویدیو را در یک تب کناری باز کند و توضیحات وجود دارد. تمام مواردی که در این طرح وجود دارد مواردی است که به شما کمک می کند قابلیت دسترسی پذیری را به ویدیو های وبسایت خود بیاورید.

9.YouTube Playlist

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

10. Video That Moves With You

یکی از ویژگی‌هایی که اخیرا مشاهده کرده‌ایم این قابلیت است که ویدیو همراه با اسکرول کاربر جابجا شود و حرکت نماید. Charley Pugmire نمونه بسیار زیبایی از این را ساخته است. در این مورد می توانید یک ویدیو یوتیوب را مشاهده کنید که به صورت تمام صفحه قرار دارد و بعد از اسکرول کردن به سایدبار منتقل می شود.

اهمیت رسانه

تمام موارد و مثال های گفته شده در بالا سعی در آن داشته که بتواند موسیقی را از یک حالت ساده تا یک حالت پیچیده نمایش دهد. اما چیزی که در این مطلب مهم است توانایی ایجاد پلیرهایی است که بیشترین انطباق پذیری را با طراحی و کارایی وبسایت دارند. همچنین موضوع آنکه محتوای پلیر باید برای همه قابلیت دسترسی داشته باشد بسیار مهم است.

راه های بسیاری وجود دارد که از طریق آن ها می شود یک پلیر ساده و قدیمی را انتخاب کرد و را به چیزی منحصر به فرد تبدیل نمود. امیدوارم که این مثال‌‌ها بتواند که منبع الهام شما باشد.

منبع