Javascript 使用Video.play()时，视频显示白屏

我想在网站上播放一个视频文件，我有这个功能，我正在try 通过它来实现

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:有一个突出显示的文本(在屏幕中央)，如果用户点击它，它会播放一段视频，当视频结束时，它只会返回到页面的旧内容.

然而，在该网站上，它显示了一个白屏，没有声音.

我不知道我在这里做错了什么，是不是我的index.html文件中没有包括任何<video>标记？

另外，我没有收到video.onloadedmetadata和video.onerror的任何控制台日志(log)

(注:当我使用Telegra.ph视频链接作为来源.src时，它有时会起作用)