Orange oneplayerui.js component

• Overview
• Documentation
• Quick Start for Users
• Quick Start for Developers
• Sample

Overview

OnePlayerUi.js implements UI over Orange OnePlayer.js library.

OnePlayer.js is the Orange reference client implementation for the playback of http adaptive streams via JavaScript and compliant browsers, using client-side JavaScript libraries leveraging the Media Source Extensions API set as defined by the W3C, i.e MSE and EME.

It provides support for different http adaptive streaming protocols by embedding javascript clients with MSE and/or EME extensions support, such as:

• dash.js for the playback of MPEG-DASH and Microsoft Smooth Streaming contents on browsers supporting MSE and EME extensions
• hls.js for the playback of Apple HLS contents on browsers supporting MSE and EME extensions
• hls-native.js for the playback of Apple HLS contents on browsers supporting natively HLS streaming and also EME API for FairPlay support (such as OSx/Safari)

Documentation

Full API Documentation is available describing all public methods, interfaces, properties, and events.

The class IOnePlayerUi is the main entry point of the module.

Quick Start for Users

Create a video element somewhere in your vue.js application html.

<div id="app">
  <header>
    <h1><img src='./assets/oneplayer.svg' class="logo"/>{{ title }}
    </h1>
  </header>
  <oneplayerui class="one-player" ref="oneplayerui"/>
</div>

import oneplayerui from 'oneplayerui';

export default {
  name: 'app',
  components: {
    oneplayerui
  },
  data: function (){
    return {
      title: 'oneplayerui sample',
  },
  mounted () {
    this.player = this.$refs.oneplayerui;
    this.player.init('ONDEMAND', 'DASHJS')
    .then(() => {
      this.player.load({ url: YOUR_URL });
    });
  }
}

Load css style from oneplayerui.js

<style>
  @import './../node_modules/oneplayerui/dist/lib/oneplayerui.min.css';
</style>

Quick Start For Developers

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

Sample

A sample with component integration is available at https://gitlab.forge.orange-labs.fr/OnePlayer/oneplayeruisample.git