获取NotAllowedError：play（）失败，因为即使用户正在按键，用户也不会首先与文档交互

Question

首先，这段代码在开始出错之前已经工作了6个月，所以尽管代码保持不变，我还是想弄清楚出了什么问题。我收到错误：

未捕获（在承诺中）NotAllowedError：play（）失败，因为用户没有先与文档交互。

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

在Array.forEach（）

在b（https://player.vimeo.com/api/player.js:2:8654）

在e（https://player.vimeo.com/api/player.js:2:10401）

当用户按下键以播放视频时。我使用了Vimeo Player API。代码如下：

<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>

我删除了确定要播放哪个视频的巨大switch语句，但该部分只是switch语句留下的延续。

我添加了embedOptions，希望我至少可以恢复工作虽然静音，但即使这似乎也不起作用。添加iframe.muted = "muted"也证明没有结果。也许值得注意的是，这是一个自定义的Squarespace，虽然我不认为它是相关的，因为它以前使用相同的代码。

Answer 1

您似乎无法动态设置allow="autoplay"属性。它应该在执行事件处理程序之前在iframe上。另外iframe.autoplay不是我认为的有效财产。

我还会在事件处理程序之前/之外添加这段代码。

    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;

这是工作代码。

<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>