html 使用video.play()时，视频显示白色屏幕

uz75evzq  于 2024-01-04  发布在  其他
关注(0)|答案(3)|浏览(222)

我想在一个网站上播放一个视频文件，我有这个功能，通过它我试图做到这一点

  1. function closePageWithCountdown(seconds) {
  2.   const countdownElement = document.createElement("countdowntime");
  3.   countdownElement.style.position = "fixed";
  4.   countdownElement.style.top = "0";
  5.   countdownElement.style.left = "0";
  6.   countdownElement.style.backgroundColor = "red";
  7.   countdownElement.style.color = "white";
  8.   countdownElement.style.padding = "5px";
  10.   document.body.appendChild(countdownElement);
  12.   function updateCountdown() {
  13.     countdownElement.textContent = `Page will automatically close in ${seconds} seconds`;
  15.     if (seconds === 0) {
  16.       document.body.removeChild(countdownElement);
  17.       document.getElementsByTagName('html')[0].remove();
  18.       document.write('Resource Exhausted !\n<br>You may reload the page or close the tab.');
  19.       var centeredText = document.createElement("div");
  20.       centeredText.innerHTML = "Some Text Here";
  21.       centeredText.style.position = "fixed";
  22.       centeredText.style.bottom = "0";
  23.       centeredText.style.left = "0";
  24.       centeredText.style.right = "0";
  25.       centeredText.style.textAlign = "center";
  26.       // centeredText.style.backgroundColor = "rgba(255, 255, 255, 0.8";
  27.       centeredText.style.padding = "10px";
  28.       centeredText.style.zIndex = "999"; // Ensures it appears on top of other content
  29.       
  30.       // Append the element to the body
  31.       document.body.appendChild(centeredText);
  33.       document.getElementsByTagName('html')[0].style.overflow = 'hidden';
  34.       document.getElementsByTagName('body')[0].style.overflow = 'hidden';
  35.       
  36.       var colors = ['red', 'blue', 'green']; // List of rainbow colors
  37.       var colorIndex = 0; // Initialize color index
  39.       function flash() {
  40.             centeredText.style.color = colors[colorIndex];
  41.             colorIndex = (colorIndex + 1) % colors.length; // Cycle through colors
  42.       }
  44.       var clr = setInterval(flash, 500);
  45.       
  46.       // Create a new div element to hold the text
  47.       var flashbackText = document.createElement('div');
  48.       flashbackText.innerHTML = 'Click here to watch';
  49.       flashbackText.style.position = 'absolute';
  50.       flashbackText.style.top = '50%';
  51.       flashbackText.style.left = '50%';
  52.       flashbackText.style.transform = 'translate(-50%, -50%)';
  53.       flashbackText.style.fontSize = '1.5em';
  54.       flashbackText.style.fontWeight = 'bold';
  55.       flashbackText.style.backgroundColor = 'yellow';
  56.       flashbackText.style.padding = '10px';
  57.       flashbackText.style.cursor = 'pointer';
  58.       flashbackText.style.zIndex = '1000'; // Ensure it's above other elements
  60.       // Append the text to the body
  61.       document.body.appendChild(flashbackText);
  62.     
  63.       // Event listener for the click event
  64.       flashbackText.addEventListener('click', function() {
  65.        // Clear the screen
  66.        document.body.innerHTML = '';
  68.        // Create a video element
  69.        var video = document.createElement('video');
  70.        video.id = 'myVideo';
  71.        video.style.position = 'absolute';
  72.        video.style.top = '50%';
  73.        video.style.left = '50%';
  74.        video.style.transform = 'translate(-50%, -50%) rotate(90deg)'; // Rotate the video 90 degrees
  75.        video.style.width = '100vh'; // Use viewport height as width for landscape
  76.        video.style.height = '100vw'; // Use viewport width as height for landscape
  77.        video.style.objectFit = 'contain'; // Ensure it covers the full area
  78.        video.autoplay = true;
  79.        video.controls = false; // Hide controls
  81.        // Set the source of the video
  82.        var source = document.createElement('source');
  83.        source.src = './myvideo.mp4'; // Replace with the path to your video
  84.        source.type = 'video/mp4';
  86.        // Append source to video element
  87.        video.appendChild(source);
  89.        // Add the video to the screen
  90.        document.body.appendChild(video);
  92.        video.onloadedmetadata = function() {
  93.          console.log('Video metadata loaded successfully');
  94.          console.log('Video duration:', video.duration);
  95.        }; 
  96.        video.onerror = function() {
  97.         console.error('Error loading the video');
  98.        };      
  99.         
  100.        // Play the video
  101.        video.play();
  103.        // Event listener for when the video ends
  104.        video.addEventListener('ended', function() {
  105.         // Clear the video and show the original text again
  106.         document.body.innerHTML = '';
  107.         document.body.appendChild(flashbackText);
  108.         document.body.appendChild(centeredText);
  109.         document.write('Resource Exhausted !\n<br>You may reload the page or close the tab.');
  110.        });    
  111.       });
  112.            
  114.     } else {
  115.       seconds--;
  116.       setTimeout(updateCountdown, 1000);
  117.     }
  118.   }
  120.   updateCountdown();
  121. }
  122. closePageWithCountdown(1) // 1 sec for testing

字符串

预期行为：有一个突出显示的文本（在屏幕中心），如果用户点击它，它会播放视频，当视频结束时，它会返回到页面的旧内容。

然而，在网站上它显示一个白色屏幕，没有声音。
我不知道我在这里做错了什么，是不是我没有在我的index.html文件中包含任何<video>标记？
此外，我没有获得video.onloadedmetadata和video.onerror的任何控制台日志
(Note：当我使用telegra.ph视频链接作为源时，它有时会工作。

Html

3条答案

按热度按时间
tyg4sfes

tyg4sfes1#

source是一个undefined变量，试图引用它会导致脚本崩溃。你需要设置video的属性，当然你只需要将video添加到HTML中。在计数器的末尾，你会显示资源已经耗尽，这是不正确的，因为资源工作正常。您不需要删除HTML的第一个子元素，也不需要在计数器完成其工作时添加该文本。您只需要在视频结束时执行此操作。请参阅下面的片段：

  1. function closePageWithCountdown(seconds) {
  2.   const countdownElement = document.createElement("countdowntime");
  3.   countdownElement.style.position = "fixed";
  4.   countdownElement.style.top = "0";
  5.   countdownElement.style.left = "0";
  6.   countdownElement.style.backgroundColor = "red";
  7.   countdownElement.style.color = "white";
  8.   countdownElement.style.padding = "5px";
  10.   document.body.appendChild(countdownElement);
  12.   function updateCountdown() {
  13.     countdownElement.textContent = `Page will automatically close in ${seconds} seconds`;
  15.     if (seconds === 0) {
  16.       document.body.removeChild(countdownElement);
  17.       //document.getElementsByTagName('html')[0].remove();
  18.       //document.write('Resource Exhaustedd !\n<br>You may reload the page or close the tab.');
  19.       var centeredText = document.createElement("div");
  20.       centeredText.innerHTML = "Some Text Here";
  21.       centeredText.style.position = "fixed";
  22.       centeredText.style.bottom = "0";
  23.       centeredText.style.left = "0";
  24.       centeredText.style.right = "0";
  25.       centeredText.style.textAlign = "center";
  26.       // centeredText.style.backgroundColor = "rgba(255, 255, 255, 0.8";
  27.       centeredText.style.padding = "10px";
  28.       centeredText.style.zIndex = "999"; // Ensures it appears on top of other content
  29.       
  30.       // Append the element to the body
  31.       document.body.appendChild(centeredText);
  33.       document.getElementsByTagName('html')[0].style.overflow = 'hidden';
  34.       document.getElementsByTagName('body')[0].style.overflow = 'hidden';
  35.       
  36.       var colors = ['red', 'blue', 'green']; // List of rainbow colors
  37.       var colorIndex = 0; // Initialize color index
  39.       function flash() {
  40.             centeredText.style.color = colors[colorIndex];
  41.             colorIndex = (colorIndex + 1) % colors.length; // Cycle through colors
  42.       }
  44.       var clr = setInterval(flash, 500);
  45.       
  46.       // Create a new div element to hold the text
  47.       var flashbackText = document.createElement('div');
  48.       flashbackText.innerHTML = 'Click here to watch';
  49.       flashbackText.style.position = 'absolute';
  50.       flashbackText.style.top = '50%';
  51.       flashbackText.style.left = '50%';
  52.       flashbackText.style.transform = 'translate(-50%, -50%)';
  53.       flashbackText.style.fontSize = '1.5em';
  54.       flashbackText.style.fontWeight = 'bold';
  55.       flashbackText.style.backgroundColor = 'yellow';
  56.       flashbackText.style.padding = '10px';
  57.       flashbackText.style.cursor = 'pointer';
  58.       flashbackText.style.zIndex = '1000'; // Ensure it's above other elements
  60.       // Append the text to the body
  61.       document.body.appendChild(flashbackText);
  62.     
  63.       // Event listener for the click event
  64.       flashbackText.addEventListener('click', function() {
  65.        // Clear the screen
  66.        document.body.innerHTML = '';
  68.        // Create a video element
  69.        var video = document.createElement('video');
  70.        video.id = 'myVideo';
  71.        video.style.position = 'absolute';
  72.        video.style.top = '50%';
  73.        video.style.left = '50%';
  74.        video.style.transform = 'translate(-50%, -50%) rotate(90deg)'; // Rotate the video 90 degrees
  75.        video.style.width = '100vh'; // Use viewport height as width for landscape
  76.        video.style.height = '100vw'; // Use viewport width as height for landscape
  77.        video.style.objectFit = 'contain'; // Ensure it covers the full area
  78.        video.autoplay = true;
  79.        video.controls = false; // Hide controls
  81.        // Set the source of the video
  82.        //var source = document.createElement('source');
  83.        //source.src = './myvideo.mp4'; // Replace with the path to your video
  84.        video.src = 'https://telegra.ph/file/9d80fe1d60b2896d8b47b.mp4'; // Replace with the path to your video
  85.        video.type = 'video/mp4';
  86.        //source.type = 'video/mp4';
  88.        // Append source to video element
  89.        //document..appendChild(source);
  91.        // Add the video to the screen
  92.        document.body.appendChild(video);
  94.        video.onloadedmetadata = function() {
  95.          console.log('Video metadata loaded successfully');
  96.          console.log('Video duration:', video.duration);
  97.        }; 
  98.        video.onerror = function() {
  99.         console.error('Error loading the video');
  100.        };      
  101.         
  102.        // Play the video
  103.        video.play();
  105.        // Event listener for when the video ends
  106.        video.addEventListener('ended', function() {
  107.         // Clear the video and show the original text again
  108.         document.body.innerHTML = '';
  109.         document.body.appendChild(flashbackText);
  110.         document.body.appendChild(centeredText);
  111.         document.write('Resource Exhausted !\n<br>You may reload the page or close the tab.');
  112.        });    
  113.       });
  114.            
  116.     } else {
  117.       seconds--;
  118.       setTimeout(updateCountdown, 1000);
  119.     }
  120.   }
  122.   updateCountdown();
  123. }
  124. closePageWithCountdown(1) // 1 sec for testing

个字符

展开查看全部
赞(0）分享  回复(0）举报  2024-01-04
kxeu7u2r

kxeu7u2r2#

当我获取您的代码并添加测试视频时，代码似乎正在执行您的意图。
由于结果会弹出另一个视频链接，我的假设是问题出在你引用的视频或你用来引用视频的文件路径上。

  1. var video = document.createElement('video');
  2.    video.id = 'myVideo';
  3.    video.style.position = 'absolute';
  4.    video.style.top = '50%';
  5.    video.style.left = '50%';
  6.    video.style.transform = 'translate(-50%, -50%) rotate(90deg)'; // Rotate the video 90 degrees
  7.    video.style.width = '100vh'; // Use viewport height as width for landscape
  8.    video.style.height = '100vw'; // Use viewport width as height for landscape
  9.    video.style.objectFit = 'contain'; // Ensure it covers the full area
  10.    video.autoplay = true;
  11.    video.controls = false; // Hide controls
  13.    // Set the source of the video
  14.    var source = document.createElement('source');
  15.    source.src = 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4'; // Replace with the path to your video
  16.    source.type = 'video/mp4';
  18.    // Append source to video element
  19.    video.appendChild(source);
  21.    // Add the video to the screen
  22.    document.body.appendChild(video);
  24.    video.onloadedmetadata = function() {
  25.      console.log('Video metadata loaded successfully');
  26.      console.log('Video duration:', video.duration);
  27.    }; 
  28.    video.onerror = function() {
  29.     console.error('Error loading the video');
  30.    };      
  31.     
  32.    // Play the video
  33.    video.play();

字符串

展开查看全部
赞(0）分享  回复(0）举报  2024-01-04
py49o6xq

py49o6xq3#

当您将document.body.innerHTML设置为空字符串时，您实际上删除了所有现有元素，包括触发视频播放的脚本。这可能会导致意外行为。
与其清除整个document.body，不如考虑创建一个容器元素来同时保存视频和原始文本。然后，您可以将该容器的内容替换为视频，并在需要时恢复为原始文本。下面是代码的修改版本来说明这一点

  1. function closePageWithCountdown(seconds) {
  2.   const countdownElement = document.createElement("countdowntime");
  3.   countdownElement.style.position = "fixed";
  4.   countdownElement.style.top = "0";
  5.   countdownElement.style.left = "0";
  6.   countdownElement.style.backgroundColor = "red";
  7.   countdownElement.style.color = "white";
  8.   countdownElement.style.padding = "5px";
  10.   document.body.appendChild(countdownElement);
  12.   function updateCountdown() {
  13.     countdownElement.textContent = `Page will automatically close in ${seconds} seconds`;
  15.     if (seconds === 0) {
  16.       document.body.removeChild(countdownElement);
  18.       // Create a container to hold the video and original text
  19.       var container = document.createElement('div');
  20.       container.style.position = 'absolute';
  21.       container.style.top = '0';
  22.       container.style.left = '0';
  23.       container.style.width = '100%';
  24.       container.style.height = '100%';
  25.       container.style.overflow = 'hidden';
  26.       document.body.appendChild(container);
  28.       // Original text
  29.       var centeredText = document.createElement("div");
  30.       centeredText.innerHTML = "Some Text Here";
  31.       centeredText.style.position = "fixed";
  32.       centeredText.style.bottom = "0";
  33.       centeredText.style.left = "0";
  34.       centeredText.style.right = "0";
  35.       centeredText.style.textAlign = "center";
  36.       centeredText.style.padding = "10px";
  37.       centeredText.style.zIndex = "999"; // Ensures it appears on top of other content
  38.       container.appendChild(centeredText);
  40.       // Video container
  41.       var videoContainer = document.createElement('div');
  42.       videoContainer.style.position = 'absolute';
  43.       videoContainer.style.top = '0';
  44.       videoContainer.style.left = '0';
  45.       videoContainer.style.width = '100%';
  46.       videoContainer.style.height = '100%';
  47.       container.appendChild(videoContainer);
  49.       // Event listener for the click event
  50.       centeredText.addEventListener('click', function () {
  51.         // Create a video element
  52.         var video = document.createElement('video');
  53.         video.id = 'myVideo';
  54.         video.style.width = '100%';
  55.         video.style.height = '100%';
  56.         video.style.objectFit = 'contain'; // Ensure it covers the full area
  57.         video.autoplay = true;
  58.         video.controls = false; // Hide controls
  60.         // Set the source of the video
  61.         var source = document.createElement('source');
  62.         source.src = './myvideo.mp4'; // Replace with the path to your video
  63.         source.type = 'video/mp4';
  65.         // Append source to video element
  66.         video.appendChild(source);
  68.         // Add the video to the container
  69.         videoContainer.innerHTML = ''; // Clear previous content
  70.         videoContainer.appendChild(video);
  72.         video.onloadedmetadata = function () {
  73.           console.log('Video metadata loaded successfully');
  74.           console.log('Video duration:', video.duration);
  75.         };
  76.         video.onerror = function () {
  77.           console.error('Error loading the video');
  78.         };
  80.         // Event listener for when the video ends
  81.         video.addEventListener('ended', function () {
  82.           // Revert to the original text
  83.           videoContainer.innerHTML = '';
  84.           container.appendChild(centeredText);
  85.           document.write('Resource Exhausted !\n<br>You may reload the page or close the tab.');
  86.         });
  87.       });
  89.     } else {
  90.       seconds--;
  91.       setTimeout(updateCountdown, 1000);
  92.     }
  93.   }
  95.   updateCountdown();
  96. }
  97. closePageWithCountdown(1); // 1 sec for testing

字符串

展开查看全部
赞(0）分享  回复(0）举报  2024-01-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com