javascript - 从youtube视频获取进度栏

Question

我需要YouTube视频中的进度/缓冲栏。

我当前的解决方案是:

我有一个自己的“栏”，宽度为400像素。然后，我选择videolenght，然后将400px除以视频时间。

然后我有多少像素为1秒。现在，我每秒钟都有一个setInterval，对于我自己的进度条，通常会增加宽度。

视频是否已暂停/停止，我清除了间隔。如果继续播放视频，则间隔将继续。但是我的问题是，这是提高性能的好方法吗？还有其他解决方案吗？

我用这个插件http://www.tikku.com/jquery-youtube-tubeplayer-plugin

Answer 1

如果您知道播放器的当前时间，视频的持续时间以及进度条的所需全宽，则可以使用简单的jQuery动画。

var currentTime, duration, fullBarWidth;

$("#progressbar").animate(
    {
        width: fullBarWidth
    },
    {
        duration: duration - currentTime,
        easing: "linear",
        queue: false
    }
);

当播放器暂停视频时，调用 $("#progressbar").stop();暂停进度条动画。

您可能还想看看Google的新Youtube Javascript API。使用起来可能会更容易。 https://developers.google.com/youtube/js_api_reference