How to add Custom Controls to html5 <video> player

JavaScript
1

I would like to add custom controls to my html5 video player, so as to limit the number of manual replays of a video. Maybe the simplest solution would be to hide the play button after X amount of times it is selected, via jQuery/javascript code addition?

I look forward to any help/suggestions/examples

2

Hi @ChrisjChrisj, I don’t think you can hide the play button specifically – only the complete controls, which can be done by simply setting its controls = false:

const limitReplays = (videoElement, limit) => {
  let count = 0

  const handleProgress = () => {
    if (videoElement.ended) {
      count++
    }

    if (count === limit) {
      // Hide the controls and clean up the event listener
      videoElement.controls = false
      videoElement.removeEventListener('timeupdate', handleProgress)
    }
  }

  videoElement.addEventListener('timeupdate', handleProgress)
}

// Pass the desired video element(s):
document
  .querySelectorAll('video')
  .forEach(videoElement => limitReplays(videoElement, 5))

As for custom controls, there’s a thorough guide here on the MDN.

3

Much thanks for your reply.
So, your example counts then limits the plays to 5?
I added your code to the html file with holds this code:

<video id="my-video1" controls autoplay style="width:100%; height:100%;" poster="{{THUMBNAIL}}" disablePictureInPicture controlsList="nodownload">
    <?php if (!empty($pt->video_1080)) { ?>
    <source src="{{VIDEO_LOCATION_1080}}" type="{{VIDEO_TYPE}}" data-quality="1080p">
    <?php } ?>
    <?php if (!empty($pt->video_720)) { ?>
    <source src="{{VIDEO_LOCATION_720}}" type="{{VIDEO_TYPE}}" data-quality="720p">
    <?php } ?>
    <?php if (!empty($pt->video_480)) { ?>
    <source src="{{VIDEO_LOCATION_480}}" type="{{VIDEO_TYPE}}" data-quality="480p">
    <?php } ?>
    <?php if (!empty($pt->video_360)) { ?>
    <source src="{{VIDEO_LOCATION_360}}" type="{{VIDEO_TYPE}}" data-quality="360p">
    <?php } ?>
    <?php if (!empty($pt->video_240)) { ?>
    <source src="{{VIDEO_LOCATION_240}}" type="{{VIDEO_TYPE}}" data-quality="240p">
    <?php } ?>
    Your browser does not support HTML5 video.
    </video>

but, I was still able to replay 5+ times.
I look forward to any additional guidance.

4

Well I don’t see any JS in your code… if you just copy / pasted my snippet to your page though then my guess would be that you included it in the head; you can only query elements that actually exist when the script runs, so it should be at the end of the body (or wrapped in a DOMContentReady event listener).

5

Thanks again.
I added your code to end of the body, like so:

    <script>
	const limitReplays = (videoElement, limit) => {
	  let count = 0

	  const handleProgress = () => {
	    if (videoElement.ended) {
	      count++
	    }

	    if (count === limit) {
	      // Hide the controls and clean up the event listener
	      videoElement.controls = false
	      videoElement.removeEventListener('timeupdate', handleProgress)
	    }
	  }

	  videoElement.addEventListener('timeupdate', handleProgress)
	}

	// Pass the desired video element(s):
	document
	  .querySelectorAll('video')
	  .forEach(videoElement => limitReplays(videoElement, 5))
  </script>

</body>
</html>

without successful outcome. Any additional ideas are welcomed

6

IDK it works for me… try adding breakpoints or console.log()s to see if the limitReplays() function gets called with the desired video elements, and subsequently handleProgress(). Also as there are some data-* attributes on your source elements, is there some other scripting at play that might interfere with it?

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.