Question

上下文：html页面上有多个视频。我的html页面上有多个视频。我希望一个视频每天在美国东部标准时间11:00出现（并自动播放），第二个视频在12:00出现，依此类推。可以用JavaScript和HTML完成吗？

Answer 1

是的，有可能。

我们假设您的DOM中有一个视频元素，其ID默认为myVideoElementID，其样式为display: none。

使用我编写的此功能：

function showElementAndPlayVideo(id) {
    const myElement = document.querySelector("#" + id);
    myElement.style.display = 'block'; // this will make the element visible
    myFunctionToPlayVideo(id); // your implementation which depends on the video player you are using
}

function showElementAtTime(id, hour) {
    var now = new Date();
    var time = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, 0, 0, 0) - now;
    var timeEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, 59, 59, 0) - now;

    if(now >= time && now < timeEnd) { // show and play right now since it's in the period
        showElementAndPlayVideo(id);
    } else if(time < now) { // show and play later because it's not yet the time
        setTimeout(() => showElementAndPlayVideo(id), now - time);
    }
}

您可以在页面加载时调用showElementAtTime('myVideoElementID', 11)。这将使您的视频元素（以前隐藏的）在11:00:00-11:59:59时间段内可见。

Answer 2

我将使用两个并行数组。一个用于容纳视频应播放的时间，然后另一个用于容纳要播放的视频的来源。

然后我将每分钟检查一次，以了解时间是否包含在第一个数组中。

// Default time functions in JavaScript return single digit hours/minutes.
var timesToPlayVideos = [
    "8:7",
    "9:30",
    "10:45",
    "11:15",
    "12:0",
    "13:0",
  ],
  videoSources = [
    "https://www.google.com/",
    "https://www.microsoft.com/",
    "https://www.msdn.com/",
    "https://www.stackoverflow.com/",
    "https://www.yahoo.com/",
    "https://www.bing.com/"
  ];

function checkIfTimeForVideo() {
  var currentDateTimeStamp = new Date(),
    currentTimestamp = currentDateTimeStamp.getHours() + ":" + currentDateTimeStamp.getMinutes();

  if (timesToPlayVideos.indexOf(currentTimestamp) > -1) {

    // Your code to play video here. Here is some non working example:
    var arrayIndex = timesToPlayVideos.indexOf(currentTimestamp),
      videoSrcToPlay = videoSources[arrayIndex];

    // iframe used only for example purposes. replace with video tag and use:
    //       video.setAttribute("autoplay", "autoplay");
    var iframe = document.createElement("IFRAME");
    iframe.setAttribute("src", videoSrcToPlay);

    document.body.appendChild(iframe);
  } else {
    // .innerHTML used only for example purposes.
    document.body.innerHTML = "Please return at one of the specified times.";
  }
}

window.setInterval(checkIfTimeForVideo, 60000);

Answer 3

我将使用npm cron和捆绑程序。一个视频的示例：

const cron = require('cron');
const job = new cron.CronJob('00 00 11 * * *',
  () => {
    let video = document.createElement('video');
    Object.assign(video, {src:"/assets/yourvideo.xxx",
        autoplay:true,
        controls:"controls"
    });
    document.body.appendChild(video); 
  },null, true, 'America/New_York'); // <== timezone

job.start();

然后创建一个捆绑包。例如：

browserify cronvideo.js -o public/javascripts/bundle.js

https://github.com/kelektiv/node-cron

在一天的特定时间自动在我的网站上播放多个视频

3 个答案: