Hide automatic visability of HTML5 video controls at beginning of video play but maintain all other default control behaviour

StackOverflow https://stackoverflow.com/questions/22181617

  •  05-06-2023
  •  | 
  •  

Question

I have a high(er) resolution (500 x 403) "video intro" that a client wants me to add to the beginning of a "main" video they delivered to me. The main video is low res (200 x 150).

I can EITHER makes the intro low res and add it (which the client doesn't like) OR I can double the resolution of the main video and add it (which balloons the bandwidth required to download and play the movie.) Also not optimal as this is destined for mobile.

I have a third solution I am going to use. I am playing the high res "intro video" and when that ends I am automatically loading the main video and playing it right behind the intro by creating a playlist containing the intro and the main video.

The problem I have is the default controller behavior for HTML 5 video is to be visible for the first 2 or 3 seconds of a video and then fade out. This is fine for the first video in the playlist however I would like the control to not show at the beginning of subsequent videos. The intro is only 6 seconds and the appearing and disappearing controls look messy and I would like both videos to appear as one.

I have tried using "videoPlayer.removeAttribute("controls");" however this kills the controls entirely so if a user taps the video later to intentionally bring the controls back up later nothing happens. Ideally I would like to keep all the default behavior with the exception of showing the controls at the beginning of the video.

I have seen some long winded attempts at trying to modify video.js to achieve something of this nature but ideally I can do something to the native features to enable this.

Any ideas?

Original code:

<script type="text/javascript">

$(document).ready(function(){
    var xx=1;
    var nextVideo = new Array();
        nextVideo[0] = "Content/videos/Logo_Animate_537.mp4";
        nextVideo[1] = "Content/videos/Main.mp4";
        nextVideo[2] = "Content/videos/Logo_Animate_537.mp4";

    $("#videoPlayer").bind('ended', function(){
        if(xx>nextVideo.length-1){
            videoPlayer.setAttribute("controls","controls");
            videoPlayer.pause();
            xx=1;
        } else {
            videoPlayer.removeAttribute("controls");
            videoPlayer.src = nextVideo[xx];
            videoPlayer.play();
            xx++;
        }
    });

    //+++++++++++++++++++ This section was added as the solution ++++++++++++++
    $("#videoPlayer").on('click touchstart', function () {
        videoPlayer.setAttribute("controls","controls");                                           
    });
    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

});

</script>


<video id="videoPlayer" width="537" height="403" controls poster="images/main.jpg">
    <source src="Content/videos/Logo_Animate_537.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
Was it helpful?

Solution

It seems like you have two options here. The first one is to simply remove and replace the controls attribute as you need. This would be the simplest solution, as

element.setAttribute('controls', '')

will simply put the controls back when you need them. The other option is to not use the browser controls at all, define your own custom controls, and hide or show them as you wish.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top