JW Player 6 doesn’t currently* support WebVTT captions / subtitles when playing video on mobile iOS7. * the current version being 6.7.4071

Here’s how you can fix that…

1) Set up JW Player normally, including the tracks block where applicable:

jwplayer("...").setup({...});

2) Get a handle to the JW instance

var jwp = jwplayer("...");

3) Attach the following onPlay listener

jwp.onPlay(function() {
  if(jwplayer.utils.isIOS()){
    /* Get the video */
    var oVid = jwp.container.getElementsByTagName("video")[0];
    if(oVid){
      /* Remove existing tracks */
      var oTracks = oVid.getElementsByTagName("track");
      if(oTracks){
        for(var tr=oTracks.length,tre=0; tr>=tre; tr--){
          if(oTracks[tr]) oVid.removeChild(oTracks[tr]);
        }
      }
      /* Add this playlist item tracks */
      var oPLI = jwp.getPlaylistItem();
      if(oPLI && oPLI["tracks"] && oPLI["tracks"].length>0){
        for( var tr in oPLI["tracks"]){
          var oTR = oPLI["tracks"][tr];
          var oTrackTag = document.createElement("track");
          for(var attr in oTR){
            var sAttr = (attr=="file"?"src":attr);
            if(attr!="default"||(attr=="default" && oTR[attr]==true)) oTrackTag.setAttribute(sAttr,oTR[attr]);
          }
          oVid.appendChild(oTrackTag);
        }
      }
    }
  }
});

That’s it! Enjoy captioned video on your iPhone.

Comments are closed.