Horse Table

Enter your description here.Enter your description here.Enter your description here.

1
avatar image

S. Schuette S. Schuette


Horse 1

2
avatar image

V. Cheminaud


Horse 2

3
avatar image

H. Jhon


Horse 3

4
avatar image

M. Barzalana


Horse 4

5
avatar image

M.Kyriakids


Horse 5

6
avatar image

T. Trullier


Horse 6

7
avatar image

S. Schuette


Horse 1

8
avatar image

V. Cheminaud


Horse 2

9
avatar image

H. Jhon


Horse 3

10
avatar image

M. Barzalana


Horse 4

11
avatar image

M.Kyriakids


Horse 5

12
avatar image

T. Trullier


Horse 6

  • Popup List Dialog Feature is used to display a list of data inside the video player. This feature is specially designed to display a list of players or intervenes in the video.

  • For example if we have a sport channel then it can be used to display the list of players playing in the current event.

How to configure and enable this feature

  {
    "advanced_features": [
      {
        "name": "popup_list",
        "visible": true,
        "data": {
        "popup_title": "Table Name",
        "popup_desc": "Enter your description",
        "list": [
          {
            "avatar_url": "https://your.avatar./photo.png",
            "title": "Enter your title",
            "description": "Description"
          }
        ]
        }
      }]
  }

Data property

Table 1. Player List data property
Property Value Description

list

Array<JSON> OR JSON url

requires an array of data with a pre-defined specific format described in the table below.

popup_title

string

title for the popup list.

popup_desc

string

description for the popup list.

Player Data Format

Table 2. player data json format
Property Value Description

description

string

description of the player.

avatar_url

string

url of the icon

title

string

Name of player.

Example

// How to implement the player
const video = document.querySelector('#video');
const videoContainer = document.querySelector('#videoContainer')
const hplayer = new HPlayer(video,videoContainer, {
  basic: {
    source: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
  },
  "advanced_features": [
      {
        "name": "popup_list",
        "visible": true,
        "data": {
        "popup_title": "Table Name",
        "popup_desc": "Enter your description",
        "list": [
          {
            "avatar_url": "https://your.avatar./photo.png",
            "title": "Enter your title",
            "description": "Description"
          }
        ]
        }
      }]
})
hplayer.init_();

How to dynamically Update the popup list data

  • Create an array of list of data and trigger yourPlayer.refreshPopupList(newData);

Example

const newData = [
  {
    avatar_url: 'https://api/yourAvatar.jpg',
    title: 'Your Title',
    description: 'Your Description...'
  },
  {
    avatar_url: 'https://api/yourAvatar.jpg',
    title: 'Your Title',
    description: 'Your Description...'
  },
  {
    avatar_url: 'https://api/yourAvatar.jpg',
    title: 'Your Title',
    description: 'Your Description...'
  }
];

button.onclick = () => {
    hplayer.refreshPopupList(newData);
};