Javascript 在视频元素添加到DOM之前，如何在用户启动的事件上播放带有声音的视频？iOS Safari/Chrome/Webkit

我有一个Ember.js应用程序，在DOM中有两个元素：1）查看器窗口（显示大型图像或视频）2）缩略图网格（表示视频或图像）

当用户单击相应的视频缩略图时，视频应加载到查看器窗口，并开始在mobile/ios/android上播放声音。我专门在iOS safari上进行测试

我知道用户发起的事件，要求视频静音，除非用户明确单击（这是我在这里所做的操作），但我在理解具体的实现细节时遇到困难

关于用户手势要求的一个注意事项：当我们说某个动作必须是“由于用户手势”而发生时，我们的意思是导致调用video.play（）的JavaScript必须是touchend、click、doubleclick或keydown事件的处理程序直接导致的。因此，button.addEventListener（'click'，（）=>{video.play（）；}）将满足用户手势需求。video.addEventListener（'canplaythrough'，（）=>{video.play（）；}）将不会

我认为我的问题是，直到下一个渲染循环，视频元素才添加到dom中。即使用户通过单击缩略图播放视频来启动事件，webkit也不会将其识别为用户启动的事件并阻止播放视频，因为它有声音

用户点击：

    updateCurrentItem(item) {
      set(this, "currentItem", item);

      this.videoManager.playWhenLoaded.perform(item);
    }

videoManager.playWhenLoaded

是一个余烬并发任务。将视频加载到dom时，它会向videoManager服务注册自己

  playWhenLoaded: task(function*(item) {
    let id = item.id;
    while (this.videos.findBy("modelId", id) === undefined) {
      yield timeout(200);
    }

    let video = this.videos.findBy("modelId", id);
    video.player.muted = false;
    video.player.play();
  })

你能解释一下为什么这样不行吗？我可以尝试什么策略让它在我的用例中工作？我确实有一个用户启动的事件触发播放，那么如何让它工作呢

头脑风暴，我可能需要这样的东西：

    updateCurrentItem(item) {
      set(this, "currentItem", item);

      let player = this.videoManager.getVideoPlayer.perform(item);
      //wait for the result somehow?

      player.muted = false;
      player.play();
    }

---

它将play（）作为单击事件的直接结果。但是我可以阻止函数的执行以等待获得播放器吗？据我所知，它只会阻止运行循环，视频永远不会被插入dom。

有没有办法通过承诺做到这一点？还是异步/等待？