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

اسکریپت پخش کننده 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="http://alimir.ir/wp-content/uploads/Someone-Like-You.mp3" type="audio/mp3">
		<!-- Fallback for browsers that don't support the <audio> element -->
		<a href="http://alimir.ir/wp-content/uploads/Someone-Like-You.mp3">Download</a>
	</audio>
</div>

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

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

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

دیدگاه کاربران در مورد این نوشته

  1. عالی مثل همیشه

    توسط iman پاسخ

  2. عجب افزونه جالبی
    تشکر استاد

    توسط استوانیا پاسخ

  3. سلام یه سوال داشتم استاد تو سایتتون وقتی گزینه پاسخ به نظرو میزنی صفحه دوباره لود نمیشه و فرم زیرش میاد ولی برای من صفحه دوباره لود میشه یه #respond اخر url میاد چیکار باید کنم مثل سایت شما صفحه دوباره لود نشه

    توسط علی پاسخ

    1. سلام علی جان.
      باید اسکریپت comment-reply.min.js رو در صفحه فراخوانی کنی که با تابع زیر انجام میشه.
      if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
      * نکته: کلاس ها و ID فرم نظرات هم باید با استاندارد وردپرس هماهنگ باشد.

      توسط علی میرزائی پاسخ

      1. جالب بود

        توسط علی پاسخ

      2. سلام علی جان ممنون میشم یه آموزشی برای استفاده از کتابخونه comment-reply.min.js بذاری، تو نت چیز خوبی پیدا نکردم

        توسط میرزا پاسخ

دیدگاه خود را بیان کنید