پلیر وب

بخش مهمی از هر سرویس میزبانی و پلتفرم ویدیو، پخش و تجربه کاربر در هنگام تعامل با ویدیو است. پلیر ابر آروان، پیچیدگی‌های ارایه ویدیو در دستگاه‌ها، مرورگرها و برنامه‌ها را کاهش می‌دهد. ابر آروان یک فریم‌ورک و رابط کاربری غنی و سازگار با بیش‌تر دستگاه‌ها و مرورگرها برای ایجاد تجربیات منحصر به فرد کاربران ویدیویی ارایه می‌دهد.

در این مستند، به بررسی قابلیت‌ها، نحوه راه‌اندازی، میان‌برها و ساختار رویدادهای پلیر می‌پردازیم.

قابلیت‌ها

پلیر ابر آروان قابلیت‌های پخش ویدیو و صوت، پخش زنده، پشتیبانی از چند زبان (دوبله)، PiP، زیرنویس، کنترل سرعت پخش، انتخاب کیفیت، اضافه کردن تبلیغات و لوگو، تطبیق اندازه و chapter را دارد.

در جدول زیر تمام قابلیت‌های پلیر به همراه توضیحات قابل توجه مرتبط با هر قابلیت عنوان شده است:

توضیحات	قابلیت
پشتیبانی از HLS(.m3u8), DASH(.mpd) ,MP3 ,MP4	Video / Audio
امکان پخش محتوای On Demand و Live	On-demand / Live Stream
سازگار با صفحات نمایش لمسی	Touch
سازگار با تمامی اندازه‌های صفحه نمایش	Responsive
امکان فراخوانی چند نسخه (instance) با تنظیمات مختلف در یک صفحه	Multi-Instance
پشتیبانی از دو زبان فارسی و انگلیسی	Language
امکان تغییر رفتار و تنظیمات	Customizable
پشتیبانی از Resume و شروع به پخش محتوا از ادامه زمان قبلی	Resume Playback
پشتیبانی از حالت Full Screen و Picture in Picture	FullScreen / Picture-in-Picture(PiP)
امکان نمایش لوگو	Logo
پشتیبانی از چند صوت مختلف برای یک محتوا	Multiple Audio
پشتیبانی از زیرنویس	Subtitle
امکان قسمت‌بندی کردن محتوا	Chapter
امکان تغییر سرعت پخش	Speed Control
پشتیبانی از کلیدهای میانبر صفحه کلید	Shortcuts
دسترسی به همه ایونت‌های پلیر یا تبلیغات	Events
سازگار با دو حالت استاندارد: Pre-Roll, VAST(v3, v4) و غیر استاندارد: Mid-Roll, Post-Roll (فقط برای پلتفرم ویدیو آروان)	Advertising
امکان تغییر کیفیت محتوا به‌شکل دستی	Quality Selector

راه‌اندازی

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

https://player.arvancloud.ir/?config={CONFIG_URL}

برای استفاده از پلیر می‌توانید از آدرس پلیر، iFrame، HTMLElement یا JavaScript استفاده کنید.

iFrame

این کد که در پنل کاربری شما و پس از تبدیل و پردازش ویدیو در اختیار شما قرار می‌گیرد، در قالب زیر ارایه می‌شود و روی دامنه آروان سرو می‌شود.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>ArvanPlayer</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="icon" href="favicon.png" />
</head>

<body>
  <iframe id="ir1p" width="560" height="315" frameborder="0" title="{TITLE}" src="https://player.arvancloud.ir/?config={CONFIG_URL}"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</body>

</html>

HTMLElement

<!DOCTYPE html>
<html lang="en">

<head>
  <title>ArvanPlayer</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="icon" href="favicon.png" />
  <script type="application/javascript" src="https://player.arvancloud.ir/arvanplayer.min.js"></script>
  <style>
    html {
      /* default */
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div id="r1p_container">
    <div id="r1p" class="arvanplayer" style="width: 560px; height: 315px;" config="{CONFIG_URL}" data-config='{
        "currenttime": 0,
        "autostart": false,
        "repeat": false,
        "mute": false,
        "preload": "auto",
        "controlbarautohide": true,
        "lang": "en",
        "aspectratio": "",
        "color": "",
        "controls": true,
        "touchnativecontrols": false,
        "displaytitle": true,
        "displaycontextmenu": true,
        "logoautohide": true
      }'></div>
  </div>
</body>

</html>

JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
  <title>ArvanPlayer</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="icon" href="favicon.png" />
  <script type="application/javascript" src="https://player.arvancloud.ir/arvanplayer.min.js"></script>
  <style>
    html {
      /* default */
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div id="r1p_container">
    <div id="r1p" style="width: 560px; height: 315px;"></div>
    <script type="application/javascript">
      const ele = document.getElementById('r1p');

      // client-side customization, If you don't want to change anything, pass it empty (objConfig = {}).
      const objConfig = {
        currenttime: 0,
        autostart: false,
        repeat: false,
        mute: false,
        preload: "auto",
        controlbarautohide: true,
        lang: "en",
        aspectratio: "",
        color: "",
        controls: true,
        touchnativecontrols: false,
        displaytitle: true,
        displaycontextmenu: true,
        logoautohide: true
      };

      const player = new ArvanPlayer(ele, // element
        '{CONFIG_URL}',                   // remote config
        objConfig,                        // client-side settings
        false);                           // SecureLink enabled
    </script>
  </div>
</body>

</html>

میان‌برها | Shortcuts

پلیر ابر آروان مجموعه‌ای ازمیان‌برهای صفحه کلید را برای دسترسی آسان‌تر در اختیار کاربران قرار می‌دهد. این میان‌برها به شما این امکان را می‌دهند که با استفاده از صفحه کلید ویدیوها را کنترل کنید.

کلید	کارکرد
space	متوقف کردن/شروع پخش
K	متوقف کردن/شروع پخش
←	رفتن به چند ثانیه قبل
→	رفتن به چند ثانیه بعد
↑	افزایش سطح صدا
↓	کاهش سطح صدا
M	تعویض بین حالت با صدا/بی صدا
F	فعال/غیرفعال کردن حالت تمام صفحه
I	فعال/غیرفعال کردن حالت PiP

رویدادها | Events

رویدادها یا ایونت‌ها در کد برای مشخص شدن تغییراتی که ممکن است بر اجرای کد تاثیر بگذارد فعال می‌شوند. آن‌ها می‌توانند به وسیله تعاملات کاربران مثل حرکت دادن یا کلیک ماوس، تغییر اندازه پنجره پلیر و ... ناشی شوند. هر رویداد با یک شی نمایش داده می‌شود و دارای فیلدها یا تابع‌هایی است.

در جدول زیر ایونت‌های پلیر آروان توضیح داده شده است.

شرح رویداد	نوع رویداد
به‌شکل دوره‌ای برای اطلاع از پیشرفت بارگیری محتوا ارسال می‌شود.	`progress`
زمانی که محتوا شروع به پخش می‌کند، ارسال می‌شود.	`playing`
هنگامی که پخش بعد از یک توقف موقت (Pause) شروع می‌شود، ارسال می‌شود.	`play`
زمانی که پخش متوقف می‌شود، ارسال می‌شود.	`pause`
زمان نشان داده شده به وسیله ویژگی currentTime تغییر پیدا کرده باشد، ارسال می‌شود.	`timeupdate`
زمانی که میزان صدا یا حالت بی‌صدا تغییر کند، ارسال می‌شود.	`volumechange`
زمانی که عملیات Seek شروع شود، ارسال می‌شود.	`seeking`
زمانی که عملیات Seek کامل شود، ارسال می‌شود.	`seeked`
زمانی که سرعت پخش تغییر کند، ارسال می‌شود.	`ratechange`
پس از اتمام پخش ارسال می‌شود. توجه: این رویداد زمانی که autoplay فعال باشد اجرا نمی‌شود.	`ended`
زمانی که پلیر وارد حالت تمام صفحه شود، ارسال می‌شود.	`fullscreen`
زمانی که پلیر از حالت تمام صفحه خارج شود، ارسال می‌شود.	`exit-fullscreen`
زمانی که کنترل‌ها پنهان هستند، ارسال می‌شود.	`userinactive`
زمانی که کنترل‌ها نمایش داده می‌شوند، ارسال می‌شود.	`useractive`
زمانی که برای API Call آماده باشد، ارسال می‌شود.	`ready`
زمانی که بارگیری محتوا شروع می‌شود، ارسال می‌شود.	`loadstart`
زمانی که اولین فریم محتوا لود می‌شود، ارسال می‌شود.	`loadeddata`
زمانی که بارگیری metadata به پایان رسیده و همه attributeها حاوی اطلاعات مفید لازم هستند، ارسال می‌شود.	`loadedmetadata`
زمانی که داده‌‌های کافی برای پخش محتوا حداقل برای چند فریم وجود داشته باشد، ارسال می‌شود.	`canplay`
زمانی که کل محتوا بدون توقف می‌تواند پخش شود، ارسال می‌شود.	`canplaythrough`
زمانی که کاربر در تلاش برای دریافت داده‌هاست اما داده‌ها به‌شکل غیرمنتظره در دسترس نیستند، ارسال می‌شود.	`stalled`
زمانی که عملیات درخواستی در انتظار یک عملیات دیگر به تاخیر افتاده باشد، ارسال می‌شود.	`waiting`
زمانی که محتوا خالی شده باشد، ارسال می‌شود.	`emptied`
زمانی که خطایی رخ داده باشد، ارسال می‌شود.	`error`
زمانی که مقدار duration (مدت زمان فایل) تغییر کند، ارسال می‌شود.	`durationchange`
زمانی که اندازه پنجره پلیر تغییر کند، ارسال می‌شود.	`resize`
زمانی که بارگیری داده محتوا به حالت تعلیق در آمده باشد، ارسال می‌شود.	`suspend`
زمانی که محتوا به‌شکل کامل لود نشده باشد (اما نه در نتیجه یک خطا)، ارسال می‌شود.	`abort`

تعریف EventListener

تعریف EventListener فقط در حالات HTMLElement و JavaScript امکان‌پذیر است.

مثال:

<script type="application/javascript">
  const elePlayer = document.getElementById('r1p');

  elePlayer.addEventListener('play', (objEvent) => {
    // do something
  });

  elePlayer.addEventListener('pause', (objEvent) => {
    // do something
  });

  elePlayer.addEventListener('timeupdate', (objEvent) => {
    // do something
    console.info(objEvent.detail); // show current time
  });
</script>

برای بررسی دقیق‌تر مستندات Player ابر آروان می‌توانید به این لینک مراجعه کنید.

قابلیت‌ها​

راه‌اندازی​

iFrame​

HTMLElement​

JavaScript​

میان‌برها | Shortcuts​

رویدادها | Events​

تعریف EventListener​