Web Player

The user experience of playing videos is one of the most important aspects of any video platform service. The Arvancloud Web Player is easy to use on different devices, browsers, and applications. Our unique framework is compatible with various devices to provide a pleasant experience for all users.

This document will go through the features, installation, shortcuts, and event structure.

Features

Our player’s features include playing videos and audios, live streaming, supporting multiple dubbed languages, PiP, subtitles, controlling playback speed, choosing different qualities, adding logos and ads, size adaptability, and chapter.

The table below shows all of the features and their descriptions:

Feature	Description
Video / Audio	Supports HLS(.M3u8), DASH(.Mpd), MP3, MP4
On-Demand / Live Stream	Playing Live and On-Demand Videos
Touch	Compatible With Touch Screens
Responsive	Compatible With All Screen Sizes
Multi-Instance	Using Multiple Instance Versions with Different Configurations on The Same Page
Language	Supports Both Persian and English Languages
Customizable	Changing Settings and Configurations
Resume Playback	Supports Resuming Videos
Fullscreen / Picture-In-Picture (Pip)	Supports Full-Screen and Picture-In-Picture Modes
Logo	Displays Logo
Multiple Audio	Supports Multiple Audio Files for A Video
Subtitle	Supports Subtitles
Chapter	Supports Dividing the Content into Parts
Speed Control	Changing The Playback Speed
Shortcuts	Supports Shortcut Keys
Events	Supports All Player Events or Ads
Advertising	Compatible With The 2 Standard Modes of Pre-Roll, VAST (V3, V4), And the Other Modes of Mid-Roll, And Post-Roll (Only for The Arvancloud Video Platform)
Quality Selector	Manual Change in Quality

Installation

The Arvancloud player is hosted on Arvancloud’s main domain through the config file you receive.

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

You can use it through the player address, iFrame, HTMLElement, or JavaScript.

iFrame

This code will be accessible to you in your user panel after the video conversion process.

<!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>

Shortcut Keys

The Arvancloud player gives access to a number of shortcut keys to make video control more efficient.

Key	Function
Space	Pause/Resume
K	Pause/Resume
←	Rewind a Few Seconds
→	Fast Forward a Few Seconds
↑	Volume Up
↓	Volume Down
M	Mute/Unmute
F	Full-Screen Mode On / Off
I	Pip Mode On / Off

Events

The events in code are used to detect the changes in the carrying out of the code. These can result from the actions of the users, such as a mouse click, a change in the size of the player window, etc. Each event is shown with an object and has functions.

Event	Description
`progress`	Periodically To Check the Content Loading Progress
`Playing`	When The Content Is Played
`Play`	When Playback Is Resumed After a Pause
`pause`	When The Playing Is Paused
`timeupdate`	When The Time Shown Is Changed
`volumechange`	When The Volume or Mute Mode Is Changed
`seeking`	When The Seek Process Begins
`seeked`	When The Seek Process Is Complete
`ratechange`	When The Playback Speed Is Changed
`ended`	When The Playback Is Complete. Note: This Event Will Not Happen When Autoplay Is On
`fullscreen`	When The Player Enters Full-Screen Mode
`exit-fullscreen`	When The Player Exits the Full-Screen Mode
`userinactive`	When The Controls Are Hidden
`useractive`	When The Controls Are Visible
`ready`	When The API Call Is Ready
`loadstart`	When The Content Loading Begins
`loadeddata`	When The First Frame Is Loaded
`loadedmetadata`	When Enough Data Is Available to Be Played for Multiple Frames
`canplay`	When The Entire Content Can Be Played Without Interruptions
`canplaythrough`	When The User Tries to Access Data, It Is Unexpectedly Inaccessible
`stalled`	When The Requested Action Is Stalled Because Of Another Action
`waiting`	When An Action Is Delayed Because Of Waiting for Another One
`emptied`	When The Content Is Empty
`error`	When There Is an Error
`durationchange`	When The File Duration Is Changed
`resize`	When The Size of The Player Window Is Changed.
`suspend`	When The Content Loading Is Suspended
`abort`	When The Content Is Not Loaded Completely

Create EventListener

This is possible only in HTMLElement and JavaScript.

Example:

<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>

Check out the complete ArvanPlayer document to learn more.

Features​

Installation​

iFrame​

HTMLElement​

JavaScript​

Shortcut Keys​

Events​

Create EventListener​