HTML视频元素控件不显示

Question

我创建了一个视频元素，并将controls属性设置为true，但是控件没有显示（即使悬停）

if (!this._player) {
    this._player = document.createElement('video');
}

this._player.controls = true;
this._player.src = xxxxx;

还将视频元素的宽度设置为100% 容器的位置是relative

我应该怎么做才能显示默认的视频控件呢

Answer 1

这段代码将创建一个带有默认控件的视频元素。视频元素将被绝对定位，并填满整个屏幕。当视频开始播放或暂停时，事件监听器将在控制台上记录一条消息。

// 获取视频元素
const video = document.querySelector("video");

// 为视频控件添加事件监听器
video.addEventListener("play", function() {
  console.log("视频开始播放");
});

video.addEventListener("pause", function() {
  console.log("视频暂停");
});

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<video controls> 
    <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
</video>