时间戳

首页 > 解决方案 > 如何为 amp-ima-video 添加隐藏式字幕？

html - 如何为 amp-ima-video 添加隐藏式字幕？

问题描述

我正在尝试为 amp 视频添加隐藏式字幕。但是，我需要包含一个前贴片广告，因此我没有使用 amp-video 标签，而是使用 amp-ima-video 标签：https ://amp.dev/documentation/components/amp-ima-video/ . 该文档说，使用 track 标签支持隐藏字幕，其方式与普通 html 视频或 amp 视频相同。

当我尝试使用 amp-video 标签时，我可以显示隐藏式字幕，并且视频控件中有一个按钮可以切换字幕。但是，当我使用相同的代码，但将 amp-ima-video 标签换成 amp-video 标签时，隐藏式字幕不会出现。此外，当使用 amp-video 标签时，这些控件甚至没有省略号按钮，用户可以从该省略号按钮导航到隐藏式字幕按钮。

我尝试对视频、amp-video 和 amp-ima-video 标签使用类似的代码。唯一的区别是 amp-ima-video 标签需要一个指向您要播放的广告的数据标签属性，这似乎是有效的。

这是 amp-video 代码，它在控件中显示字幕和字幕按钮：

      <amp-video controls
        width="640"
        height="360"
        layout="responsive">
        <source src="https://nbcnewsencoding.akamaized.net/nbcnews/video/2019/10/tdy_news_craig_magic_johnson_191028_1178592090.mp4">
        <track default label="English" kind="subtitles" srclang="en" src="/test-captions.vtt">
        <div fallback>
          <p>This browser does not support the video element.</p>
        </div>
      </amp-video>

这是 amp-ima-video 代码，它不显示字幕或有字幕按钮：

      <amp-ima-video controls
         width="640"
         height="360"
         layout="responsive"
         data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=">
        <source src="https://nbcnewsencoding.akamaized.net/nbcnews/video/2019/10/tdy_news_craig_magic_johnson_191028_1178592090.mp4">
        <track default label="English" kind="subtitles" srclang="en" src="/test-captions.vtt">
       </amp-ima-video>

amp-ima-video 没有字幕或字幕控件，但它应该有。

标签： htmlvideohtml5-videoamp-htmlclosed-captions

解决方案

将default属性添加到<amp-ima-video>标签。

例子：

<track default label="English" kind="subtitles" srclang="en" src="/subs/test.vtt" />

推荐阅读