Introduction
Various Protocols: WebRTC, HLS, MPEG-DASH, RTMP
Streaming with Ultra-Low Latency
Customizable UI
Supports Streaming regardless of Browser and Media Type
Receives the Signaling Protocol from OME (Signalling 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
You can download OvenPlayer from OvenPlayer GitHub.
If you have access to OvenPlayer GitHub, you can download it 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:
OvenPlayer├── dist/│ ├── development/│ │ └── ovenplayer/│ │ ├── ovenplayer.js│ │ ├── ovenplayer.provider.DashProvider.js│ │ ├── ovenplayer.provider.DashProvider~ovenplayer.provider.HlsProvider~ovenplayer.provider.Html5~ovenplaye~7afd68cf.js│ │ ├── ovenplayer.provider.HlsProvider.js│ │ ├── ovenplayer.provider.Html5.js│ │ ├── ovenplayer.provider.RtmpProvider.js│ │ ├── ovenplayer.provider.WebRTCProvider.js│ │ ├── OvenPlayerFlash.swf│ │ ├── smiparser.js│ │ └── vttparser.js│ └── production/│ └── ovenplayer/│ ├── ovenplayer.js│ ├── ovenplayer.LICENSE│ ├── ovenplayer.js.map│ ├── ovenplayer.provider.DashProvider.js│ ├── ovenplayer.provider.DashProvider.js.LICENSE│ ├── ovenplayer.provider.DashProvider.js.map│ ├── ovenplayer.provider.HlsProvider.js│ ├── ovenplayer.provider.HlsProvider.js.LICENSE│ ├── ovenplayer.provider.HlsProvider.js.map│ ├── ovenplayer.provider.Html5.js│ ├── ovenplayer.provider.Html5.js.LICENSE│ ├── ovenplayer.provider.Html5.js.map│ ├── ovenplayer.provider.RtmpProvider.js│ ├── ovenplayer.provider.RtmpProvider.js.LICENSE│ ├── ovenplayer.provider.RtmpProvider.js.map│ ├── ovenplayer.provider.WebRTCProvider.js│ ├── ovenplayer.provider.WebRTCProvider.js.LICENSE│ ├── ovenplayer.provider.WebRTCProvider.js.map│ ├── ovenplayer.sdk.js│ ├── ovenplayer.sdk.js.LICENSE│ ├── ovenplayer.sdk.js.map│ ├── OvenPlayerFlash.swf│ ├── vttparser.js│ └── vttparser.js.LICENSE...
This default format is OvenPlayer compiled for use in most web projects.
We currently provide Developer, a development version for local builds, and Production, a distribution version for production builds for distribution. Also, It is split-compiled on a module-by-module basis to reduce the amount of wasted capacity.
When you put production/ovenplayer in static directory in the web server and include only ovenplayer.js, you are ready to use OvenPlayer.
<script src="your_path_to/ovenplayer/ovenplayer.js"></script>
You can import ovenplayer.js as shown below:
<script src="your_path_to/ovenplayer/ovenplayer.js"></script>
And if you add the following code to your HTML code, OvenPlayer will be initialized in this element later.
<div id="player_id"></div>
let player = OvenPlayer.create("player_id", {sources: [{"type": "mp4","file": "../dist/OCP_480.mp4","label": "480p"},{"type": "mp4","file": "../dist/OCP_720.mp4","label": "720p"},{"type": "mp4","file": "../dist/OCP_1080.mp4","label": "1080p"}]});
You can use OvenPlayer.generateWebrtcUrls() to generate the list of WebRTC signalling URL.
let webrtcSources = OvenPlayer.generateWebrtcUrls([{host : 'ws://host:port',application : 'app',stream : "stream_1080",label : "WebRTC 1080P"},{host : 'ws://host:port',application : 'app',stream : "stream_480",label : "WebRTC 480P"}];);
Or you can write your list of URLs and use them as in the code below:
let webrtcSources = [{type : "webrtc", file : "ws://host:port/app/stream_1080", label : "1080"}, {type : "webrtc", file : "ws://host:port/app/stream_480", label : "480P"}]
let player = OvenPlayer.create("player_id", {sources: webrtcSources});
If you want to play MPEG-DASH, you need the dash.js plugin.
You need to place the dash.js plug-in first, and then ovenplayer.js, as shown below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.3/dash.all.min.js"></script><script src="your_path_to/ovenplayer/ovenplayer.js"></script>
let player = OvenPlayer.create("player_id", {sources: [{"type": "dash","file": "http://domain/dist/OCP_480.mpd","label": "480p"}]});
If you want to play HLS, you need the hls.js plugin.
You need to place the hls.js plug-in first, and then ovenplayer.js, as shown below:
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><script src="your_path_to/ovenplayer/ovenplayer.js"></script>
let player = OvenPlayer.create("player_id", {sources: [{"type": "hls","file": "http://domain/dist/OCP_480.m3u8","label": "480p hls"}]});
If you want to use Ads in OvenPlayer, you need the google ima plugin.
You need to set the ima plug-in first, and then ovenplayer.js, as shown below:
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script><script src="your_path_to/ovenplayer/ovenplayer.js"></script>
let player = OvenPlayer.create("player_id", {sources: [{"type": "mp4","file": "../dist/OCP_1080.mp4","label": "1080p"}],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="});
<!doctype html><html lang="ko"><head><meta charset="utf-8"><script src="your_path_to/ovenplayer/ovenplayer.js"></script><title>OvenPlayer For OME</title></head><body><div id="player"></div><script>let player = OvenPlayer.create("player", {sources: [{"type": "mp4","file": "your_path_to/OCP_480.mp4","label": "480p"}]});player.on("error", function(error){console.log(error);});</script></body></html>
Please read our Guidelines and Rules.
OvenPlayer is under the MIT license.
