چگونه در دروپال یک پلیر ساده و جذاب داشته باشیم؟

امروز با معرفی یک پلیر ساده و جذاب در خدمت شما دوستان عزیز هستیم. در این مقاله شما یاد خواهید گرفت که چگونه از این پلیر در دروپال استفاده کنید.لازم به ذکر است این پلیر قابلیت پشتیبانی از youtube ، vimeo و امکان پخش فایل های صوتی را نیز دارد.با ما همراه باشید.

یک مثال از نحوه استفاده
در ابتدا نحوه استفاده از این پلیر رو در یک فایل html توضیح داده و در ادامه نحوه پویا کردن این پلیر رو به شما در دروپال آموزش خواهیم داد.
برای شروع باید دو فایل زیر رو فراخوانی کنید:(فایل ها در پیوست مقاله قرار داده شده است)

<link rel="stylesheet" href="css/plyr.css">
<script src="js/plyr.js"></script>

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

<div class="plyr">
    <audio controls>
        <!-- Audio files -->
        <source src="http://drupalcenter.ir/sites/uploads/1.mp3" type="audio/mp3">
        <!-- Fallback for browsers that don't support the <audio> element -->
        <a href="http://drupalcenter.ir/sites/uploads/1.mp3">Download</a>
    </audio>
</div>

و یا اگر نوع مدیا ما ویدیو بود از کد HTML زیر استفاده کنیم :

<video poster="/path/to/poster.jpg" controls>
  <source src="/path/to/video.mp4" type="video/mp4">
  <source src="/path/to/video.webm" type="video/webm">
  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
</video>

همچنین برای فراخوانی ویدیور از youtube می تونیم از کد HTML زیر استفاده کنیم :

<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>

 و در پایان برای فراخوانی و نمایش ویدیو از سایت vimeo می توانیم از کد HTML زیر استفاده کنیم:

<div data-type="vimeo" data-video-id="143418951"></div>

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

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

چگونه از این پلیر زیبا و ساده در دروپال استفاده کنیم؟

برای اینکه از این پلیر بتونیم استفاده کنیم ابتدا باید فایل های جی کوئری و سی اس اس که در بالا هم فراخوانی کرده بودیم را در فایل .info قالب فراخوانی کنی بدین صورت :

stylesheet[all][] = css/plyr.css

scripts[] = js/plyr.js

نکته : بعد از اضافه کردن 2 مورد بالا به قالب باید حتما کش دروپال رو خالی کنید.

حالا یک نوع محتوا جدید به نام audio ایجاد کنید و یک فیلد از نوع فایل به نام audio با نام ماشین filed_audio به این نوع محتوا اضافه کنید. حالا برای نمایش پلیر در سایت، برای این نوع محتوا یک node.tpl.php اختصاصی ایجاد می کنیم، از آنجایی که نام این نوع محتوا audio هست، اسم فایل ما به صورت node--audio.tpl.php خواهد بود.

در ابتدا باید با یک دستور ساده در فایل بالا مسیر آپلود فایل رو بدست بیاوریم، که من این کارو با این دستور انجام میدهم :

<?php
isset($node->field_audio['und']['0']['uri']) ? $audio = file_create_url($node->field_audio['und']['0']['uri']) :  $audio = "";
?>

کد بالا را در ابتدای فایل node--audio.tpl.php قرار دهید. و سپس کافیست کد زیر را فراخوانی کنید :

<div class="plyr">
	<audio controls>
		<!-- Audio files -->
		<source src="<?php print render($audio); ?>" type="audio/mp3">
		<!-- Fallback for browsers that don't support the <audio> element -->
		<a href="<?php print render($audio); ?>">Download</a>
	</audio>
</div>
<script>plyr.setup();</script>	

پیوست :

• فایل ها
• دمو

در پایان اگر سوال یا مشکلی داشتید خوشحال میشم بتونم کمکتون کنم.