VOPlayer.js

This is the Viaccess-Orca javascript Video player implementation for browsers. It supports DASH, HLS and MSS contents and can be play on Chrome, Firefox, Edge, IE11 and Safari. It relies on W3C premium extensions (MSE/EME) and is an extension of the Orange hasplayer.js and the Shaka Player.

##Getting started First of all you should integrate VOPlayer.js libraries in your index.html.

<body>
  ...
  <script type="text/javascript" src="js/squadeo.min.js"></script>
  <script type="text/javascript" src="js/cswebplayer.min.js"></script>
  <script src="yourPathToVOPlayer/voplayer.min.js"></script>
  ...
</body>

You may also add an optional library that provides an extension of the standard HTML5 video control bar. This library depends on jquery and add controls for audio, subtitles and bit rate settings in the control bar. Following is described using this option.

<body>
  ...
  <script type="text/javascript" src="js/squadeo.min.js"></script>
  <script type="text/javascript" src="js/cswebplayer.min.js"></script>
  <script type="text/javascript" src="html5player/js/voplayer.min.js"></script>
  ...
</body>

Then you need to create a VOPlayer object

var voPlayer = new VOPlayer.VOPlayer(document.getElementById("videoplayer-container"));

Add events listener on it

voPlayer.addEventListener("loadeddata", onloadeddata);
voPlayer.addEventListener(VOPlayer.EventType.ERROR, onError.bind(this));
voPlayer.addEventListener(VOPlayer.EventType.WARNING, onWarning.bind(this));
voPlayer.addEventListener(VOPlayer.EventType.DONWLOAD_BITRATE_CHANGE, onDownloadBitrateChange);
voPlayer.addEventListener(VOPlayer.EventType.QUALITY_CHANGE, onQualityChange.bind(this));
voPlayer.addEventListener(VOPlayer.EventType.BUFFER_LEVEL_CHANGE, onBufferLevelChange.bind(this));

And then, load and play a content

voPlayer.load(new URL("http://playready.directtaps.net/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/Manifest"),
                     new VOPlayer.DrmInformation(new URL(wideVinelicenserUrl),undefined),
                     new VOPlayer.DrmInformation(new URL(playReadylicenserUrl),undefined),
                     new VOPlayer.DrmInformation(new URL(fairPlaylicenserUrl),undefined),
                     undefined);

Notes:

if StreamingConfiguration.autoPlaybackStart is set to false you also have to call VOPlayer.play() method to start the playback.
last parameter is related to Ad plugin, see chapter Using the Ad plugin
you may also

##Using the VOPlayer UI extension Add the extension to your index.html

    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/squadeo.min.js"></script>
    <script type="text/javascript" src="js/cswebplayer.min.js"></script>
    <script type="text/javascript" src="html5player/js/voplayer.min.js"></script>
    <script type="text/javascript" src="html5player/js/voplayer-ui.min.js"></script>

Create the UI extension object, giving it the reference to the VOPlayer

var voPlayer            = new VOPlayer.VOPlayer(document.getElementById("videoplayer-container"));
var voPlayerController  = new VOPlayer.PlayerController(voPlayer, uiConfiguration);

And that's all! You get a new control bar with all the user need to select the audio languages, the subtitles and the bit rates.

##Using the Ad plugin

Add the CSAdsPlugin to your index.html

    <script type="text/javascript" src="js/csadsplugin.js"></script>

Create the plugin

var adsPlugin       = new adsplayer.AdsPlayer(voPlayer.getAdElement());

Add the plugin to the VOPLayer

voPlayer.addPlugin(adsPlugin);

And then provide a VMAP/MAST ad url when loading the content

voPlayer.load(new URL("http://playready.directtaps.net/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/Manifest"),
                     new VOPlayer.DrmInformation(new URL(wideVinelicenserUrl),undefined),
                     new VOPlayer.DrmInformation(new URL(playReadylicenserUrl),undefined),
                     new VOPlayer.DrmInformation(new URL(fairPlaylicenserUrl),undefined),
                     new URL("http://myVmapUrl"));