Question

我正尝试在用户与页面互动后自动播放视频。如果以前播放过视频，显然会出现安全错误：

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

这很公平，我发现了此错误，现在想注册一个事件，以便在用户与页面互动后立即重试播放。

=>有这样的活动吗？

我试图在mouseover / mousemove / touchmove / click / focus / visible更改时注册事件，但是它不是最佳的，并且经过一些测试也不是很可靠...

Answer 1

我知道这是一个老问题，但对于处理此问题的任何人，play() 都会返回一个承诺。因此，您可以执行类似于以下代码的操作。此代码将尝试每 5 秒触发一次 play() 函数，直到成功触发，然后将清除间隔。

不确定它是否也适用于视频，但我认为适用。

const tryToPlay = setInterval(() => {
    const audio = new Audio(theAudioFile);

    audio.play()
        .then(() => {
            clearInterval(tryToPlay);
        })
        .catch(error => {
            console.info('User has not interacted with document yet.');
        });
}, 5000);

Answer 2

注册多个事件，然后等待一个事件进行。

let isPlaying = false;

["click", "mousemove", "mouseover", "mousemove", "touchmove", "focus"].forEach((eventName)=>{
  window.addEventListener(eventName, ()=>{
    if(!isPlaying){
      
      try{
        //play video here
        console.log("Video is playing");
        isPlaying = true;
      }catch(e){
        console.warn(e.message);
      }
      
    }
  }); 
});

是否有事件可以检测用户与页面互动的时间？

2 个答案: