Introduction
OvenPlayer is Open-Source HTML5 Player. OvenPlayer supports WebRTC Signaling from OvenMediaEngine for Sub-Second Latency Streaming and supports various streaming protocols.
Features
- Supports WebRTC Signaling from OvenMediaEngine for Sub-Second Latency Streaming
- Various protocols: WebRTC, HLS, Low Latency MPEG-DASH (LLDASH), MPEG-DASH
- Customizable UI
- Supports streaming regardless of browser and media type
- Receives the Signaling Protocol from OME (Signaling Protocol conforms to the OME specification)
- Automatically Fallback using HLS, MPEG-DASH
- Easily create profit by adding Ads in various formats
- Supports various subtitle formats: SMI, VTT, SRT
- Responsive player regardless of screen size
Installation
There are several ways to install OvenPlayer. Use the one you are comfortable with.
Download from GitHub
GitHub - AirenSoft/OvenPlayer: OvenPlayer is a JavaScript-based WebRTC Player for OvenMediaEngine. It also supports LL-DASH, MPEG-DASH, and HLS.
GitHub
If you have access to OvenPlayer GitHub, you can download the latest version in development by pressing the Clone or Download button and clicking Download ZIP in the menu that appears.
When you download and decompress it, you will see:
1
OvenPlayer
2
└── dist/
3
├── ovenplayer.js
4
└── ovenplayer.js.map
5
...
Copied!
ovenplayer.js uses UMD (Universal Module Definition) pattern that various module loaders can import (e.g., Plain HTML, AMD, CommonJS).ovenplayer.js.map is the source map for debugging to see what's going on in OvenPlayer.Just put
ovenplayer.js in your static directory of a web server and load ovenplayer.js in your HTML, you're ready to use OvenPlayer.1
<script src="your_path_to/ovenplayer.js"></script>
Copied!
Use CDN
Latest version
1
<script src="https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js"></script>
Copied!
Version specified
1
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ovenplayer.js"></script>
Copied!
Install via npm
Latest version
1
$ npm install ovenplayer
Copied!
Version specified
1
$ npm install [email protected]
Copied!
Quick Start
Below is a list of simple OvenPlayer initialization methods for each situation. For detailed options when initializing the OvenPlayer, please refer to the Initialization chapter.
Basic Concept
HTML
You need an HTML element where the OvenPlayer will be initialized.
1
<div id="player_id" class=""></div>
Copied!
Specifying the size or position of the player is possible by changing the style of the wrapper element.
1
<!-- Wrapper element for sizing or positioning the player -->
2
<div class="player-wrapper">
3
<!-- OvenPlayer will be initialized inside this element. -->
4
<div id="player_id"></div>
5
</div>
Copied!
The width of the OvenPlayer is set equal to the width of the container. So with style below, the OvenPlayer will have a width of 1280px.
1
.player-wrapper {
2
margin: 0 auto;
3
width: 1280px;
4
}
Copied!
JavaScript
You can import
ovenplayer.js and initialize OvenPlayer by calling OvenPlayer.create() as shown below:1
<script src="https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js"></script>
2
3
<script>
4
// Initialize OvenPlayer
5
const player = OvenPlayer.create('player_id', options)
6
</script>
Copied!
Alternatively, you can use OvenPlayer as an ES6 module as follows:
1
import OvenPlayer from 'ovenplayer';
2
3
// Initialize OvenPlayer
4
const player = OvenPlayer.create('player_id', options)
Copied!
Initialize for OME
To play Sub-Second Latency Stream of OvenMediaEngine, set the source
type to webrtcand set the file to the WebRTC Signaling URL with OvenMediaEngine. An explanation of the WebRTC Signaling URL can be found here.1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
<title>OvenPlayer</title>
9
</head>
10
11
<body>
12
<!-- OvenPlayer will be initialized inside this element. -->
13
<div id="player_id"></div>
14
15
<!-- Load OvenPlayer via CDN -->
16
<script src="https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js"></script>
17
18
<script>
19
20
// Initialize OvenPlayer
21
const player = OvenPlayer.create('player_id', {
22
sources: [
23
{
24
label: 'label_for_webrtc',
25
// Set the type to 'webrtc'
26
type: 'webrtc',
27
// Set the file to WebRTC Signaling URL with OvenMediaEngine
28
file: 'ws://ome_host:signaling_port/app/stream'
29
}
30
]
31
});
32
</script>
33
</body>
34
35
</html>
Copied!
Initialize for Video File
This is a way to play video files in progressive download mode.
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
<title>OvenPlayer</title>
9
</head>
10
11
<body>
12
<!-- OvenPlayer will be initialized inside this element. -->
13
<div id="player_id"></div>
14
15
<!-- Load OvenPlayer via CDN -->
16
<script src="https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js"></script>
17
18
<script>
19
20
// Initialize OvenPlayer
21
const player = OvenPlayer.create('player_id', {
22
sources: [
23
{
24
label: 'label_for_video',
25
// Set the type to 'mp4', 'webm' or etc
26
type: 'mp4',
27
file: 'https://github.com/AirenSoft/OvenPlayer/raw/master/docs/assets/OCP_480.mp4'
28
}
29
]
30
});
31
</script>
32
</body>
33
34
</html>
Copied!
Initialize for DASH
You need to place the
dash.js first, and then ovenplayer.js as shown below:1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
<title>OvenPlayer</title>
9
</head>
10
11
<body>
12
<!-- OvenPlayer will be initialized inside this element. -->
13
<div id="player_id"></div>
14
15
<!-- You need dash.js to play MPEG-DASH. -->
16
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dash.all.debug.min.js"></script>
17
18
<!-- Load OvenPlayer via CDN -->
19
<script src="https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js"></script>
20
21
<script>
22
23
// Initialize OvenPlayer
24
const player = OvenPlayer.create('player_id', {
25
sources: [
26
{
27
label: 'label_for_dash',
28
// Set the type to 'dash'
29
type: 'dash',
30
file: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd'
31
32
}
33
]
34
});
35
</script>
36
</body>
37
38
</html>
Copied!
Initialize for HLS
You need to place the
hls.js first, and then ovenplayer.js as shown below:1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
<title>OvenPlayer</title>
9
</head>
10
11
<body>
12
<!-- OvenPlayer will be initialized inside this element -->
13
<div id="player_id"></div>
14
15
<!-- You need hls.js to play HLS. -->
16
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js"></script>
17
18
<!-- Load OvenPlayer via CDN -->
19
<script src="https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js"></script>
20
21
<script>
22
23
// Initialize OvenPlayer
24
const player = OvenPlayer.create('player_id', {
25
sources: [
26
{
27
label: 'label_for_hls',
28
// Set the type to 'hls'
29
type: 'hls',
30
file: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
31
32
}
33
]
34
});
35
</script>
36
</body>
37
38
</html>
Copied!
Initialize for Ads
You need to set the
IMA first, and then ovenplayer.js, as shown below:1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
<title>OvenPlayer</title>
9
</head>
10
11
<body>
12
<!-- Wrapper element for resizing and positioning the player -->
13
<div class="player-wrapper">
14
<!-- OvenPlayer will be initialized inside this element. -->
15
<div id="player_id"></div>
16
</div>
17
18
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
19
20
<!-- Load OvenPlayer via CDN -->
21
<script src="https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js"></script>
22
23
<script>
24
25
// Initialize OvenPlayer
26
const player = OvenPlayer.create('player_id', {
27
sources: [
28
{
29
label: 'label_for_video',
30
// Set the type to 'mp4', 'webm' or etc
31
type: 'mp4',
32
file: 'https://github.com/AirenSoft/OvenPlayer/raw/master/docs/assets/OCP_480.mp4'
33
}
34
],
35
// Set the AD tag URL
36
adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator="
37
});
38
</script>
39
</body>
40
41
</html>
Copied!
How to Contribute
License
Last modified 1mo ago