search

Home  >  Q&A  >  body text

HTML video element control does not display

<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>
P粉788765679P粉788765679546 days ago652

reply all(1)I'll reply

  • P粉921130067

    P粉9211300672023-08-19 11:00:55

    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>

    reply
    0
  • Cancelreply