آموزش المان ویدیو پلیر Video Player

آموزش ایجاد ویدیو پلیر در افزونه ویژوال کامپوزر

المان ویدیو پلیر یا Video Player یکی از ابزارهای بسیار پرکاربرد برای  ایجاد پخش کننده فیلم در افزونه ویژوال کامپوزر و سایت می باشد. امروز به صورت کامل نحوه استفاده از این ابزار را به شما آموزش خواهیم داد.

المان ویدیو پلیر (Video Player) در ویژوال کامپوزر

یکی از ساده ترین راه های قرار دادن فیلم یا ویدیو در صفحه طراحی شده، استفاده از المان ویدیو پلیر می باشد. با استفاده از این المان یا ابزار می توانید فیلم های خود را در سرویس های اشتراک فیلم مانند You tube و Aparat و Vimo و …آپلود کنید.

المان ویدیو پلیر (Video Player) در ویژوال کامپوزر

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


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

Video Player Support File


آموزش المان ویدیو پلیر(Video Player)

بعد از انتخاب ابزار Video Player در تب عمومی المان، موارد زیر را مشاهده می نمایید.

  • عنوان ابزارک
  • لینک ویدیو
  • عرض ویدیو
  • نسبت ابعاد ویدیو
  • ترازبندی
  • CSS متحرک
  • آی دی و المان اضافی

عنوان ابزارک

عنوانی که برای ویدیو مورد نظر خود در نظر دارید را در این قسمت وارد کنید. می توانید خالی هم بگذارید.


لینک ویدیو

آدرس و لینک اصلی فیلم یا ویدیو خود را در ین قسمت وارد کنید. مانند: https://vimeo.com/51589652


عرض ویدیو

می توانید عرض ویدیو را به صورت تمام عرض(100%) و یا در اندازه های دلخواه تنظیم کنید.


نسبت ابعاد ویدیو

این مورد برای تنظیم نسبت ابعاد ویدیو می باشد. اگر ویدیو یا فیلم بر روی موبایل نمایش داده می شود این گزینه تاثیر چندانی ندارد. فقط در نمایشگر های بزرگ مانند تلویزیون ها تاثیر دارد.


تراز بندی

حالت و محل قرار گیری المان را در سه حالت چپ، راست و وسط تنظیم کنید.


CSS متحرک

برای اضافه نمودن افکیت یا انیمیشن به المان و فیلم خود، می توانید یکی از انیمیشن های CSS را از آن استفاده کنید.


آی دی و کلاس اضافی

برای اضافه نمودن خصوصیات منحصر به فرد دیگری که مایل هستید به المان ویدیو پلیر انتساب گردد، از ID یا Class استفاده کنید.


امیدوارم از سری آموزش ویژوال کامپوزر، این آموزش نیز مورد توجه شما قرار گرفته باشد. تا آموزش بعدی بدرود.

مثال کاربردی پخیش کننده فیلم