javascripthtmljqueryhtml5-videomediaelement.js

How to set volume to be at a specific value upon clicking unmute button?

I am using media player js for my video, my videos are muted by default, now I would like upon clicking the unmuted button the volume should be at 70%,

HTML

<div class="video">
   <video id="player1" muted autoplay controls preload="none">
      <source type="video/mp4" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" data-quality="SD" />
   </video>
</div>

Here is JS

$('video').mediaelementplayer({
    features: ['playpause', 'current', 'progress', 'duration', 'volume', 'fullscreen', 'quality'],
    stretching: "responsive",
    enableAutosize: false,
    startVolume: 0.5,
    success: function(mediaElement, domObject) {
        mediaElement.setVolume(0.5);
        console.log(mediaElement);
    }
});

Now when I clicking the unmuted button the volume is not set at 0.5,

What do I need to to do to solve this problem? any help or suggestions will be appreciated

Solution

  • Looking for the 'volumechnage' event will allow you do this - see below for modified Javascript which worked when tested with your demo example:

    $('video').mediaelementplayer({
        features : ['playpause','current','progress','duration','volume','fullscreen','quality'],
  stretching : "responsive",
    enableAutosize : false,
   startVolume: 0.5,
    success: function (mediaElement, domObject) {
            mediaElement.setVolume(0.5);
            console.log(mediaElement);
            mediaElement.addEventListener("volumechange", function() {
                 mediaElement.setVolume(0.5)
                       }, false);
     }
});

    More documentation on the HTML5 Media events here: