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

Posted

技术标签:

【中文标题】如何使用 .mpd 文件中的 dash shaka-player 添加多个字幕?【英文标题】:How can be added multiple subtitles using dash shaka-player from a .mpd file? 【发布时间】:2016-02-15 13:43:19 【问题描述】:

总结:我不知道如何在 .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" minBand maxBand 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" band codecs="avc1.42c01e" />
       <Representation id="1" band codecs="avc1.42c01e" />
       <Representation id="2" band 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" minBand maxBand 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" band 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" band>
             <BaseURL>MySubtitle.el.vtt</BaseURL>
         </Representation>
    </AdaptationSet>

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

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

【问题讨论】:

【参考方案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) 中,以便用户可以选择合适的字幕。

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

【讨论】:

【参考方案2】:

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

【讨论】:

以上是关于如何使用 .mpd 文件中的 dash shaka-player 添加多个字幕?的主要内容,如果未能解决你的问题,请参考以下文章

如何在请求标头并获得 HTTP 错误 403 时使用 youtube-dl 下载 MPEG Dash(mpd 文件)

如何从 mp4 视频创建 .mpd mpeg dash 文件

如何添加加载程序来处理 .mpd 和 .mp4s 文件类型(破折号媒体文件)?

播放 Dash 或 .mpd 视频 react-native(IOS)

如何使用 apache 设置 mpeg dash 服务器?

MPEG-DASH 和分段 mp4