Google chrome javascript 追加不添加所有节点

Question

你好，我有一个简单的 Javascript 代码，可以使用 Video.js 和 videojs-transcript 将视频转录附加到 div 中。它在 Firefox 中运行良好，但在 Google Chrome 中，当转录太长时，它会附加不到一半。此外，当我刷新时，它每次都会在不同的节点中停止。

产生错误的简单测试代码：

<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>

编辑：在 videojs-transcript 文件中，当我在 createTranscriptBody 函数中尝试 alert(cues.length) 时，它显示的内容比我在 Firefox 中得到的要少得多。

编辑 2：我发现问题出在 videojs-transcript.js 中的方法 createTranscriptBody 上。在 vtt 文件完全加载之前，它开始向 div 添加提示。有没有办法让它在不使用超时的情况下等待 vtt 完全加载？

Answer 1

通过将 videoJs 版本从 4.12 更改为 7.6.6 来修复，这是 js link： https://vjs.zencdn.net/4.12/video.js

Google chrome javascript 追加不添加所有节点

Google chrome javascript append doesn't add all nodes

html

javascript

video.js

interactive-transcript

videojs-transcript