时间戳

首页 > 解决方案 > 使用 setTimeout 全屏显示

javascript - 使用 setTimeout 全屏显示

问题描述

我有一个网页，我想让用户单击一个按钮并开始以全屏模式观看视频。但是，我不希望在单击按钮后立即播放视频。我希望它等待几秒钟，然后播放视频并全屏显示。为达到这个; 我已经像这样使用了 setTimeout 函数；

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

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

未处理的拒绝（TypeError）：全屏错误

我知道这个错误导致浏览器阻塞，因为它不接受它作为用户操作，因为setTimeout正在使用该功能。有没有办法解决这个问题？

提前致谢。

标签： javascript

解决方案

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

但是不再是了，因为它们是从超时回调中调用的this.activateFullscreen()。 但实际上这甚至不是问题，更多的是在一段时间后浏览器不会认为调用仍然来自用户交互，在 Chrome 中似乎是 5 秒左右，但它很可能随时发生变化。this.player.play()

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

但是，对于全屏模式，除了请求其他用户的交互，或者在给定的时间内完成之外，别无他法。

推荐阅读