Google Chrome JavaScript append 不会添加所有节点


你好,我有一个简单的Javascript代码,可以使用Video.jsvideojs-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完全加载?

通过将videoJs版本从4.12更改为7.6.6修复,这是js链接:https://vjs.zencdn.net/4.12/video.js

相关内容

  • 没有找到相关文章

最新更新