Question

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

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

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

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

以下是我们的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文件中显示的字幕，并将其包含在你的视频标签中 <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>。 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"
}

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

1 个答案: