HTML video element control does not display
P粉788765679
2023-08-18 12:54:43
<p>I created a video element and set the controls attribute to true, but the controls are not showing (even on hover)</p>
<pre class="brush:js;toolbar:false;">if (!this._player) {
this._player = document.createElement('video');
}
this._player.controls = true;
this._player.src = xxxxx;
</pre>
<p>Also set the width of the video element to 100%
The location of the container is relative</p>
<p>What should I do to display the default video controls</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This code will create a video element with default controls. The video element will be positioned absolutely and fill the entire screen. When the video starts playing or is paused, the event listener logs a message to the console.
// 获取视频元素 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>