用setTimeout实现全屏

Question

我有一个网页，我想让用户点击一个按钮，并开始观看全屏幕模式的视频。但是，我不希望视频在点击按钮后立即播放。我想让它等几秒钟，然后播放视频，然后转到全屏。为了实现这一点，我像这样使用了setTimeout函数；

 function startVideoAfterSecs(seconds){
    setTimeout(() => {
      this.activateFullscreen(); // function to go fullsreen
      this.player.play();
    }, seconds);
  };

我知道没有用户交互是不可能全屏的，应该有一些用户事件来触发它。这就是为什么，startVideoAfterSecs被绑定到按钮的onclick事件。然而，我仍在犯错误；

未处理拒绝(TypeError)：全屏错误

我知道这个错误会导致浏览器阻塞，因为它不接受它作为用户操作，因为它使用的是setTimeout函数。有没有办法解决这个问题？

提前谢谢。

Answer 1

"startVideoAfterSecs绑定到按钮的onclick事件“

但是this.activateFullscreen()和this.player.play()不再是了，因为它们是从超时回调中调用的。

但实际上这并不是问题所在，更重要的是，经过一段时间后，浏览器不会认为调用仍然来自用户交互，它在Chrome中似乎是5s左右，但在任何时候都可能发生变化。

对于play()调用，您可以通过在click事件处理程序中直接调用它来解决这个问题，然后尽快暂停。这将标记为用户激活的HTMLMediaElement，您可以随时调用它。

然而，对于全屏模式，除了请求其他用户的交互，或者在给定的时间内进行交互之外，别无他途。

Answer 2

首先，确保this指向要全屏显示的元素。另外，尝试使用requestFullscreen()代替。下面是它使用setTimeout()的一个例子..。

https://jsfiddle.net/8u3t5ae7/