Question

我正在使用html5视频。在FireFox中，它运行良好，但在铬和野生动物园中，它显示了一个厚的黑色条形顶部和底部。如何摆脱这些酒吧？

代码，

<video autoplay loop="loop" onended="this.play()" width="100%">
     <source src="videos/video.mp4" type="video/mp4"/>
     <source src="videos/video.webm" type="video/webm" />
</video>

提前致谢

Answer 1

查看包含视频标记的标记的尺寸和/或CSS。这可能是一个div。我有一个高度：100％。一旦我删除它，它解决了问题。

希望它有所帮助。

Answer 2

对我来说，它是export function addTextToBody(text) { const div = document.createElement('div'); div.textContent = text; document.body.appendChild(div); }。在已解决问题的父元素上设置line-height。

Answer 3

我有同样的问题。我通过为视频标记设置css样式来解决此问题：

outline: none;

Answer 4

实际视频中是否已经存在黑棒？我的解决方案是在16/9 iframepage中播放视频并调整顶部（..- px），左侧（..- px），高度（..％）（OR宽度％），直到它们在外部进行过度调整。 fullscreen-bg .css

删除Chrome和Safari浏览器中html5视频顶部和底部的黑条

4 个答案: