# Introduction

## Features

* 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

## Download

You can download OvenPlayer from [OvenPlayer GitHub](https://github.com/AirenSoft/OvenPlayer).

{% embed url="<https://github.com/AirenSoft/OvenPlayer>" %}

If you have access to [OvenPlayer GitHub](https://github.com/AirenSoft/OvenPlayer), you can download it by pressing the Clone or Download button and clicking Download ZIP in the menu that appears.

## Precompiled OvenPlayer

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

## Quick Start

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

### Initialize for default

```
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"
    }
  ]
});
```

### Initialize for OME

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
});
```

### Initialize for DASH

If you want to play MPEG-DASH, you need the [dash.js](https://github.com/Dash-Industry-Forum/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"
    }
  ]
});
```

### Initialize for HLS

If you want to play HLS, you need the [hls.js](https://github.com/video-dev/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"
    }
  ]
});
```

### Initialize for Ads

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="
});
```

## Starter Template

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

## How to Contribute

Please read our [Guidelines](https://github.com/AirenSoft/OvenPlayer/blob/0.9/CONTRIBUTING.md) and [Rules](https://github.com/AirenSoft/OvenPlayer/blob/0.9/CODE_OF_CONDUCT.md).

## License

OvenPlayer is under the [MIT license](https://github.com/AirenSoft/OvenPlayer/blob/0.9/LICENSE).