Question

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

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

我知道webkit policies是由用户发起的事件，要求将视频静音，除非用户明确点击内容（这是我在这里要做的动作），但是在理解具体实现方面遇到了麻烦详细信息。

关于用户手势要求的注释：当我们说某个动作必须“由于用户手势”而发生时，我们指的是导致对video.play（）的调用的JavaScript，例如，必须直接来自处理触摸，点击，双击或按键事件的处理程序。因此，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（）是click事件的直接结果。但是我可以阻止该函数的执行以等待获取播放器吗？据我所知，它将阻止运行循环，并且视频将永远不会插入dom。

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

0 个答案: