Integration into third party video frameworks

Our example page already has tests and code for a variety of different frameworks, but it can't cover everything. Here you can add and read some more examples.

Information here can be submitted by users allowing to cover a broader range, but they also aren't reviewed before publication or may become out-dated.

FlowPlayer: Switch Subtitles

Contributed by Teranode:

Assuming this.subtitles contains the subtitle URL, you can use the default flowplayer subtitle plugin and within the api do add this:

flowplayer((api, root) => {
    ... /* other api code */
    flowplayer.bean.on(root, 'click', '.fp-subtitle-menu [data-subtitle-index]', function(ev) {
        var idx = ev.target.getAttribute('data-subtitle-index');
        if (idx === '-1') return window.subtitleInstance.freeTrack();
        window.subtitleInstance.setTrackByUrl(api.video.subtitles[idx].src)
    });
});

And within the player instance itself you would put in the clip section:

subtitles: [
   { "default": true, kind: "subtitles", srclang: "en", label: "English", src: this.subtitles[0].path }
], 

JWPlayer

<div style="width: 800px; height: 500px;">
  <div id="player">Loading the player...</div>
</div>

<script src="https://your-link-to-the-jwp-library.js"></script>
<script>
   // Player Setup
   var player = jwplayer('player').setup({
       file: 'https://mirror.clarkson.edu/blender/demo/movies/BBB/bbb_sunflower_1080p_30fps_normal.mp4',
       volume: 10,
       autostart: false,
       width: 854,
       height: 480
   });

   player.on('ready', function () {
       var video = player.getContainer().querySelector('video');
       window.SubtitlesOctopusOnLoad = function () {
           var options = {
               video: video,
               subUrl: '/JavascriptSubtitlesOctopus/subtitles/test.ass',
               fonts: ['/JavascriptSubtitlesOctopus/fonts/Arial.ttf', '/JavascriptSubtitlesOctopus/fonts/TimesNewRoman.ttf'],
               workerUrl: '/JavascriptSubtitlesOctopus/assets/js/subtitles-octopus-worker.js'
           };
           window.octopusInstance = new SubtitlesOctopus(options); // You can experiment in console
       };
       if (SubtitlesOctopus) {
           SubtitlesOctopusOnLoad();
       }
   });
</script>