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>

获取NotAllowedError：play（）失败，因为即使用户按下键，用户也没有与文档进行交互

1 个答案: