Introduction

OpenVeo Player support Adaptive Streaming DASH and HLS. It will automaticaly switch between protocols according browser capabilities.

Prerequisites

OpenVeo Player embeds Video.js to display the HTML player. Video.js natively supports HLS but in order to support DASH, you have to install and import dependencies:

Install Dash.js:

npm install dashjs@{DASH_JS_VERSION}

Install videojs-contrib-dash plugin:

npm install videojs-contrib-dash@{CONTRIB_DASH_VERSION}

And import dependencies to use adaptive sources:

    <script type="text/javascript" src="lib/dashjs/dist/dash.all.min.js"></script>
    <script type="text/javascript" src="lib/videojs-contrib-dash/dist/videojs-dash.min.js"></script>

How to play adaptive sources

You need to define your adaptive sources by setting their mimetype and their link.

$scope.data.sources = [
  {
    adaptive: [ // The list of video adaptive sources (only for "html" player)
          { // Dash source
           height: 720,
           mimeType: 'application/dash+xml',
           link: 'https://host.local/openveo/mp4:bunny.mp4/manifest.mpd'
          },
          { // HLS Source
           height: 720,
           mimeType: 'application/vnd.apple.mpegurl',
           link: 'https://host.local/openveo/mp4:bunny.mp4/manifest.m3u8'
          },
          { // RTMP source
            mimeType: 'rtmp/mp4',
            link: 'rtmp://host.local/openveo/&mp4:bunny.mp4'
          }
    ],
    files : [ // The list of different resolutions sources for this video (only for "html" player)
      {
        width : 640, // Video width for this file
        height : 360, // Video height for this file
        link : 'https://host.local/pathToSmallMP4.mp4' // Video url
      },
      {
        width : 1280, // Video width for this file
        height : 720, // Video height for this file
        link : 'https://host.local/pathToHDMP4.mp4' // Video url
      },
      ...
    ]
  }
]

And set you player type to 'html':

<opl-player
  ...
  opl-data="data"
  opl-player-type="html"
></opl-player>

NB: "Adaptive" sources are always prioritized. "files" sources will be ignored if "adaptive" property is defined.