web-dev-qa-db-ja.com

ユーザーが最初にドキュメントを操作しなかったため、play（）は失敗しました-Vimeo APIを使用したクリックイベント

Onclickイベントがドキュメントとの対話としてカウントされると想定しているため、自動再生エラーがスローされる理由がわかりません

Uncaught（約束どおり）NotAllowedError：ユーザーが最初にドキュメントを操作しなかったため、play（）が失敗しました。

const playbtn = document.getElementById('playbtn');
const player = document.getElementById('video-player');
const vimeoPlayer = new Vimeo.Player(player);
playbtn.onclick = function() {
  playbtn.style.display = "none";
  vimeoPlayer.play();
}
vimeoPlayer.on('pause', function() {
  playbtn.style.display = "block";
});
vimeoPlayer.on('play', function() {
  playbtn.style.display = "none";
});
i {
  position: absolute;
  color: white;
}
.fa-play-circle {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 20rem;
        -webkit-transform:  translateX(-50%, -50%);
        -moz-transform:     translate(-50%, -50%);
        -ms-transform:      translate(-50%, -50%);
        -o-transform:       translate(-50%, -50%);
        transform:          translate(-50%, -50%);
        z-index: 2;
        color: white;
        color: rgba(255,255,255,0.75);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://player.vimeo.com/api/player.js"></script>

<div id="video-outer-full">
  <div id="video-inner">
    <i class="far fa-play-circle" id="playbtn"></i>
    <iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>
javascriptvimeo
3
froggomad

Iframeの属性にallow = "autoplay"がありませんでした

<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
10
froggomad

最初の間違いはvimeoPlayer.play();であるはずです2番目の間違いは、最初のコードの5行目の"を忘れてしまったことです。その後、コードを試してみましたが、うまくいきました。しかし、このエラーメッセージが表示される理由がわかりません。

var player = document.getElementById('video-player');
var vimeoPlayer = new Vimeo.Player(player);

playbtn.onclick = function() {
  playbtn.style.display = "none";
  vimeoPlayer.play();
}

vimeoPlayer.on('pause', function() {
  playbtn.style.display = "block";
});

vimeoPlayer.on('play', function() {
  playbtn.style.display = "none";
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://player.vimeo.com/api/player.js"></script>

<div id="video-outer-full">
  <div id="video-inner">
    <i class="far fa-play-circle" id="playbtn"></i>
    <iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>
2
lewa9