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

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

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

解决方法

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

    }

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码