Html 5 视频抄送按钮

Question

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%);
}

谁能解释一下为什么字幕和下载按钮位于上面屏幕截图中的位置，它的位置正确所以我想知道 google chrome 更新导致了什么，或者我只是精神错乱了哈哈。

到目前为止，我已经研究过 shadow-doom 元素，但没有成功将按钮恢复到原来的位置。

我也很想知道其他人是否遇到过类似的问题，如果发现了 workarounds/solutions，我出于我的项目的目的不允许为视频播放器创建任何自定义控件，所以如果这是一个可能的解决方案:(

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

浏览器是chrome。

Answer 1

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

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

解决方法： 将上面这行代码从parent div 中去掉，替换为

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

并以类似的方式定位视频，而不是使用变换 translate

Html 5 视频抄送按钮

Html 5 video cc button

html

css

google-chrome

html5-video

angular