Question

我想写一些脚本来阅读HTML5视频中的字幕，并为它们提供不同的视图（在视频播放器之外）。 HTML5视频示例位于：https://www.youtube.com/watch?v=DNi60fyYjCA。

字幕似乎内置于视频中，但页面上没有元素。我想我可以通过cuechange事件或HTMLVideoElement属性track或textTracks来获取这些字幕。但是我得到了任何东西（.track和.textTracks是空的，没有在视频元素上触发cuechange事件）。

使用HTML5播放器时，我是否可以阅读视频中内置的字幕？我在这种情况下使用chrome，但可以使用不同的浏览器。

格拉西亚斯

Answer 1

YouTube会在播放器中的span元素中显示Captions / Subtitles a。如果你想看看自己通过这种方式查看文档： body -> .body-container -> #page-container -> #page -> #player -> #player-mole-container -> #player-api -> .html5-video-player -> .ytp-player-content -> #caption-window-0 -> .caption-window-transform -> span.captions-text -> "subtitles"

（坦率地说：

我使用MutationObserver来监控字幕，一旦启用了字幕（通过按.ytp-subtitles-button），下面的代码似乎可以正常工作：

// select the target node
var target = document.querySelector('.captions-text');
var video = document.querySelector('video');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
    console.log(video.currentTime);
    console.log(target.innerText);
  });    
});

// pass in the target node, as well as the observer options
observer.observe(target, {
  attributes: true
});

）

访问内置于视频中的HTML5字幕

1 个答案: