YouTube HTML5 API - 在轮询播放器当前时间时是否可以获得更好的时间分辨率？

Question

我一直在寻找解决这个问题的方法，但我仍然没有找到。我们的应用需要使用player.getCurrentTime() 轮询YouTube 视频对象来驱动一些屏幕动画。使用 flash API 这很棒，因为我们可以以40ms 间隔（25 FPS）轮询播放器并获得非常准确的当前播放器时间值。我们现在已经开始使用 iFrame API，遗憾的是它不允许任何接近该精度水平的东西。我做了一些研究，似乎因为它是一个 iFrame，所以 postMessage 用于将玩家状态暴露给 player.getCurrentTime() 调用。不幸的是，这个 post message 事件很少被触发 - 有时低至每秒 4 次。更糟糕的是，消息触发的实际速率似乎取决于浏览器的渲染引擎。

有谁知道是否可以强制渲染引擎更频繁地触发这些消息，以便在轮询玩家时获得更大的时间分辨率？我试过requestAnimationFrame 并没有解决问题。有没有人成功地让 iFrame 播放器报告更准确和更频繁的时间？

Answer 1

我已经为我原来的问题想出了一个解决方法。我编写了一个简单的补间函数，它将以我想要的频率轮询 iFrame 播放器并在其间插入时间瞬间。播放器本身仅每 250 毫秒左右更新一次当前时间，具体取决于渲染引擎和平台。如果您比这更频繁地轮询它，它将在多个连续轮询中返回相同的当前时间值。但是，如果您应用一些逻辑，您可以检测播放器何时返回新的当前时间并相应地更新您自己的计时器。我在一个间隔为 25 毫秒的计时器上运行下面的函数。在每次迭代中，我都会在当前时间上增加 25 毫秒，除非我检测到玩家报告的当前时间发生了变化。在这种情况下，我用新的“实际”当前时间更新我自己的计时器。当您执行此操作时，可能会有一个小的跳跃或非线性，但如果您以足够高的速率轮询玩家，这应该是难以察觉的。

 window.setInterval(tween_time, 25);

    function tween_time() {

        time_update = (ytplayer.getCurrentTime()*1000)

        playing=ytplayer.getPlayerState();

            if (playing==1){

                if (last_time_update == time_update)
                {
                    current_time_msec += 25;
                }

                if (last_time_update != time_update)
                {
                    current_time_msec = time_update;
                }       

            }


            do_my_animations();


        last_time_update = time_update;

    }

Answer 2

在 HTML5 中，Youtube API 中的 getCurrentTime() 函数和 postMessage 事件很可能与 HTML5 媒体元素规范的 currentTime 属性和 timeupdate 事件相关联。

timeupdate 事件的触发速率因浏览器而异，并且截至今天无法根据您正在寻找的精度水平进行调整（Flash 在这方面仍然领先一些）。根据specification：

如果在正常播放期间通过当前播放位置的通常单调增加达到时间，并且如果用户代理在过去 15 到 250 毫秒内没有在元素上触发 timeupdate 事件并且仍然没有运行事件处理程序这样的事件，那么用户代理必须排队一个任务，以在元素上触发一个名为 timeupdate 的简单事件。 （在其他情况下，例如显式搜索，相关事件会作为更改当前播放位置的整个过程的一部分而被触发。）

因此，事件的触发速度不会超过大约 66Hz 或低于 4Hz（假设事件处理程序的运行时间不超过 250 毫秒）。鼓励用户代理根据系统负载和每次处理事件的平均成本来改变事件的频率，这样 UI 更新的频率不会超过用户代理在解码视频时可以轻松处理的频率。

对于 currentTime 属性，精度以seconds 表示。任何低于秒的精度都是特定于浏览器的实现，不应被视为理所当然（实际上，在 Chrome 等现代浏览器中，您将获得亚秒精度，但效率会波动）。

最重要的是，Youtube API 可能会限制所有这些事情，以达到 250 毫秒精度的更大共同点，并使所有浏览器都满意（因此每秒 4 个事件以及您在测试中注意到的情况）。对于您的情况，您最好尝试将动画缩放到这个 250 毫秒的精度概念，并允许一些误差范围以获得更好的用户体验。未来浏览器和 HTML5 媒体会变得更好，希望我们能获得真正的毫秒精度。