CODEWITHSUNDEEP
javascripthtmlcontrolsvideo-streaminghtml5-video
FEMax
FEMax

Reputation: 31

Javascript to automatically turn on sound volume on video after autoplay

I am coding an online psychology experiment. Participants have to watch a short movie and remember some information. To analyze the data everyone has to see the same movie, so it would be a problem if people pause it. Therefore, I disabled all controls and autoplay the video.

On Chrome this only works if the player starts mute. So I would like to turn on the sound automatically right after the video starts.

I am trying to use the following html with the video hosted here

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no">
  </head>

  <body style="width: 1000px; height: 800px; background-color: grey;">

    <div class="container">
      <div id="video-player"></div>
    </div>
    <script src="https://muse.ai/static/js/embed-player.min.js"></script>

    <script>
      const player = MusePlayer({
        container:'#video-player',
        video: 'qhRjheS',
        width: 720,
        height: 480,
        autoplay: true,
        loop: true,
        volume: 0,
        style: 'no-controls',
        shortcuts: false,
        css: '*{pointer-events:none!important;}',
      });
      player.on('timeupdate', function(time) {player.setVolume(100)});
    </script>

  </body>
</html>

Where this line is the issue:

player.on('timeupdate', function(time) {player.setVolume(100)});

This works in the console, while the video is running, but crashes if it's put in the script.

Can anyone think of any way to turn on the sound automatically? If there is a small delay after the movie starts, that would be okay.

Upvotes: 0

Views: 1571

Answers (2)

FEMax
FEMax

Reputation: 31

Thanks kshetline for the input. It's indeed a problem for me that chrome blocks autoplay. However, adding an event listener to start the movie on click is a workaround. I guess autostart is not possible, but this way all other controls still remain disabled once the movie starts.

document.body.addEventListener("click", function () {
    player.play();
});

Upvotes: 0

kshetline
kshetline

Reputation: 13672

As an experiment (not a full solution) I'd try something like this:

setTimeout(() => player.on('timeupdate', () => player.setVolume(100)), 3000);

(I took the liberty of changing your code to use arrow functions.)

I suspect that the player isn't immediately ready to have the volume set, and takes a moment to be fully set up and ready to go. I'm not familar with MusePlayer specifically, but I'd look at the docs and see if there are other events, besides the 'timeupdate' event, that you'd want to receive first before setting up the listener for the 'timeupdate' event.

Upvotes: 1

Related Questions