获取 NotAllowedError: play() 失败，因为即使用户正在按键，用户也没有首先与文档交互

Question

首先，这段代码在开始出错之前已经运行了 6 个月，所以尽管代码保持不变，但我试图找出哪里出了问题。我收到了错误：

Uncaught (in promise) NotAllowedError: play() failed 因为用户 没有先与文档进行交互。

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>