javascript - 与 html5 视频同步数据的最佳方式

Question

我正在构建一个应用程序，它从 Android 应用程序获取数据并在浏览器中重播它。 Android 应用程序基本上允许用户录制视频，并且在录制时每 100 毫秒记录一次数据，例如 GPS 位置、速度和加速度计读数到数据库中。所以我希望用户能够在浏览器中播放视频，并让图表、谷​​歌 map 等显示同步到视频的数据的实时表示。我已经实现了这个功能，但它还远非完美，我不禁想一定有更好的方法。我现在正在做的是从数据库中获取按日期时间升序排序的所有数据，并将其输出为 json 编码数组。这是我用伪代码执行的过程:

• 使用视频事件监听器查找视频的当前日期时间
• 从数据数组中的当前项执行 while 循环
• 对于每次迭代，检查该行的日期时间是否小于视频中的当前日期时间
• 如果是，则根据数据更新表盘
• 增加数组键

这是我的代码:

var points = <?php echo json_encode($gps); ?>;
var start_time = <?php echo $gps[0]->milli; ?>;
var current_time = start_time;

$(document).ready(function() 
{

    top_speed = 240;
    min_angle = -210;
    max_angle = 30;
    total_angle = 0 - ((0-max_angle)+min_angle);
    multiplier = top_speed / total_angle;

    speed_i=0;

    video.addEventListener('timeupdate', function() {
        current_time = start_time + parseInt((video.currentTime * 1000).toFixed(0));

        while(typeof points[speed_i] !== 'undefined' && current_time > points[speed_i].milli) 
        {
            newpos = new google.maps.LatLng(points[speed_i].latitude, points[speed_i].longitude);

            marker.setPosition(newpos);
            map.setCenter(newpos);

            angle = min_angle + (points[speed_i].speed * multiplier);

            $("#needle").rotate({
                animateTo : angle,
                center: [13,11],
                duration: 100
            });

            speed_i++;
        }
    }
});

以下是我似乎遇到过的问题:- 必须将数千行加载到 json 数组中，这对于性能来说不是很好- 必须在每次视频回拨时执行 while 循环 - 再次对性能来说不是很好- 播放总是有点落后

有人能想出任何可以改进的方法或者更好的方法吗？

Answer 1

有几个原因可能会导致运行缓慢。首先，timeupdate 事件大约每 250 毫秒运行一次。所以，如果你打算以这个速度刷新，dandavis 是对的，你不需要那么多数据。但如果您想要如此流畅的动画，我建议使用 requestAnimationFrame 每 16 毫秒左右更新一次。

事实上，如果您每 250 毫秒更新一次，您将循环访问 2 或 3 个数据点，并连续更新 map 和指针 3 次，这是不必要的。

我建议查看Popcorn.js ，它就是专门为这种事情而构建的，并且会为您解决这个问题。它还可以处理搜索或向后播放。您需要预处理数据，以便视频中的每个点都有开始时间和结束时间。

您还可以采取一些措施来提高数据传输效率。删除每个点上不需要的任何额外属性。您可以将每个数据点存储为数组，因此属性名称不必包含在 JSON blob 中，然后您可以在客户端使用几行 JS 代码来清理它。

最后，将数据文件与脚本分开。将其保存为静态 JSON 文件(如果您的服务器配置可以处理，甚至可以进行 gzip 压缩)并使用 XMLHttpRequest 获取它。这样，您至少可以在等待代码下载时更快地显示页面。更好的是，考虑使用 JSON 流工具，如 Oboe.js甚至在整个文件加载之前就开始显示数据点。