如何在AMP（Azure Media Player）中更改隐藏式字幕位置

AMP的<amp-video>组件本身没有提供直接调整字幕位置的属性，但可以通过自定义CSS实现，这是最简便的原生方式，无需额外工具或插件。

具体实现步骤： #

1. 确保字幕已正确加载
   先在<amp-video>中配置好字幕轨道，示例代码：

   <amp-video controls width="640" height="360" layout="responsive">
     <source src="your-video.mp4" type="video/mp4">
     <track kind="subtitles" label="中文" src="subtitles.vtt" srclang="zh" default>
   </amp-video>
   

2. 用CSS定位字幕容器
   在AMP允许的<style amp-custom>标签内，针对浏览器的媒体字幕容器伪类修改样式：

   • 将字幕置于顶部：

     amp-video ::-webkit-media-text-track-display,
     amp-video ::-moz-media-text-track-display {
       top: 0 !important;
       bottom: auto !important;
       text-align: center;
       background: rgba(0,0,0,0.7); /* 可自定义背景增强可读性 */
     }
     

   • 将字幕置于中部：

     amp-video ::-webkit-media-text-track-display,
     amp-video ::-moz-media-text-track-display {
       top: 50% !important;
       bottom: auto !important;
       transform: translateY(-50%);
       text-align: center;
       background: rgba(0,0,0,0.7);
     }
     

3. 补充注意事项

   • 必须使用<style amp-custom>标签编写自定义样式，这是AMP允许的唯一自定义样式方式。
   • 同时添加-webkit-和-moz-前缀可兼容Chrome、Safari、Firefox等主流浏览器。
   • 使用!important是为了覆盖AMP内置的字幕底部定位样式，确保自定义规则生效。
   • 还可通过::cue伪元素单独调整字幕文字的颜色、字体大小等样式，配合容器定位达到更理想的展示效果。

内容的提问来源于stack exchange，提问作者Akios Dev