0

I have working code in place that uses javascript/jquery, and now need to add captions, adding just the code necessary to add the track captions. I did not write the original code. Anyone?

I tried adding the html code for the vtt file. Previous developer wrote the code and did it all in js.

{% if (BaseImageName.Trim().ToLower().EndsWith(".mp4")) { %} 
  <div class="ProgramVideoWrapper">
     <video class="ProgramVideo" controls autoplay muted playsinline> . 
 </video>
    <span class="Title Mobile">{% DocumentName %}</span>
  </div>
  <script>
  require(['jquery'], function ($)
  {
    var baseName = '{% BaseImageName.Trim() %}';
    baseName = baseName.substr(0,baseName.length - 4);
    var folderPath = "media/Video/";
    var programVideo = $('.ProgramVideo'); 
    var fileResolution = "";
    var windowWidth = $('body').width();

    if (windowWidth <= 640)
      fileResolution += "Phone";
    else if (windowWidth < 800)
      fileResolution += "Tablet";
    else
      fileResolution += "Desktop";

    /* as of chrome v 66 must be muted */

    programVideo.prop("poster", folderPath + baseName + "_" + fileResolution + "_poster.jpg");
    programVideo.prop("src", folderPath + baseName + "_" + fileResolution + ".mp4");
    programVideo.prop("track src", folderPath + baseName + "_" + fileResolution + ".vtt");
    programVideo[0].play();

  });

  </script>
{% } else { %}
  <div class="ProgramImageWrapper">
    <img class="ProgramImage Desktop" data-src="/media/780x530_{% BaseImageName %}" 

alt="{% ImageAltText %}">
    <img class="ProgramImage Mobile" data-src="/media/70x400_{% BaseImageName %}" 

alt="{% ImageAltText %}">
    <span class="Title Mobile">{% DocumentName %}</span>
  </div>
{% } #%}

The video becomes small and does not play.

ladybugg333
  • 29
  • 2
  • Would something like this work? Do I also need to add a var for the captions? programVideo.addEventListener("loadedmetadata", function() { track = document.createElement("track"); track.kind = "captions"; track.label = "English"; track.srclang = "en"; track.src = "folderPath + baseName + "_" + fileResolution + ".vtt"; track.addEventListener("load", function() { this.mode = "showing"; video.textTracks[0].mode = "showing"; }); this.appendChild(track); }); – ladybugg333 Sep 11 '19 at 15:32
  • This is a working js. It just now needs the captions, and needs to be done via JS, instead of HTML. This page is part of a group of pages that use the same template. The captions are in a vtt file, in the same directory as the mp4. Same base name. I did not write this script. (written by previous developer) – ladybugg333 Sep 11 '19 at 15:32

0 Answers0