Ways to make video controls visible following the initial click on the video

Question

Ways to make video controls visible following the initial click on the video

I have a collection of videos on my website and I would like them to display with a poster (thumbnail image) initially. The video controls should only appear once the user clicks on the video for the first time. Therefore, when the page is loaded, the controls should be hidden and then become visible upon user interaction.

Here is the JavaScript code snippet I experimented with (included within the header tag):

<script>
    document.getElementById("video1").addEventListener("click", setAttribute("controls", "true"));
</script>

Below is the HTML structure I used:

<div class="container1">
  <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1"> 
  </video>
</div>

javascript html css

Answer 1

Answer №1

The setAttribute method does not belong to the Window object; instead, it is associated with a specified element.

For more information, you can visit: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

To select the specific element, use methods like getElementById or getElementsByClassName.

In scenarios where you need to target the element that triggered the event, you can access it through event.target.

document.getElementById("video1").addEventListener(
    "click",
    (event) => event.target.setAttribute("controls", "true")
);

.video1 {
  background-color: rgb(200,200,200);
}

<div class="container1">
  <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1"> 
  </video>
</div>

Answer 2

The setAttribute method does not belong to the Window object; instead, it is associated with a specified element.

For more information, you can visit: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

To select the specific element, use methods like getElementById or getElementsByClassName.

In scenarios where you need to target the element that triggered the event, you can access it through event.target.

document.getElementById("video1").addEventListener(
    "click",
    (event) => event.target.setAttribute("controls", "true")
);

.video1 {
  background-color: rgb(200,200,200);
}

<div class="container1">
  <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1"> 
  </video>
</div>

Answer 3

Answer №2

Your implementation of the callback function in the event listener was incorrect, which is why it wasn't functioning properly.

Additionally, make sure to place your script at the end of the HTML body.

<div class="container1">
  <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1"> 
  </video>
</div>
<script>
const videoElement = document.getElementById("video1");
videoElement.removeAttribute("controls");
    videoElement.addEventListener("click", () => {
    videoElement.setAttribute("controls", "true");
    videoElement.play();
 });
    </script>

Answer 4

Your implementation of the callback function in the event listener was incorrect, which is why it wasn't functioning properly.

Additionally, make sure to place your script at the end of the HTML body.

<div class="container1">
  <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1"> 
  </video>
</div>
<script>
const videoElement = document.getElementById("video1");
videoElement.removeAttribute("controls");
    videoElement.addEventListener("click", () => {
    videoElement.setAttribute("controls", "true");
    videoElement.play();
 });
    </script>

Ways to make video controls visible following the initial click on the video

Answer №1

Answer №2

Similar questions

The image is not appearing on the webpage even though the online URLs are functioning correctly

What is preventing me from concealing my input field when its type is set to "file"?

Running JavaScript from Markdown - Dynamically generated webpage

Removing an embedded document from an array in MongoDB using Mongoose when the document's status is set to false

Transfer the photo and save it to my database

Struggling to apply size in percentage to several images used as a background

Guide to creating an HTML table with bokeh

I'm working with Angular 12, Bootstrap 5, and ngPrime, and I'm looking to overlap a p-dialog with another element in my project

Is it deemed as an anti-pattern to establish directives for styling?

Executing a click event on an HTML table dynamically created from an AJAX request

Next.JS reported that it "Executed a greater number of hooks compared to the previous render"

React Material-UI Multiple Select with Checkboxes not displaying initial selections as checked

The appearance of Bootstrap React Nextjs doesn't quite match what's shown in the documentation

Tips for changing a fullscreen HTML5 video appearance

Displaying PHP output within a JavaScript expression

Creating a dynamically changing AppBar component in material-ui-next React that responds to scroll events

Issue Alert: Inconsistencies with Google Scripts spreadsheets

Is there a way to remove the bold styling from text next to JavaScript?

ng-required is ineffective when used with number inputs that have a minimum value requirement

Encountering an ElementClickInterceptedException while trying to click the button on the following website: https://health.usnews.com/doctors