有没有办法从视频标签中获取当前字幕的文字?

时间:2015-08-17 05:35:38

标签: javascript jquery html5 html5-video video.js

我想获得当前的字幕'在播放视频期间的文本(并且实现自己的字幕块(即隐藏原始字幕)并且还以几种不同的方式使用该信息)。目前我使用videojs作为播放器。有没有办法从中获取当前标题的字符串?

5 个答案:

答案 0 :(得分:2)

是的,您可以在视频加载时添加 cuechange 事件监听器。这样可以获取当前曲目的字幕文本。 Here是我使用videojs的工作示例。

答案 1 :(得分:1)

此代码获取当前提示并放入<span>元素

(function(){

    var video = document.querySelector('video');
    var span = document.querySelector('span');

    if (!video.textTracks) return;

    var track = video.textTracks[0];
    track.mode = 'hidden';

    track.oncuechange = function(e) {

        var cue = this.activeCues[0];
        if (cue) {
            span.innerHTML = '';
            span.appendChild(cue.getCueAsHTML());
        }

    };
})()

以下是教程:Getting Started With the Track Element

答案 2 :(得分:0)

var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks; 
var textTrack = textTracks[0]; 
var kind = textTrack.kind // e.g. "subtitles"
var mode = textTrack.mode

试试这个

答案 3 :(得分:0)

使用HTML5视频API获取当前来源,使用/.拆分src以获取名称。

Media API

以上链接包含HTML5视频播放器中的所有可用API。你的插件使用HTML5视频播放器!

答案 4 :(得分:0)

解决方案:

    videojs("example_video_1").ready(function() {
        myvideo = this;

        var aTextTrack =  this.textTracks()[0];
        aTextTrack.on('loaded', function() {
            console.log('here it is');
            cues = aTextTrack.cues();   //subtitles content is here
            console.log('Ready State', aTextTrack.readyState()) 
            console.log('Cues', cues);
        });

        //this method call triggers the subtitles to be loaded and loaded trigger
        aTextTrack.show();
    });

结果:

Result

PS。找到代码here