Search code examples
azure-media-services

prevent controls from disappearing in Azure Media Player


In Azure Media Player, by default the control bar (i.e. where the timeline and play controls appear) starts as visible. But if you don't move your mouse then it disappears after 5 seconds. Is there a way to suppress the disappearance, so that the control bar is always visible?


Solution

  • According to your requirement, I checked Azure Media Player, but did not find any options to always show the controls.

    Per my test, you could use setInterval() method to call a function to explicitly set class vjs-user-active on your video element for the workaround as follows:

    <html>
    <head>
    <link href="http://amp.azure.net/libs/amp/2.1.5/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <script src="http://amp.azure.net/libs/amp/2.1.5/azuremediaplayer.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
    </head>
    
    <body>
       <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
    </body>
    
    <script type="text/javascript">
    (function(){
    
       var myOptions = {
        "nativeControlsForTouch": true,
        controls: true,
        autoplay: true,
        width: "640",
        height: "400",
        }
        myPlayer = amp("azuremediaplayer", myOptions);
        myPlayer.src([
          {"src":"https://sec.ch9.ms/ch9/cf2b/d75f604a-e59f-46f2-81d3-4ec1473ecf2b/AzureFridayGetStartedWithAzureFor_mid.mp4"}
        ]);
    
        var myInterval=setInterval(function(){
          $("#azuremediaplayer").removeClass("vjs-user-inactive");
          $("#azuremediaplayer").addClass("vjs-user-active");
        },1000);
    })();
    </script>
    </html>