افزونه مدیا پلیر ساده و مدرن HTML5

در پست امروز، با معرفی یک مدیا پلیر ساده و جذاب HTML5 (با پشتیبانی از YouTube و Vimeo) در خدمت دوستان عزیز هستیم. در این مدیا پلیر که با نام Plyr شناخته می شود؛ سادگی، سبکی، قابلیت دسترسی و امکان سفارشی سازی به همراه پشتیبانی از مرورگرهای مدرن در صدر ویژگی های کاربردی آن قرار دارند و بعد می توان به پشتیبانی از رسپانسیو، i18n، عدم نیاز به کتابخانه جی کوئری و… اشاره کرد.

یک مثال از نحوه استفاده

این پلاگین چند روش استفاده در پروژه رو داره که Bower و npm نمونه ای از اونها هستند. اما برای سادگی و عمومیت بیشتر در آموزش از توضیح اونها صرف نظر کردم و فایل های مورد نیاز رو در پیوست این نوشته قرار دادم… مشابه اکثر آموزش های اسکریپتی، در اولین قدم، باید کتابخانه های مورد نیازمون رو در صفحه فراخوانی کنیم که شامل دو فایل CSS و JS هستند. برای این کار هم میتونید مستقیما فایل ها رو از هاست خودتون بارگذاری کنید و یا از CDN خود پلاگین استفاده کنید. به عنوان مثال:

<link rel="stylesheet" href="https://cdn.plyr.io/1.6.16/plyr.css">
<script src="https://cdn.plyr.io/1.6.16/plyr.js"></script>

در مرحله بعد، با توجه به نوع مدیا مورد استفاده (صوت یا تصویر)، تگ های HTML لازم رو در صفحه فراخوانی میکنیم. برای مثال، اگر مایل به پخش یک فایل صوتی در صفحتون هستید، میتونید از ساختار HTML زیر استفاده کنید:

<div class="plyr">
	<audio controls>
		<!-- Audio files -->
		<source src="https://alimir.ir/wp-content/uploads/Someone-Like-You.mp3" type="audio/mp3">
		<!-- Fallback for browsers that don't support the <audio> element -->
		<a href="https://alimir.ir/wp-content/uploads/Someone-Like-You.mp3">Download</a>
	</audio>
</div>

و در آخرین مرحله کار، نوبت به فعال سازی پلاگین در صفحه میرسه که اون رو هم با یک تکه دستور ساده جاوا اسکریپت انجام میدیم:

<script>plyr.setup();</script>

توضیحات بالا، تنها یک مثال ساده از نحوه فعال سازی سریع این پلاگین بود. اما بسیاری از توضیحات و مستندات فنی سفارشی سازی پلاگین، در این نوشته گفته نشد! اما نگران نباشید، این پلاگین در صفحه Github خودش تمامی مستندات مورد نیاز رو به طور کامل شرح داده و میتونید از این لینک به صفحه مورد نظر دسترسی پیدا کنید.