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

时间:2014-06-12 17:37:56

标签: html5 video iframe youtube-api youtube-iframe-api

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

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

2 个答案:

答案 0 :(得分: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;

    }

答案 1 :(得分:2)

在HTML5中,Youtube API中的getCurrentTime()函数和postMessage事件可能链接到HTML5媒体元素规范的currentTime属性和timeupdate事件。

timeupdate事件触发的速率因浏览器和今天的不同而无法根据您所寻找的精度水平进行调整(Flash在这一点上仍然领先一步)。根据{{​​3}}:

  

如果在正常播放期间通过当前播放位置的通常单调增加达到时间,并且用户代理在过去的15到250ms内没有在元素上触发timeupdate事件并且仍未运行事件处理程序这样的事件,然后用户代理必须对任务进行排队,以在元素上触发名为timeupdate的简单事件。 (在其他情况下,例如显式搜索,相关事件会在更改当前播放位置的整个过程中被触发。)

     

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

对于currentTime属性,精度以specification表示。低于第二种精度的任何精度都是浏览器特定的实现,不应该被视为理所当然(实际上,你会在Chrome等现代浏览器中获得次低精度,但效率会有波动)。

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