Initialization

This section describes how to run OvenPlayer and explains various initial options. Also, it includes a way to access an OvenPlayer instance.

Instance Methods

Running OvenPlayer

You need to obtain the OvenPlayer Instance to use the OvenPlayer API. You can typically use the OvenPlayer Instance returned after OvenPlayer.create(). However, in the case of debugging or unexpected situations, we will inform you of some ways to access the OvenPlayer Instance.

create()

let player = OvenPlayer.create(container, options);
Request
Request

Params

Type

Memo

container

String

DOM Element

options

Object

Please see the Options section below.

Accessing default instance

You run the player with the DOM Element and Options with ID. It returns the Instance of the player.

let player = OvenPlayer.create(...);
...
player.play();

Viewing all instances within a web page

OvenPlayer.getPlayerList()
(3) [{…}, {…}, {…}]
0: {on: ƒ, trigger: ƒ, off: ƒ, once: ƒ, init: ƒ, …}
1: {on: ƒ, trigger: ƒ, off: ƒ, once: ƒ, init: ƒ, …}
2: {on: ƒ, trigger: ƒ, off: ƒ, once: ƒ, init: ƒ, …}
length: 3
example
for(let i = 0 ; i < OvenPlayer.getPlayerList().length; i++){
OvenPlayer.getPlayerList()[i].pause();
}

Querying a single instance using an index

OvenPlayer.getPlayerByIndex(0)
{on: ƒ, trigger: ƒ, off: ƒ, once: ƒ, init: ƒ, …}
example
if(OvenPlayer.getPlayerByIndex(0)){
OvenPlayer.getPlayerByIndex(0).pause();
}

Querying a single instance using the DOM Element ID

OvenPlayer.getPlayerByContainerId("player")
{on: ƒ, trigger: ƒ, off: ƒ, once: ƒ, init: ƒ, …}

Setting the log

You set up to show all logs that occur in the OvenPlayer that is on the web page.

OvenPlayer.debug(true);

Options

You can use the following options to initialize the player:

autoStart

Type

Default

Required

boolean

false

false

You can choose whether to play OvenPlayer automatically when the source is loaded. However, depending on the Browser Policy, autoplay may be restricted at any time.

controls

Type

Default

Required

boolean

true

false

If you don't want to show the control bar on OvenPlayer, change this option to false.

loop

Type

Default

Required

boolean

false

false

You can play a video repeatedly using this option.

mute

Type

Default

Required

boolean

false

false

If you set this option to true, it will run in mute mode.

timecode

Type

Default

Required

boolean

true

false

You set whether to display time or frame information in the control bar on OvenPlayer. Of course, framerate information is required when registering sources to display the correct frame information.

playbackRate

Type

Default

Required

Number

1

false

You can set the playback speed with this option.

playbackRates

Type

Default

Required

Array of Number

[2, 1.5, 1, 0.5, 0.25]

false

You can set the range of video playback speed. The playback speed range is 0.25 to 4x.

currentProtocolOnly

Type

Default

Required

Boolean

false

false

Shows only current protocols. (*If you want to show only quality information when there are various protocols and various quality information together, please use it.)

sources

Type

Default

Required

Object | Array of Object

-

true

source

You can register the URL of the content playback URL as shown below:

example
let player = OvenPlayer.create("player", {
type : "mp4",
file : "https://path.to/your_video",
framerate : 30,
label : "360P"
});

sources

If you have multiple protocols or multiple resolutions for a single content, you can register them at once using sources. Also, multiple protocols can support a broader range of browsers, and multiple resolutions allow viewers to select video quality.

OvenPlayer will play a video in the order of the protocol or resolution you entered in sources, and will automatically play the next source if playback fails.

example
let player = OvenPlayer.create("player", {sources : [
{
type : "mp4",
file : "https://path.to/your_video",
framerate : 30,
label : "360P"
},
{
type : "mpd",
file : "https://path.to/your_video.mpd",
framerate : 30,
label: "360P DASH"
},
{
type : "hls",
file : "https://path.to/your_video.m3u8",
framerate : 30,
label: "360P HLS"
},
{
type : "rtmp",
file : "rtmp://path.to/your_video",
framerate : 30,
label: "360P RTMP"
}
] });

tracks

example
let player = OvenPlayer.create("player", {sources : {
type : "mp4",
file : "https://path.to/your_video",
framerate : 30,
label : "360P"
}});

Type

Default

Required

Array of Object

-

false

You can register the URL information of the subtitle file shown with a video. OvenPlayer supports *.vtt, *.srt, and *.smi as subtitle file format.

example
let player = OvenPlayer.create("player", {sources : {
type : "mp4",
file : "https://path.to/your_video",
label : "360P"
],
tracks : [
{
kind : "captions",
file : "https://path.to/your_caption.vtt",
label : "KO vtt"
},
{
kind : "captions",
file : "https://path.to/your_caption.srt",
label : "KO srt"
},
{
kind : "captions",
file : "https://path.to/your_caption.smi",
label : "KO smi"
}
]
});

volume

Type

Default

Required

Number

100

false

You can set the initial volume when a user plays a video in OvenPlayer.

adTagUrl

Type

Default

Required

String

-

false

You can set the URL of the Video Ad Serving Template (VAST) to play in OvenPlayer. Also, OvenPlayer supports VAST 4, VAST 3, VAST 2, VPAID 2 (HTML 5), and VMAP 1.0.1.

For more information, see Support and Compatibility.

example
let player = OvenPlayer.create("player", {
adTagUrl : "https://pubads.g.doubleclick.net/gampad/ads?...",
sources : {
type : "mp4",
file : "https://path.to/your_video",
label : "360P"
]
});

adClient

Type

Default

Required

String

"googleima"

false

Sets whether to Google IMA or Simple VAST the Ads client when player initialize. "googleima" or "vast"

playlist

Type

Default

Required

Array of Object

-

false

Field

Type

Default

Required

title

String

sources[0].label

false

image

String

-

false

duration

Number

-

false

adTagUrl

String

-

false

sources

Object | Array of Object

-

true

tracks

Array of Object

-

false

playlist has multiple sources mentioned above. You can explore between playlists, and it automatically plays the next content. Also, you can assign ads and captions for each playlist.

example
let player = OvenPlayer.create("player", {
playlist : [
{
title : "01",
adTagUrl : "https://pubads.g.doubleclick.net/gampad/ads?...",
image : "https://path.to/your_video_thumbnail.jpeg",
duration : 7343,
sources: [ {
type : "mp4",
file : "https://path.to/your_video",
label : "360P"
}],
tracks: [{
kind : "captions",
file : "https://path.to/your_caption.vtt",
label : "KO vtt"
}]
},
{
title : "02",
adTagUrl : "https://pubads.g.doubleclick.net/gampad/ads?...",
image : "https://path.to/your_video_thumbnail2.jpeg",
duration : 8333,
sources: [ {
type : "mp4",
file : "https://path.to/your_video2",
label : "360P"
},
{
type : "mpd",
file : "https://path.to/your_video.mpd",
label: "360P DASH"
}
tracks: [{
kind : "captions",
file : "https://path.to/your_caption2.vtt",
label : "KO vtt"
}]
}
]
});