Help with showing HTML5 native video player 'controls' upon replay only

JavaScript
1

I’m working with an HTML5 webcam web script, that records, plays and uploads successfully. After recording the player instantly replays the recording on the screen.
I’m trying to see if it’s possible to only display the HTML5 native video player ‘controls’ upon replay.
Currently, when the webcam is accessed and the code begins with:

<video controls><video>

the player shows the pause button, timer, volume, full screen option. Is there a way to not show the timer? If not, is there a way to only show the ‘controls’ upon the instant replay?

Here’s my current code:

         <video></video>

		<button class="start" disabled>Start</button>
         <button class="stop" disabled>Stop</button>
         <button class="upload" disabled>Upload</button>

         <script>
            const video = document.querySelector('video')
            const startvideo = document.querySelector('.start')
            const stopvideo = document.querySelector('.stop')
            const upload = document.querySelector('.upload')
            const initRecorder = stream => {
            const recorder = new MediaRecorder(stream)
            let blob
              video.srcObject = stream
              startvideo.removeAttribute('disabled')
              video.addEventListener('loadedmetadata', () => {
              video.play()
                            })

              recorder.addEventListener('dataavailable', ({ data }) => {
              video.srcObject = null
              video.src = URL.createObjectURL(data)
              // Create a blob from the data for upload
              blob = new Blob([data], { type: 'video/webm' })
              })

              startvideo.addEventListener('click', () => {
              stopvideo.removeAttribute('disabled')
              show()
              reset()
              start()
              recorder.start()
		 				  // Get the video element with id="myVideo"
							document.getElementsByTagName("span")[0].removeAttribute("class")
							document.getElementsByTagName("span")[0].setAttribute("class", "colorred")
		        	document.getElementById("demo").innerHTML ="Recording...."
							})

							stopvideo.addEventListener('click', () => {
              upload.removeAttribute('disabled')
              recorder.stop()
              stop()
							document.getElementsByTagName("span")[0].removeAttribute("class")
							document.getElementsByTagName("span")[0].setAttribute("class", "colorgreen")
							document.getElementById("demo").innerHTML ="recorded Successfully ..."
              video.setAttribute("controls","controls")
							})

							// Upload the video blob as form data ............................
       
..................................... etc. .....................................................................


              navigator
                .mediaDevices
                .getUserMedia({audio: true, video: true })
                .then(initRecorder)
                .catch(console.error)

         </script>

      </body>
   </html>
2

Instead of using the HTML attribute, you can enable the controls with JS like

video.controls = true

This would go to the part where you set the video source to the recorded data. I don’t think you can hide the seek bar though… you might have to write your own custom controls then instead.

3

Thanks

4

(I don’t know if I should start another posting for this question).
Now that I have the controls displaying upon replay, it seems that the controls only appear on mouseover.
How do I have them displayed without a mouseover?

5

Do an ‘Inspect element’ where the hover is occurring; you should be able to track down the rule that’s affecting that and try out some changes.

6

I think that’s native behaviour (in some browsers at least), so there’s no way to change that… same as with the seek bar.

7

What you can do is to force the controls to show whenever the timeupdate event is triggered, which occurs whenever the video is playing.

Edit:

The below code no longer works these days. Use the CSS technique in a following post instead.

var video = document.querySelector("video");

function videoTimeUpdate(evt) {
    video.setAttribute("controls", "controls");
}

video.addEventListener("timeupdate", videoTimeUpdate, false);
8

Does this work for you? It doesn’t work for me in Chrome latest on Linux.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta chraset="utf-8">
    <title>Video</title>
  </head>
  <body>

    <video width="400" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>

    <script>
      var video = document.querySelector("video");

      function videoTimeUpdate(evt) {
        video.setAttribute("controls", "controls");
      }

      video.addEventListener("timeupdate", videoTimeUpdate, false);
    </script>
  </body>
</html>

You can however, force this behaviour for webkit browsers using CSS:

video::-webkit-media-controls-panel {
  display: flex !important;
  opacity: 1 !important;
}
1 Like
9

You’re dead right, that timeupdate technique doesn’t work anymore.

Go with the CSS solution, it’s better because it works.

10

Ok, ta. Just wanted to make sure I wasn’t missing anything.

11

Thanks

12

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