<title>{{data['play_title']}}</title>
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />

<body bgcolor='black'>
<video id=player width=960 height=540 class="video-js vjs-default-skin vjs-16-9" autoplay controls>
  <source
     src="{{data['play_source_src']}}"
     type="{{data['play_source_type']}}" />
</video>
</body>

<script>
var subtitle_src = "{{data['play_subtitle_src']}}";
let options = {
    html5: {
      nativeTextTracks: false
    },
    playbackRates: [.5, .75, 1, 1.5, 2],
    controls: true,
    preload: "auto",
    controlBar: {
        playToggle: false,
        pictureInPictureToggle: false,
        remainingTimeDisplay: true,
        qualitySelector: true,
    }
};
let player = videojs('player', options);

player.ready(function(){
  // set subtitle track
  console.log(subtitle_src);
  if (subtitle_src != "") {
    var suburl = subtitle_src.replace(/&amp;/g, '&');
    console.log(suburl);
    let captionOption = {
      kind: 'captions',
      srclang: 'ko',
      label: 'Korean',
      src: suburl,
      mode: 'showing'
    };
    player.addRemoteTextTrack(captionOption);

    var settings = this.textTrackSettings;
    settings.setValues({
        "backgroundColor": "#000",
        "backgroundOpacity": "0",
        "edgeStyle": "uniform",
    });
    settings.updateDisplay();
  }
  else {
    var tracks = player.textTracks();
    console.log(tracks.length);
    for (var i = 0; i < tracks.length; i++) {
      var track = tracks[i];
      console.log(track);
    }
  }
});

player.play();
</script>
