I want to play a video file on a website and i have this function through which i am trying to do it
function closePageWithCountdown(seconds) {
const countdownElement = document.createElement("countdowntime");
countdownElement.style.position = "fixed";
countdownElement.style.top = "0";
countdownElement.style.left = "0";
countdownElement.style.backgroundColor = "red";
countdownElement.style.color = "white";
countdownElement.style.padding = "5px";
document.body.appendChild(countdownElement);
function updateCountdown() {
countdownElement.textContent = `Page will automatically close in ${seconds} seconds`;
if (seconds === 0) {
document.body.removeChild(countdownElement);
document.getElementsByTagName('html')[0].remove();
document.write('Resource Exhausted !\n<br>You may reload the page or close the tab.');
var centeredText = document.createElement("div");
centeredText.innerHTML = "Some Text Here";
centeredText.style.position = "fixed";
centeredText.style.bottom = "0";
centeredText.style.left = "0";
centeredText.style.right = "0";
centeredText.style.textAlign = "center";
// centeredText.style.backgroundColor = "rgba(255, 255, 255, 0.8";
centeredText.style.padding = "10px";
centeredText.style.zIndex = "999"; // Ensures it appears on top of other content
// Append the element to the body
document.body.appendChild(centeredText);
document.getElementsByTagName('html')[0].style.overflow = 'hidden';
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
var colors = ['red', 'blue', 'green']; // List of rainbow colors
var colorIndex = 0; // Initialize color index
function flash() {
centeredText.style.color = colors[colorIndex];
colorIndex = (colorIndex + 1) % colors.length; // Cycle through colors
}
var clr = setInterval(flash, 500);
// Create a new div element to hold the text
var flashbackText = document.createElement('div');
flashbackText.innerHTML = 'Click here to watch';
flashbackText.style.position = 'absolute';
flashbackText.style.top = '50%';
flashbackText.style.left = '50%';
flashbackText.style.transform = 'translate(-50%, -50%)';
flashbackText.style.fontSize = '1.5em';
flashbackText.style.fontWeight = 'bold';
flashbackText.style.backgroundColor = 'yellow';
flashbackText.style.padding = '10px';
flashbackText.style.cursor = 'pointer';
flashbackText.style.zIndex = '1000'; // Ensure it's above other elements
// Append the text to the body
document.body.appendChild(flashbackText);
// Event listener for the click event
flashbackText.addEventListener('click', function() {
// Clear the screen
document.body.innerHTML = '';
// Create a video element
var video = document.createElement('video');
video.id = 'myVideo';
video.style.position = 'absolute';
video.style.top = '50%';
video.style.left = '50%';
video.style.transform = 'translate(-50%, -50%) rotate(90deg)'; // Rotate the video 90 degrees
video.style.width = '100vh'; // Use viewport height as width for landscape
video.style.height = '100vw'; // Use viewport width as height for landscape
video.style.objectFit = 'contain'; // Ensure it covers the full area
video.autoplay = true;
video.controls = false; // Hide controls
// Set the source of the video
var source = document.createElement('source');
source.src = './myvideo.mp4'; // Replace with the path to your video
source.type = 'video/mp4';
// Append source to video element
video.appendChild(source);
// Add the video to the screen
document.body.appendChild(video);
video.onloadedmetadata = function() {
console.log('Video metadata loaded successfully');
console.log('Video duration:', video.duration);
};
video.onerror = function() {
console.error('Error loading the video');
};
// Play the video
video.play();
// Event listener for when the video ends
video.addEventListener('ended', function() {
// Clear the video and show the original text again
document.body.innerHTML = '';
document.body.appendChild(flashbackText);
document.body.appendChild(centeredText);
document.write('Resource Exhausted !\n<br>You may reload the page or close the tab.');
});
});
} else {
seconds--;
setTimeout(updateCountdown, 1000);
}
}
updateCountdown();
}
closePageWithCountdown(1) // 1 sec for testing
Expected behaviour: There is a highlighted text (on the center of screen) on which if the user clicks it plays a video and when the video ends it simply returns to the old content of the page.
However on the site it shows a white screen and no sound.
I don't know what wrong i am doing here is it that i didn't include any <video> tag in my index.html file?
Also i am not getting any console log for video.onloadedmetadata and video.onerror
(Note: It work sometime when I used a telegra.ph video link as the source.src)
source is an undefined variable and trying to reference it crashes your script. You need to set the properties of video instead and of course you only need to add video to your HTML. At the end of your counter you display that the resource has been exhausted, which is incorrect, because the resource works properly. You don't need to remove your HTML's first child nor to add that text when the counter finishes its job. You only need to do it when the video ends. See the snippet below:
function closePageWithCountdown(seconds) {
const countdownElement = document.createElement("countdowntime");
countdownElement.style.position = "fixed";
countdownElement.style.top = "0";
countdownElement.style.left = "0";
countdownElement.style.backgroundColor = "red";
countdownElement.style.color = "white";
countdownElement.style.padding = "5px";
document.body.appendChild(countdownElement);
function updateCountdown() {
countdownElement.textContent = `Page will automatically close in ${seconds} seconds`;
if (seconds === 0) {
document.body.removeChild(countdownElement);
//document.getElementsByTagName('html')[0].remove();
//document.write('Resource Exhaustedd !\n<br>You may reload the page or close the tab.');
var centeredText = document.createElement("div");
centeredText.innerHTML = "Some Text Here";
centeredText.style.position = "fixed";
centeredText.style.bottom = "0";
centeredText.style.left = "0";
centeredText.style.right = "0";
centeredText.style.textAlign = "center";
// centeredText.style.backgroundColor = "rgba(255, 255, 255, 0.8";
centeredText.style.padding = "10px";
centeredText.style.zIndex = "999"; // Ensures it appears on top of other content
// Append the element to the body
document.body.appendChild(centeredText);
document.getElementsByTagName('html')[0].style.overflow = 'hidden';
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
var colors = ['red', 'blue', 'green']; // List of rainbow colors
var colorIndex = 0; // Initialize color index
function flash() {
centeredText.style.color = colors[colorIndex];
colorIndex = (colorIndex + 1) % colors.length; // Cycle through colors
}
var clr = setInterval(flash, 500);
// Create a new div element to hold the text
var flashbackText = document.createElement('div');
flashbackText.innerHTML = 'Click here to watch';
flashbackText.style.position = 'absolute';
flashbackText.style.top = '50%';
flashbackText.style.left = '50%';
flashbackText.style.transform = 'translate(-50%, -50%)';
flashbackText.style.fontSize = '1.5em';
flashbackText.style.fontWeight = 'bold';
flashbackText.style.backgroundColor = 'yellow';
flashbackText.style.padding = '10px';
flashbackText.style.cursor = 'pointer';
flashbackText.style.zIndex = '1000'; // Ensure it's above other elements
// Append the text to the body
document.body.appendChild(flashbackText);
// Event listener for the click event
flashbackText.addEventListener('click', function() {
// Clear the screen
document.body.innerHTML = '';
// Create a video element
var video = document.createElement('video');
video.id = 'myVideo';
video.style.position = 'absolute';
video.style.top = '50%';
video.style.left = '50%';
video.style.transform = 'translate(-50%, -50%) rotate(90deg)'; // Rotate the video 90 degrees
video.style.width = '100vh'; // Use viewport height as width for landscape
video.style.height = '100vw'; // Use viewport width as height for landscape
video.style.objectFit = 'contain'; // Ensure it covers the full area
video.autoplay = true;
video.controls = false; // Hide controls
// Set the source of the video
//var source = document.createElement('source');
//source.src = './myvideo.mp4'; // Replace with the path to your video
video.src = 'https://telegra.ph/file/9d80fe1d60b2896d8b47b.mp4'; // Replace with the path to your video
video.type = 'video/mp4';
//source.type = 'video/mp4';
// Append source to video element
//document..appendChild(source);
// Add the video to the screen
document.body.appendChild(video);
video.onloadedmetadata = function() {
console.log('Video metadata loaded successfully');
console.log('Video duration:', video.duration);
};
video.onerror = function() {
console.error('Error loading the video');
};
// Play the video
video.play();
// Event listener for when the video ends
video.addEventListener('ended', function() {
// Clear the video and show the original text again
document.body.innerHTML = '';
document.body.appendChild(flashbackText);
document.body.appendChild(centeredText);
document.write('Resource Exhausted !\n<br>You may reload the page or close the tab.');
});
});
} else {
seconds--;
setTimeout(updateCountdown, 1000);
}
}
updateCountdown();
}
closePageWithCountdown(1) // 1 sec for testing<div id="countdowntime"></div>