I have a simple app which I have three different videos, I want each video to play at certain time. As example:
First video to play.
between
5:00 AMand10:00 AM.Second video to play.
between
10:00 AMand22:00 PM.Third video to play.
between
22:00 PMand5:00 AM.
So assume if a user visited my app around 9:00 AM. It should automatically play the first video. If the user visit around 11: 00 AM, the second video plays, and etc.
I want a function to run function at set interval only at certain time of the day using javascript and the postMessage function,
Here is my solution: 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 messageTime;
//function to play a video1 to iframe using post messages
function welcomeMessage1() {
document.getElementById('videoframe').contentWindow.postMessage(
JSON.stringify({
event: 'playVideo(welcomeMovie1)'
}),
'*'
)
}
//function to play a video2 to iframe using post messages
function welcomeMessage2() {
document.getElementById('videoframe').contentWindow.postMessage(
JSON.stringify({
event: 'playVideo(welcomeMovie2)'
}),
'*'
)
}
//function to play a video3 to iframe using post messages
function welcomeMessage3() {
document.getElementById('videoframe').contentWindow.postMessage(
JSON.stringify({
event: 'playVideo(welcomeMovie2)'
}),
'*'
)
}
//function to play a video1 to iframe using post messages at Specific time
setInterval(function() {
var messageTime = new Date().getHours();
if (messageTime >= 5 && messageTime < 10) {
welcomeMessage1();
console.log(welcomeMessage2());
}
}, 1000 * 60);
//function to play a video2 to iframe using post messages at Specific time
setInterval(function() {
var messageTime = new Date().getHours();
console.log(date.toLocaleString('en-GB'));
if (messageTime >= 10 && messageTime < 22) {
welcomeMessage2();
console.log(welcomeMessage2());
}
}, 1000 * 60);
//function to play a video3 to iframe using post messages at Specific time
setInterval(function() {
var messageTime = new Date().getHours();
if (messageTime >= 22 && messageTime < 5) {
welcomeMessage3();
}
}, 1000 * 60);
// promise function to create custom video controls and play functions
function playVideo(src) {
$("#playervideo").attr("src", src);
$("#playervideo")[0].muted = false;
if (autoplay == true) {
var playPromise = $("#playervideo")[0].play();
if (playPromise !== undefined) {
playPromise.then(function() {}).catch(function() {
if (autoplay == true) {
$("#video-unmute-button").addClass("show");
$("#playervideo")[0].muted = true;
var playPromise2 = $("#playervideo")[0].play();
playPromise2.then(function() {
}).catch(function() {
$("#video-start-button").addClass("show");
$("#video-start-button").on("click", function() {
$("#playervideo")[0].muted = false;
$("#playervideo")[0].play();
$("#video-start-button").removeClass("show");
});
});
console.log("pause force");
} else {
}
});
} else {}
} else {
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Frame</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<iframe id="videoframe" src="videoframe.html"></iframe>
<br/>
<!-- <input id="name" type="text"/> -->
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
</html>Here is plunker for full demo: demo
Unfortunately it's not working,
What do I need to change in my code to get what I want?
