Question posted in 
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)
3
Answers
When I grab your code and add in a test video, the code seems to be doing what you’re intending.
Since a result pops up with another video link, my assumption is the issue is with the video you’re referencing or the file path you’re using to reference the video.
When you set document.body.innerHTML to an empty string, you are effectively removing all existing elements, including the script that triggers video playback. This may cause unexpected behavior.
Instead of clearing the entire document.body, consider creating a container element to hold both the video and the original text. You can then replace the content of that container with the video and revert to the original text when needed. Here’s a modified version of your code to illustrate this
sourceis anundefinedvariable and trying to reference it crashes your script. You need to set the properties ofvideoinstead and of course you only need to addvideoto 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: