如何使用 .mpd 文件中的 dash shaka-player 添加多个字幕？

Question

总结：我不知道如何在 .mpd / shaka-player 中添加（和显示）多个字幕选择。

我已经设置了一个网站通过互联网提供视频，使用 shaka-player 库，以便谷歌浏览器用户可以观看它们。因此，使用以下教程，我可以设法部署一个简单的演示视频：

https://shaka-player-demo.appspot.com/docs/tutorial-player.html

在我的情况下，所有 .mp4 音频和视频文件（已加密），以及希腊语和英语字幕的 .vtt 文件（未加密）都在同一个文件夹（网络文件夹）中；根据上述教程，在该文件夹中还有用于加载视频的 .mpd 文件。

根据上述教程，.mpd 文件的加载方式如下：

// Construct a DashVideoSource to represent the DASH manifest.
var mpdUrl = 'https://turtle-tube.appspot.com/t/t2/dash.mpd';
var estimator = new shaka.util.EWMABandwidthEstimator();
var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);
// Load the source into the Player.
player.load(source);

我还使用以下 .mdp 文件添加了字幕支持：

<?xml version="1.0" encoding="utf-8"?>
<MPD xmlns:xsd="http://www.w3.org/2001/XMLSchema"      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" type="static"      xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011      http://standards.iso.org/ittf/PubliclyAvailableStandards/MPEG-     DASH_schema_files/DASH-MPD.xsd" mediaPresentationDuration="PT7120S"      maxSegmentDuration="PT10S" minBufferTime="PT10S"      profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"      xmlns="urn:mpeg:dash:schema:mpd:2011">
   <Period>
     <AdaptationSet mimeType="video/mp4" minBandwidth="247684" maxBandwidth="848398" segmentAlignment="true" startWithSAP="1">
       <ContentComponent id="1" contentType="video" />
       <SegmentTemplate initialization="Video$RepresentationID$.mp4"  media="Video$RepresentationID$-$Number$.mp4" duration="10" startNumber="1" />
       <Representation id="0" bandwidth="247684" codecs="avc1.42c01e" />
       <Representation id="1" bandwidth="511973" codecs="avc1.42c01e" />
       <Representation id="2" bandwidth="848398" codecs="avc1.42c01e" />
       <ContentProtection schemeIdUri="urn:mpeg:dash:mp4protection:2011" value="cenc" />
       <ContentProtection schemeIdUri="urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed" />
     </AdaptationSet>
     <AdaptationSet mimeType="audio/mp4" minBandwidth="65311" maxBandwidth="65311" segmentAlignment="true" startWithSAP="1">
       <ContentComponent id="1" contentType="audio" />
       <SegmentTemplate initialization="Audio$RepresentationID$.mp4" media="Audio$RepresentationID$-$Number$.mp4" duration="10" startNumber="1" />
       <Representation id="3" bandwidth="65311" codecs="mp4a.40.5" />
       <ContentProtection schemeIdUri="urn:mpeg:dash:mp4protection:2011" value="cenc" />
       <ContentProtection schemeIdUri="urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed" />
     </AdaptationSet>

     <AdaptationSet contentType="text" lang="el" mimeType="text/vtt">
         <Role value="main" />
         <Representation id="4" bandwidth="1000">
             <BaseURL>MySubtitle.el.vtt</BaseURL>
         </Representation>
    </AdaptationSet>

    <AdaptationSet contentType="text" lang="en" mimeType="text/vtt">
        <Representation id="5" bandwidth="1000">
            <BaseURL>MySubtitle.en.vtt</BaseURL>
        </Representation>
    </AdaptationSet>
    </Period>
</MPD>

在 Google Chrome 网络浏览器中，我可以播放电影，我可以看到几个控件，例如音量和“CC”，即字幕；因此，当我按下“CC”时，我可以激活字幕；但是，我在 .mpd 文件中配置了两种字幕语言（希腊语和英语），但按下“CC”控件只能激活或停用希腊语字幕（在 .mpd 文件中描述的第一个 .vtt 字幕文件以上），但我不知道如何激活或显示菜单以选择不同可用语言的字幕。

Answer 1

上述 .mpd 文件包含两种不同字幕语言的两个条目，并且是正确的。选择一个或另一个字幕的方法是使用方法：

getTextTracks()
selectTextTrack(id)

即：

// Load the source into the Player.
player.load(source).then(function() {
var textTracks = player.getTextTracks();
console.log("TextTrack Len: " + textTracks.length);
// Selecting the second text track got from
// getTextTracks()
player.selectTextTrack(textTracks[1].id);
video.play();
});

当然，有必要将此逻辑添加到用户界面控件 (HTML5) 中，以便用户可以选择合适的字幕。

在播放器的工具栏中添加一个新控件（其中有音量、放大等控件）会很好，它执行此功能，但我不知道如何添加它。

Answer 2

您似乎无法在视频播放器的工具栏中添加更多选项；因此，您可以使用 HTML 添加菜单选项，然后调用 shaka-player 库的相应方法；比如“getTextTracks”、“selectTextTrack”、...