0

Here is my video code:

<video id="select-plan-vid" autoplay="" controlslist="nodownload" src="myvideo.mp4"></video>

The controls are hidden (correct), BUT I would still like users to be able to pause/play the video by clicking on it (or by pressing space bar, as I'm used to that method personally). I don't like that users can't pause it if they want to do so.

EDIT:

I have attempted Zayadur's answer; here is my javascript (put in the header of my page):

<script>
window.onload = function () {
  
    var clickPlay = document.getElementById("select-plan-vid");

    clickPlay.addEventListener("click", function () {
        if (video.paused == true) {
            video.play();
        } else {
            video.pause();
        }
    });
}
</script>

(Currently not working)

Drewdavid
  • 3,071
  • 7
  • 29
  • 53

2 Answers2

1

You can add a click listener and play / pause using javascript. Check this answer for reference: https://stackoverflow.com/a/18855793/11578154

Vincent
  • 482
  • 4
  • 15
  • Thanks - this might have been better as a comment - but I did find an answer on that page that worked for me! – Drewdavid Apr 27 '22 at 00:07
0

You can use JS to accomplish this.

This function targets id="video" and adds an event listener that tracks clicks.

window.onload = function () {
  
    var clickPlay = document.getElementById("video");

    clickPlay.addEventListener("click", function () {
        if (video.paused == true) {
            video.play();
        } else {
            video.pause();
        }
    });
}

And then you just add id="tag" to your video. I suggest customizing the id's to avoid redundancy. Your exercise now would be to see how you could capture the spacebar event.

zayadur
  • 541
  • 4
  • 9
  • Thanks for your answer! This isn't working, however. I've updated my question to include your code for troubleshooting. Thanks again. – Drewdavid Apr 26 '22 at 23:29
  • Did you link everything correctly? Your HTML tag should read: – zayadur Apr 27 '22 at 01:22
  • Ok thanks. Hm, I was hesitant to use the id "video" since it is so generic. Do the `video.paused` and `video.play` need to match the id (e.g. select-plan-vid.paused); or does the ID need to be "video" for this to work? You can see my code above. – Drewdavid Apr 27 '22 at 15:51
  • I failed to look at your code yesterday, sorry about that. When I tried using the `select-plan-video` selector, my console threw an error and it looks like it's cutting off reading the element at the first dash `-`. `select is not defined`. I'm not sure how JS handles this scenario, so my recommendation would be to use camelCase when naming your selectors to avoid this issue. Try using `selectPlanVideo` as the name of your `id`. You also need to replace `video.` with the same name in your logic. If you run into behavior like this in the future, check your browser console for the errors. – zayadur Apr 27 '22 at 18:05