Getting NotAllowedError: play() failed because the user didn't interact with the document first even though user is keypressing

Question

First, this code was working for 6 months before it started erroring so I'm trying to figure out what has gone wrong despite the code staying the same. I'm getting the error:

Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.

at https://player.vimeo.com/api/player.js:2:8680

at Array.forEach ()

at b (https://player.vimeo.com/api/player.js:2:8654)

at e (https://player.vimeo.com/api/player.js:2:10401)

when a user presses a key to play a video. I used the Vimeo Player API. Code looks like:

<script src="https://player.vimeo.com/api/player.js"></script>
<script>

 window.addEventListener("keypress", (e) => {
    var iframe = document.querySelector('iframe');
    var embedOptions = {
        autoplay: true,
        muted: true
    };
    iframe.allow = "autoplay";
    iframe.autoplay = "";
    var iframePlayer = new Vimeo.Player(iframe, embedOptions);
    iframe.style.zIndex = 0;
    let key = e.key;
    let URL;
    const overlay = document.getElementById("header");
    const logo = document.getElementsByTagName("img")[0];
    const subtitle = document.getElementsByTagName("h3")[0];

    function startVideo () {
        overlay.style.opacity = 0;
        logo.style.opacity = 0;
        subtitle.style.opacity = 0;
        subtitle.style.visibility = 'hidden';
    }

    function endVideo () {
        overlay.style.opacity = 1;
        logo.style.opacity = 1;
        subtitle.style.opacity = 1;
        subtitle.style.visibility = 'visible';
    }

    switch (key) {
    case "a":
    case "A":
    case " ":    
        URL = "290178807";
        break;
    case "b":
    case "B":
    case "]":
    case "}":     
        URL = "290179039";
        break;
    }

   iframePlayer.loadVideo(URL).then(function(id) {
    // the video successfully loaded
     console.log(e.key, URL, iframe);
        iframePlayer.play().then(function() {
            startVideo();
            iframePlayer.on('ended', function() {
              endVideo();
            })
        });
    }).catch(function(error) {
        switch (error.name) {
        case 'TypeError':
            // the id was not a number
            break;
        case 'PasswordError':
            // the video is password-protected and the viewer           needs to enter the
            // password first
            break;
        case 'PrivacyError':
            // the video is password-protected or private
            break;
        default:
            // some other error occurred
            break;
     }
    });
 })
</script>

I removed the huge switch statement that determines which video to play but that section was just a continuation of what the switch statement left in.

I added the embedOptions hoping that I could at least get it back to working though muted but even that doesn't seem to work. Adding iframe.muted = "muted" also proved fruitless. Also might be worth noting that this is a custom Squarespace although I don't think it's related as it was working before with the same code.

Answer 1

It seems that you can't set the allow="autoplay" attribute dynamically. It should be on the iframe before the event handler is executed. Also iframe.autoplay is not a valid property I think.

I would also add this chunk of code before/out of the event handler.

    var iframe = document.querySelector('iframe');
    var embedOptions = {
        autoplay: true,
        muted: true
    };
    // iframe.allow = "autoplay";
    // iframe.autoplay = "";
    var iframePlayer = new Vimeo.Player(iframe, embedOptions);
    iframe.style.zIndex = 0;

This is working code.

<iframe allow="autoplay" src="https://player.vimeo.com/video/76979871" frameborder="0"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>

  var iframe = document.querySelector('iframe');
  var embedOptions = {
      autoplay: true,
      muted: true
  };
  // iframe.allow = "autoplay";
  // iframe.autoplay = "";
  var iframePlayer = new Vimeo.Player(iframe, embedOptions);
  iframe.style.zIndex = 0;

 window.addEventListener("keypress", (e) => {
    let key = e.key;
    let URL;
    const overlay = document.getElementById("header");
    const logo = document.getElementsByTagName("img")[0];
    const subtitle = document.getElementsByTagName("h3")[0];

    function startVideo () {
        overlay.style.opacity = 0;
        logo.style.opacity = 0;
        subtitle.style.opacity = 0;
        subtitle.style.visibility = 'hidden';
    }

    function endVideo () {
        overlay.style.opacity = 1;
        logo.style.opacity = 1;
        subtitle.style.opacity = 1;
        subtitle.style.visibility = 'visible';
    }

    switch (key) {
    case "a":
    case "A":
    case " ":
        URL = "290178807";
        break;
    case "b":
    case "B":
    case "]":
    case "}":
        URL = "290179039";
        break;
    }

   iframePlayer.loadVideo(URL).then(function(id) {
    // the video successfully loaded
     console.log(e.key, URL, iframe);
        iframePlayer.play().then(function() {
            startVideo();
            iframePlayer.on('ended', function() {
              endVideo();
            })
        });
    }).catch(function(error) {
        switch (error.name) {
        case 'TypeError':
            // the id was not a number
            break;
        case 'PasswordError':
            // the video is password-protected and the viewer           needs to enter the
            // password first
            break;
        case 'PrivacyError':
            // the video is password-protected or private
            break;
        default:
            // some other error occurred
            break;
     }
    });
 })
</script>