javascript - HTML5 视频 : How to Cover Controllers with a poster

Question

我正在使用 HTML5 从后端加载视频。 UX 需要覆盖整个 HTML5 视频播放器(包括 Controller )的封面图像。问题是当我使用海报属性加载封面图像时，它不会覆盖 Controller 。就像他们的 z-index 比海报高一样。请参见下图:

如何让海报图像也覆盖 Controller ？

Answer 1

这是一个简单的解决方案。

1) 从视频元素中删除controls属性

2) 单击视频时显示控件，例如 onclick="this.controls = true" 或在事件监听器中，例如

var video = document.getElementById('video');
video.addEventListener('click', function(){
    video.controls = true;
}, false);

3) 如果您不想在视频尚未加载时显示控件，可以检查其 readyState https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState