小编Joe*_*zel的帖子

iOS Safari 需要触摸事件来播放/暂停媒体元素。没有的话，你会得到：

NotAllowedError：当前上下文中的用户代理或平台不允许该请求，可能是因为用户拒绝了权限。捕获 PromiseReaction 错误消息。

问题是“如何延迟 <MediaElement>.play() 调用而不丢失触摸事件上下文？”

我试图在点击后延迟播放媒体元素，但在我提出的两种方法（Promise 和 setTimeout）中，它们都失去了与触摸事件的连接，并且由于以下原因我收到了 NotAllowedError 错误<MediaElement>.play() 调用的范围更改。正如预期的那样，两者都适用于除 iOS Safari 之外的所有 ES6 设备/浏览器。

请随意在codepen 上使用它。

const delay = ms => new Promise(res => setTimeout(res, ms));

const video = document.querySelector('video'),
      button = document.querySelector('button')

const playVideoSyncDelay = async e => {
  document.body.classList.add('blackground')
  await delay(3000)
  video.play()
    .then( e => video.onended = e => document.body.classList.remove('blackground', 'playing') )
    .then( e => document.body.classList.add('playing') )
    .catch( e => console.error('Oops:', e) )
}

const playVideoTimeoutDelay = e => {
  document.body.classList.add('blackground') …