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

امروز با معرفی یک پلیر ساده و جذاب در خدمت شما دوستان عزیز هستیم. در این مقاله شما یاد خواهید گرفت که چگونه از این پلیر در دروپال استفاده کنید.لازم به ذکر است این پلیر قابلیت پشتیبانی از 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>	

پیوست :

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

admin
جواد اصغری هستم مدیر سایت مرکز دروپال ایران ، یک طراح که از سال 89 با دروپال کار می کنم به گرافیک علاقه خاصی دارم و سعی می کنم کارهام در این چهارچوب قرار بگیرن
تصویر محمدرضا
محمدرضا (تایید نشده)
س., 07/19/2016 - 16:30

سلام بابت ماله خوبتون تشکر می کنم
آیا امکان داره از این پلیر در ویوز هم استفاده کرد؟


مرکز دروپال ايران

راه های ارتباط با ما

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing