使用javascript和post messege以特定的时间间隔播放视频

我有一个简单的应用程序，我有三个不同的视频，我希望每个视频在特定的时间播放。例如：

第一个要播放的视频

在

5:00am

和

10:00am

之间

第二个视频播放

在

上午10:00

和

晚上22:00

之间

第三个视频播放

在晚上22:00到凌晨5:00之间

因此，假设用户在上午9:00左右访问了我的应用程序。它应该自动播放第一个视频。如果用户在上午11:00左右访问，则会播放第二个视频，以此类推

我想要一个函数只在一天中的特定时间使用javascript和postMessage函数以设置的间隔运行函数

以下是我的解决方案： app.js

var welcomeMovie1=”http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4";
var welcomeMovie2=”http://mirrors.standaloneinstaller.com/video-sample/TRA3106.mp4"
var welcomeMovie3=”http://mirrors.standaloneinstaller.com/video-sample/Panasonic_HDC_TM_700_P_50i.mp4";
var消息时间；
//使用post消息播放视频1至iframe的函数
函数welcomeMessage1（）{
document.getElementById（'videoframe'）.contentWindow.postMessage(
JSON.stringify({
活动：“播放视频（welcomeMovie1）”
}),
'*'
)
}
//使用post消息播放video2至iframe的函数
函数welcomeMessage2（）{
document.getElementById（'videoframe'）.contentWindow.postMessage(
JSON.stringify({
活动：“播放视频（welcomeMovie2）”
}),
'*'
)
}
//使用post消息播放video3至iframe的函数
函数welcomeMessage3（）{
document.getElementById（'videoframe'）.contentWindow.postMessage(
JSON.stringify({
活动：“播放视频（welcomeMovie2）”
}),
'*'
)
}
//在特定时间使用post消息播放视频1至iframe的功能
setInterval（函数（）{
var messageTime=new Date（）.getHours（）；
如果（messageTime>=5&&messageTime<10）{
welcomeMessage1（）；
log（welcomeMessage2（））；
}
}, 1000 * 60);
//在特定时间使用post消息播放video2至iframe的功能
setInterval（函数（）{
var messageTime=new Date（）.getHours（）；
console.log（date.tolocalesting（'en-GB'））；
如果（messageTime>=10&&messageTime<22）{
welcomeMessage2（）；
log（welcomeMessage2（））；
}
}, 1000 * 60);
//在特定时间使用post消息播放video3至iframe的功能
setInterval（函数（）{
var messageTime=new Date（）.getHours（）；
如果（messageTime>=22&&messageTime<5）{
welcomeMessage3（）；
}
}, 1000 * 60);
//promise函数创建自定义视频控件和播放功能
功能播放视频（src）{
$（“playervideo”）.attr（“src”，src）；
$（“#playervideo”）[0].muted=false；
如果（自动播放==真）{
var playPromise=$（“#playervideo”）[0]。play（）；
如果（playPromise！==未定义）{
playPromise.then（function（）{}）.catch（function（）{
如果（自动播放==真）{
$（“#视频取消静音按钮”）.addClass（“显示”）；
$（“#playervideo”）[0].muted=true；
var playPromise2=$（“#playervideo”）[0]。play（）；
playPromise2.然后（函数（）{
}).catch（函数（）{
$（“#视频开始按钮”）.addClass（“显示”）；
$（“#视频开始按钮”）。打开（“单击”，函数（）{
$（“#playervideo”）[0].muted=false；
$（“#playervideo”）[0].play（）；
$（“#视频开始按钮”）.removeClass（“显示”）；
});
});
控制台日志（“暂停力”）；
}否则{
}
});
}else{}
}否则{
}
}

视频帧

无需使用

setInterval

；您只需要使用

if

语句或

开关盒

我删除了

setInterval

代码，并做了一个if语句。在最后一种情况下，您需要将双符号（

&&

/和）更改为

|

（或）-

（>22或=5&&messageTime=10&&messageTime<22）{
welcomeMsg=“中午”；
vid=welcomeMovie2；
//log（welcomeMessage2（））；
}
其他的
如果（messageTime>=22 | | messageTime<5）{
welcomeMsg=“夜猫子”；
vid=welcomeMovie3；
}
////}, 1000 * 60);
播放视频；
log（“您好！您的欢迎信息是”+welcomeMsg+”+vid）
//承诺functionb创建自定义视频控件和播放功能
功能播放视频（src）{
log（“您好！您的欢迎信息是”+welcomeMsg+”+vid）
$（“playervideo”）.attr（“src”，src）；
$（“#playervideo”）[0].muted=false；
如果（自动播放==真）{
var playPromise=$（“#playervideo”）[0]。play（）；
如果（playPromise！==未定义）{
playPromise.then（function（）{}）.catch（function（）{
如果（自动播放==真）{
$（“#视频取消静音按钮”）.addClass（“显示”）；
$（“#playervideo”）[0].muted=true；
var playPromise2=$（“#playervideo”）[0]。play（）；
playPromise2.然后（函数（）{
}).catch（函数（）{
$（“#视频开始按钮”）.addClass（“显示”）；
$（“#视频开始按钮”）。打开（“单击”，函数（）{
$（“#playervideo”）[0].muted=false；
$（“#playervideo”）[0].play（）；
$（“#视频开始按钮”）.removeClass（“显示”）；
});
});
控制台日志（“暂停力”）；
}否则{
}
});
}else{}
}否则{
}
}

&

自动播放 自动播放已经不是以前的样子了。让

标记自动播放涉及太多问题。以下是所需要的：

标签需要

[mute]

和

[autoplay]

属性

<video ... muted autoplay></video>

在下面的演示中，

loadVideo（）

是根据cu将MP4文件加载到

标记的

[src]

的函数

<iframe ... allowfullscreen allow="autoplay; fullscreen"></iframe>

(function() {
  loadVideo();
})();

async function promisePlay() {
  try {
    await document.querySelector('video').play();
  } catch (err) {
    ...
  }
}

window.frames[0].postMessage(data, origin);

window.addEventListener("message", callback);