使用json在HTML5视频播放器中显示字幕

Question

我们需要创建一个与下面的参考网站相同的视频播放器：

http://www.vagalume.com.br/selena-gomez/love-you-like-a-love-song.html

我们需要实现的是创建一个动态播放带有字幕的youtube视频的HTML5播放器。

我在上面添加了一个链接，这是我们的参考链接，我们需要在参考网站中提供相同的功能。

这是我们的HTML页面代码：

<code>
$(document).ready(function() {
    $('audio, video').mediaelementplayer({
        alwaysShowControls: true,
        videoVolume: 'horizontal',
        features: ['playpause','progress','volume','fullscreen'],
        startLanguage: 'en'
    });
});
</code>

我们的视频播放器代码：

<code>
video id="video" preload="metadata" controls="controls">
            source type="video/youtube" src="https://www.youtube.com/watch?v=FV4cwmM79NY">
        /video>
</code>

这是我们用于动态添加字幕的JavaScript代码。

<code>
(function() {
    var video = document.getElementById("video"), i, track,     loadcues = document.getElementById("loadcues"), hideTracks = function() {
            for (i = 0; i < video.textTracks.length; i++) {
                video.textTracks[i].mode = "hidden";
            }
        };
    trackdisplay();
    function trackdisplay(){
    hideTracks();
        track = video.addTextTrack("captions", "English", "en");
        track.mode = "showing";
        track.addCue(new VTTCue(0, 12, "Loaded Cues"));
        track.addCue(new VTTCue(18.7, 21.5, "This blade has a dark past."));
        track.addCue(new VTTCue(22.8, 26.8, "It has shed much innocent blood."));
        track.addCue(new VTTCue(29, 32.45, "You're a fool for traveling alone, so completely unprepared."));
        track.addCue(new VTTCue(32.75, 35.8, "You're lucky your blood's still flowing."));
        track.addCue(new VTTCue(36.25, 37.3, "Thank you."));
        track.addCue(new VTTCue(38.5, 40, "So..."));
        track.addCue(new VTTCue(40.4, 44.8, "What brings you to the land of the gatekeepers?"));
        track.addCue(new VTTCue(46, 48.5, "I'm searching for someone."));
        track.addCue(new VTTCue(49, 53.2, "Someone very dear? A kindred spirit?"));
        track.addCue(new VTTCue(54.4, 56, "A dragon."));
        track.addCue(new VTTCue(58.85, 61.75, "A dangerous quest for a lone hunter."));
        track.addCue(new VTTCue(62.95, 65.87, "I've been alone for as long as I can remember."));
        track.addCue(new VTTCue(118.25, 119.5, "We're almost done. Shhh..."));
}
    //loadcues.addEventListener("click", function() {
    //});
}());
</code>

提前感谢

Answer 1

我在Html5Rocks上找到了一种方法，它包括将您向我们展示的字幕制作在.vtt文件中，并将其作为CCD_ 2。其中label是字幕的语言，src是.vtt文件所在的位置。您可以获得所有新的vtt提示，并将它们从js中删除，然后将它们添加到您想要的文件中。所以你的视频应该看起来像这个

     <code>
    video id="video" preload="metadata" controls="controls">
                source type="video/youtube" src="https://www.youtube.com/watch?v=FV4cwmM79NY">
<track kind="subtitles" label="English subtitles" src="*VTT file's place*" srclang="en" default></track>

 /video>
    </code>

编辑：对于JSON，您可以执行

multiCell
00:01:15.200 --> 00:02:18.800
{
"title": "Multi-celled organisms",
"description": "Multi-celled organisms have different types of cells that perform specialised functions.
  Most life that can be seen with the naked eye is multi-cellular. These organisms are though to
  have evolved around 1 billion years ago with plants, animals and fungi having independent
  evolutionary paths.",
"src": "multiCell.jpg",
"href": "http://en.wikipedia.org/wiki/Multicellular"
}
insects
00:02:18.800 --> 00:03:01.600
{
"title": "Insects",
"description": "Insects are the most diverse group of animals on the planet with estimates for the total
  number of current species range from two million to 50 million. The first insects appeared around
  400 million years ago, identifiable by a hard exoskeleton, three-part body, six legs, compound eyes
  and antennae.",
"src": "insects.jpg",
"href": "http://en.wikipedia.org/wiki/Insects"
}