Html 5 视频抄送按钮答案

【问题标题】：Html 5 video cc buttonHtml 5 视频抄送按钮
【发布时间】：2019-02-23 00:16:34
【问题描述】：

HTML

<video [src]='videoURL' controls #videoPlayer (ended)="onVideoEnd($event)" 
[style.maxHeight]="screen.data.height">
<track label="English subtitles" kind="subtitles" srclang="en" 
[src]="screen.data.ccs"/>
</video>

CSS

video {
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

谁能解释一下为什么“字幕和下载”按钮位于上面屏幕截图中的位置，它的位置正确，所以我想知道，谷歌浏览器更新是否导致了某些事情或者我是只是精神上的哈哈。

到目前为止，我已经研究了 shadow-doom 元素，但没有成功将按钮返回到其原始位置。

如果其他人有类似的问题，我也很感兴趣，如果找到任何变通办法/解决方案，我出于我的项目的目的，不允许为视频播放器创建任何自定义控件，所以如果这是可能的解决方案出来了:(

任何帮助将不胜感激，在此先感谢大家。 :)

浏览器是chrome。

【问题讨论】：

标签： html css angular google-chrome html5-video

【解决方案1】：

因此，我为以后阅读这篇文章并遇到类似问题的任何人找到了解决方案：

问题：正在定位视频和父 div使用
transform: translate(-50%, -50%); 由于某种原因，这并没有影响视频的视频伪元素，特别是附加菜单

解决方案：从父 div 中删除上面的代码行并替换为

position: absolute;
top: 50%;
left: 50%;

并以类似的方式定位视频，而不是使用转换翻译

【讨论】：