HTML 5 Video CC按钮 [英] Html 5 video cc button

问题描述

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

任何人都可以弄清楚为什么字幕和下载"按钮位于上面的屏幕截图中的位置，它的位置正确，所以我想知道，谷歌chrome更新是否引起了某些问题?只是精神上的哈哈.

Would anyone be able to shed some light as to why the Captions and Download button is positioned where it is in the screenshot above, It was positioned correctly so i'm wondering, did google chrome update which has caused something or am i just going mental haha.

到目前为止，我已经研究了阴影暗室元素，但没有成功将按钮恢复到其原始位置.

I have so far looked into shadow-doom elements but with no success in returning the buttons to their original position.

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

I'm also interested if others have had a similar problem and if any workarounds/solutions have been found, i am for the purpose of my project not allowed to create any custom controls for the video player so if that was a possible solution it is out :(

任何人的帮助，在此先感谢大家. :)

Any help will be greatly appreciated, thanks to everyone in advance. :)

浏览器是Chrome浏览器.

Browser is chrome.

推荐答案

因此，我为以后阅读此帖子并有类似问题的任何人找到了解决方案:

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

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

So I found a solution to this for anyone who reads this post in the future and has a similar issue:

The issue: the Video and a parent div was being positioned using
transform: translate(-50%, -50%); This for some reason did did not effect the video pseudo elements of the video specifically the extras menu

The solution: remove the above line of code from the parent div and replace with

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

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

and position the video in a similar way instead of using the transform translate

这篇关于HTML 5 Video CC按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！