Question 232116 in Html Question posted in
Some basic documentation can be found here.

HTML video element controls not show

I create a video element, and set controls = true, but controls not showing (even hover)

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

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

also set video element width is 100%
the container position is relative

How should I do to show the default video control

Tags:

2

Answers


  1. 0

    Could you please show some code? A player is usually like this:

    <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

    This may help you:
    https://www.w3schools.com/tags/tag_video.asp

    Login or Signup to reply.
  2. 0

    This code will create a video element with default controls. The video element will be positioned absolutely and will fill the entire screen. The event listeners will log a message to the console when the video starts playing or pauses.

    // Get the video element
const video = document.querySelector("video");

// Add event listeners to the video controls
video.addEventListener("play", function() {
  console.log("Video started playing");
});

video.addEventListener("pause", function() {
  console.log("Video paused");
});
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search