HTML5 Demo Tutorial

DRM

Set media source and DRM information in sourceConfig(link to sourceConfig of API Doc) object. You can set multiple streams with different DRM in one object which point to the same media source, VisualOn HTML5+ player will apply the appropriate stream according to the supported DRM type of your browser. That is, it would play link with Fairplay on safari, play link with PlayReady on IE/EDGE and play link with Widevine on Chrome/Firefox. If more than one link is supported on current browser, the first one will be chosen. VisualOn HTML5+ player also supports multiple DRM in one stream, it will choose the supported DRM of the current browser. Please check the example of an object as following:

Example:

    links: [
      {
          uri: "myFairplayStream.m3u8",
          drm: {
              fairplay: {
                  laUrl: 'https://myfairplay.licenseserver.com/',
                  certificateUrl: 'https://myfairplay.licenseserver.com/cert',
                  headers: { 'header1': 'token1', 'header2': 'token2'},
                  withCredentials: true,
                  licenseResponseType: 'text',
                  isResponseBase64Encode: true,
                  useUint8InitData: false,
                  buildMessage: function (event, session) {
                      return JSON.stringify({spc: event.messageBase64Encoded });
                  },
                  processLicense: function (responseText) {
                      return JSON.parse(responseText).ckc;
                  },
                  extractContentId: function (contentId) {
                      var hostname = "invalid.";
                      var pos = contentId.indexOf('skd://');
                      if (pos >= 0) {
                          hostname = contentId.substring(pos + 6);
                      }
                      return hostname;
                  }
              }
          },
          options: {
              manifestWithCredentials: true,
              segmentWithCredentials: false
          }
      }, {
          uri: "myWidevineStream.mpd",
          drm: {
              widevine: {
                  laUrl: "https://mywidevineurl.com/drm",
                  headers: { 'header1': 'token1', 'header2': 'token2'},
                  withCredentials: false
              }
          }
      }, {
          uri: "myPlayreadyStream.mpd",
          drm: {
              playready: {
                  laUrl: "https://myplayreadyurl.com/drm"
               }
          }
      }, {
          uri: "myClearkeyStream.mpd",
          drm: {
              clearkey: {
                  keys: { "1234clear5678key" : "fefde00d-efde-adbf-eff1-baadf01dd11d", "5678clear1234key" : "baadf01dd11d-efde-adbf-eff1-fefde00d" }
              }
          }
      }, {
          uri: "https://path/to/mp4",
      }]

External Subtitle

User can set external subtitle via setExternalSubtitle(subtitle) API. The external subtitle can be set before the playback or during the playback. The parameter is externalSubtitleInfo object, please see as following:

Example:

    var externalSubtitle =   {
       uri: 'https://path/to/external/vtt/url.vtt',          
       lang: 'english',           
       default: true
    }
    player.setExternalSubtitle(externalSubtitle);

Low Latency

VisualOn HTML5+ player provides a lowLatency mode to fit to the situation with high real-time demand. User can enable lowLatency mode by setting the lowLatencyMode as true in “ advanced” object of configuration for initializing the player.

Example:

    var playerConfig = {
        playback: {
            autoPlay: true
        },
        advanced: {
            lowLatencyMode: true
        },
        logs: {
            logToConsole: false
        }
    };
    player.init(playerConfig);

Now lowLatency mode can only be used on chrome and safari.

Thumbnail

You can set the WebVTT thumbnail via the tracks in sourceConfig object

Example:

      tracks: [{
          uri: 'https://path/to/thumbnail/vtt/url.vtt',
          type: 'thumbnails'
      }]

You can use findNearestThumbnail(pos) to get a thumbniailInfo object of a specific media position.

Chromecast

To enable Chromecast the init(config) must be called successfully. See the following sample code to configure the receiver media player.

Example:

    var playerConfig = { 
        autoPlay: true, 
        cast: { 
            receiverAppId : 'B5BCD208' //VisualOn default customer receiver 
        } 
    }; 
    player.init(playerConfig)

VisualOn HTML5+ player provides custom receiver SDK. If you want to set up your own server to host the receiver by using VisualOn receiver SDK, refer https://developers.google.com/cast/docs/registration to register your cast application and get the application ID. The analytics data of Chromecast will be sent to your own server, otherwise, to VisualOn default analytics server by using VisualOn default customer receiver which is hosted by VisualOn and the application ID is B5BCD208. The application ID is used with API calls from the sender application.