javascript - 围绕视频播放列表创建内容节目

Question

我想通过拍摄上述视频(不同长度)并将它们串在一起创建一个播放列表，来营造一种“永远在线”的播放视频的感觉。

然后我会尝试查看视频是否适合 24 小时跨度或更长。基于此，当用户进来时，使用他们当前的时间戳跳转到视频播放列表中的那个时间。

例如——我在一个对象中有 5 个视频。

{ a: 3.54, b: 8.32, c: 15.23, d: 38.16, e: 68:13}   

然后我会将这些持续时间转换为秒。24 小时到秒 = 86400

加载到页面时，检查当前时间(以秒为单位)，并查看要同步到视频播放列表中的哪个位置。我卡住的地方是，如果播放列表的总持续时间 > 86400 怎么办？

然后将进行什么调整以适应 future 24 小时内的溢出并持续每一天？

Answer 1

您遇到的问题源于您只检查一天中的时间，这相当于每天午夜重新启动播放列表。这会在播放列表的长度不等分 24 小时和超过 24 小时的播放列表之间产生差异。

最简单的解决方案是将所有播放列表视为从过去某个固定时间开始循环播放。

在代码示例中，我选择了年初作为起点，但您也可以使用上次更新播放列表的时间戳；这样，在创建或更新播放列表后，它将开始播放第一个视频，然后无限循环。

(重复)运行代码片段以查看实际效果。

// FIND ELAPSED TIME SINCE START POINT
var then = new Date("January 1, 2016 00:00:00"); // or use playlist creation timestamp
var now = new Date();
var interval = Math.round((now - then) / 1000);
document.write("interval: " + interval + " seconds<br>");

// CALCULATE LENGTH IN SECONDS OF PLAYLIST (IF UNKNOWN)
var playlist = {a: 3.54, b: 8.32, c: 15.23, d: 38.16, e: 68.13};
var length = 0;
for (var i in playlist) {
    var minutes = Math.floor(playlist[i]);
    var seconds = (minutes * 60) + Math.round((playlist[i] * 100) % 100);
    length += seconds;
}
document.write("length: " + length + " seconds<br>");

// CALCULATE CURRENT POSITION IN PLAYLIST
var position = interval % length;
document.write("position in playlist: " + position + " seconds<br>");

// CALCULATE CURRENT POSITION IN VIDEO
for (var i in playlist) {
    var minutes = Math.floor(playlist[i]);
    var seconds = (minutes * 60) + Math.round((playlist[i] * 100) % 100);
    if (position < seconds) {
        document.write("video: " + i + "<br>position in video: " + position + " seconds");
        break;
    }
    else position -= seconds;
}