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>