我想在一个网站上播放一个视频文件,我有这个功能,通过它我试图做到这一点
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
字符串
预期行为:有一个突出显示的文本(在屏幕中心),如果用户点击它,它会播放视频,当视频结束时,它会返回到页面的旧内容。
然而,在网站上它显示一个白色屏幕,没有声音。
我不知道我在这里做错了什么,是不是我没有在我的index.html文件中包含任何<video>
标记?
此外,我没有获得video.onloadedmetadata
和video.onerror
的任何控制台日志
(Note:当我使用telegra.ph视频链接作为源时,它有时会工作。
3条答案
按热度按时间tyg4sfes1#
source
是一个undefined
变量,试图引用它会导致脚本崩溃。你需要设置video
的属性,当然你只需要将video
添加到HTML中。在计数器的末尾,你会显示资源已经耗尽,这是不正确的,因为资源工作正常。您不需要删除HTML的第一个子元素,也不需要在计数器完成其工作时添加该文本。您只需要在视频结束时执行此操作。请参阅下面的片段:个字符
kxeu7u2r2#
当我获取您的代码并添加测试视频时,代码似乎正在执行您的意图。
由于结果会弹出另一个视频链接,我的假设是问题出在你引用的视频或你用来引用视频的文件路径上。
字符串
py49o6xq3#
当您将document.body.innerHTML设置为空字符串时,您实际上删除了所有现有元素,包括触发视频播放的脚本。这可能会导致意外行为。
与其清除整个document.body,不如考虑创建一个容器元素来同时保存视频和原始文本。然后,您可以将该容器的内容替换为视频,并在需要时恢复为原始文本。下面是代码的修改版本来说明这一点
字符串