How to customize caption settings?

As our open-source Video.js HLS Source Handler is based on Hls.js it is required that all caption settings are embedded in the stream VTT file.

If this is not the case, we provide the capability to override those caption settings.

All settings respect the WebVTT standard.

Hereunder are two examples of how to do so.

With Video.js

Add the captionConfig object:

<video id="demoplayer" class="video-js" controls>
  <source src="YOUR_PLAYLIST_URL" type="application/x-mpegURL">
</video>
<script>
  var options = {
    html5: {
      hlsjsConfig: {},
      captionConfig: {
        line: -1,
        align: 'center',
        position: 50,
        size: 40,
      },
    },
    dnaConfig: {},
  };
  var player = videojs("demoplayer", options);
</script>

With Brightcove

Add the following Name and Options:

In this article