Получение NotAllowedError: play () не удалось, поскольку пользователь не взаимодействовал с документом первым, даже если пользователь нажимает клавишу

Question

Во-первых, этот код работал в течение 6 месяцев, прежде чем он начал ошибаться, поэтому я пытаюсь выяснить, что пошло не так, несмотря на то, что код остался прежним.Я получаю сообщение об ошибке:

Uncaught (в обещании) NotAllowedError: сбой воспроизведения (), поскольку пользователь не взаимодействовал с документом первым.

при 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.in.

Я добавил 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>