1

Hello I have a simple Javascript code to append a video transcription into a div using Video.js and videojs-transcript. It works fine in Firefox but in Google Chrome when the transcription is too long it appends less than half of it. Also when I refresh it stops every time in different node.

A simple test code to produce the bug: 

<head>
    <script src="https://vjs.zencdn.net/4.12/video.js"></script>
    <script src="https://walsh9.github.io/videojs-transcript/dist/videojs-transcript.js"></script>
</head>
<body>
    <video id="video" crossorigin="anonymous">
          <source src="https://pvclouddev.blob.core.windows.net/filescontainer/15TestLarge_1587760757304.mp4" type="video/mp4">
          <track kind="captions" src="https://pvclouddev.blob.core.windows.net/filescontainer/790d31e9-d38d-48f4-87d5-9e9959acc39a.vtt" srclang="en" label="English" default>
    </video>
    <div id="transcript"></div>
    <script>
        var video = videojs('video').ready(function(){
          // Set up any options.
          var options = {
            showTitle: false,
            showTrackSelector: false,
          };

          // Initialize the plugin.
          var transcript = this.transcript(options);

          // Then attach the widget to the page.
          var transcriptContainer = document.querySelector('#transcript');
          transcriptContainer.appendChild(transcript.el()); 
        }); 
    </script>
</body>

Edit: In the videojs-transcript file when I try to alert(cues.length) in createTranscriptBody function it shows much less than what I got in Firefox.

Edit 2: I found out that the problem is with the method createTranscriptBody in videojs-transcript.js. It starts adding cues to the div before the vtt file is totally loaded. Is there any way to make it wait for the vtt to get fully loaded without using the timeout?

kmoser
  • 8,780
  • 3
  • 24
  • 40
Firas BC
  • 13
  • 7
  • there are lots of errors in the captions file. many cues have start times before previous cues which is invalid, as are times like `00:03:60.013`. can you replicate with a valid file? – misterben May 10 '20 at 15:11
  • @misterben i generated a new valide vtt file and edited the test code but the same problem . – Firas BC May 10 '20 at 20:09
  • Which repository and version are you using for videojs-transcript. Please see my SO question about this: https://stackoverflow.com/questions/69697954/which-videojs-transcript-and-repo-version-should-be-used – John Pankowicz Oct 24 '21 at 15:02

1 Answers1

0

Fixed by changing the videoJs version from 4.12 to 7.6.6 and this is the js link : https://vjs.zencdn.net/4.12/video.js

Firas BC
  • 13
  • 7