HTML5 视频：如何用海报覆盖控制器答案

【问题标题】：HTML5 Video: How to Cover Controllers with a posterHTML5 视频：如何用海报覆盖控制器
【发布时间】：2020-02-10 22:51:55
【问题描述】：

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

如何让海报图像也覆盖控制器？

【问题讨论】：

【解决方案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

【讨论】：