Introduction

OvenPlayer is a proven HTML5 standard player designed for smooth streaming with Ultra-Low Latency and automatically fallback using various protocols.

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.

GitHub - AirenSoft/OvenPlayer: OvenPlayer is an Open-Source and JavaScript-based WebRTC Player for OvenMediaEngine.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.

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 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 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 and Rules.

License

OvenPlayer is under the MIT license.