6

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

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

4

2 回答 2

6

我已经为我原来的问题想出了一个解决方法。我编写了一个简单的补间函数，它将以我想要的频率轮询 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;

    }
于 2014-07-01T16:14:43.443 回答
2

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

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

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

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

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

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

于 2014-06-13T16:43:03.100 回答