html 视频播放选项

ryevplcw  于 2024-01-04  发布在  其他
关注(0)|答案(2)|浏览(264)

我是JavaScript的初学者，我设法合并了两个控制视频播放的函数，然而，它们有点相互干扰。
这个函数应该提供自定义暂停和播放视频控件

  1. // VIDEO CONTROLS START
  2. const video = document.getElementById("heroVideo"),
  3.   pauseControl = document.getElementById("pauseControl"),
  4.   playControl = document.getElementById("playControl"),
  5.   playPauseButton = document.getElementById("playPauseButton");
  7. playPauseButton.addEventListener("click", function () {
  8.   if (video.paused) {
  9.     video.play();
  10.     playPauseButton.classList.remove("play");
  11.     playPauseButton.classList.add("pause");
  12.     pauseControl.style.display = "unset";
  13.     playControl.style.display = "none";
  14.   } else {
  15.     video.pause();
  16.     playPauseButton.classList.remove("pause");
  17.     playPauseButton.classList.add("play");
  18.     pauseControl.style.display = "none";
  19.     playControl.style.display = "unset";
  20.     video.removeAttribute("controls");
  21.   }
  22. });
  23. // VIDEO CONTROLS END

字符串
这一个暂停和自动播放视频时，用户的视野（所以它不播放的背景）

  1. // VIDEO OFFLOAD START
  2. function videoOffload() {
  3.   // Get all video elements with the "video-offload" class
  4.   const videos = document.querySelectorAll(".video-offload");
  6.   // Function to handle the Intersection Observer for a single video
  7.   function handleVideoIntersection(video) {
  8.     // Define the options for the Intersection Observer
  9.     const options = {
  10.       root: null, // Use the viewport as the root
  11.       rootMargin: "0px", // No margin
  12.       threshold: 0.1, // 10% of the target element must be visible to trigger
  13.     };
  15.     // Callback function when the video enters or exits the viewport
  16.     const callback = (entries, observer) => {
  17.       entries.forEach((entry) => {
  18.         if (entry.isIntersecting) {
  19.           // The video is in the viewport, so play it and show controls
  20.           video.play();
  21.           video.removeAttribute("controls");
  22.         } else {
  23.           // The video is out of the viewport, so pause it and hide controls
  24.           video.pause();
  25.         }
  26.       });
  27.     };
  29.     // Create an Intersection Observer with the specified options and callback for the current video
  30.     const observer = new IntersectionObserver(callback, options);
  32.     // Start observing the current video element
  33.     observer.observe(video);
  34.   }
  36.   // Iterate over all video elements and apply the Intersection Observer
  37.   videos.forEach((video) => {
  38.     video.setAttribute("autoplay", "false"); // Disable autoplay initially
  40.     // Apply Intersection Observer to the current video
  41.     handleVideoIntersection(video);
  42.   });
  43. }
  45. // Call the videoOffload function to initialize
  46. videoOffload();
  48. // VIDEO OFFLOAD END

型
视频控制按钮

  1. <button id="playPauseButton" class="play">
  2.               <i id="playControl" class="fa-regular fa-circle-play fa-xl"></i>
  3.               <i id="pauseControl" class="fa-regular fa-circle-pause fa-xl"></i>
  4.             </button>

型
问题是只要我手动暂停视频（利用第一个功能）滚动出视频的视野，然后再次滚动回视频，它恢复播放（第二个函数覆盖了第一个函数）。不过，这很好，视频控制图标是反向的，你需要点击两次-暂停，然后根据暂停和播放功能逻辑播放（因为它们在点击时会发生变化，视频是由另一个功能触发的）。
它们都在同一个js文件中。我试图将它们分开保存，但问题仍然存在。
我还尝试根据IF语句将图标注入到HTML中-playPauseButton.innerHTML = "<i id='pauseControl' class='fa-regular fa-circle-pause fa-xl'></i>";，但是没有工作。
我想到的解决方案是将它们作为视频当前状态的指示器-播放或暂停，所以无论视频是如何触发的，它都会显示正确的图标或使这两个功能互不干扰。
你认为最好的解决方案和代码是什么？

Html

2条答案

按热度按时间
sirbozc5

sirbozc51#

考虑将控件管理重构为video元素上的事件侦听器。这将是视频是否正在播放的最准确的事实来源：

  1. function updateControls() {
  2.   if (video.paused) {
  3.     playPauseButton.classList.remove("pause");
  4.     playPauseButton.classList.add("play");
  5.     pauseControl.style.display = "none";
  6.     playControl.style.display = "unset";
  7.     video.removeAttribute("controls");
  8.   } else {
  9.     playPauseButton.classList.remove("play");
  10.     playPauseButton.classList.add("pause");
  11.     pauseControl.style.display = "unset";
  12.     playControl.style.display = "none";
  13.   }
  14. } 
  15.     
  16. video.addEventListener('pause', updateControls);
  17. video.addEventListener('play', updateControls);
  19. playPauseButton.addEventListener("click", function() {
  20.   if (video.paused) {
  21.     video.play();
  22.   } else {
  23.     video.pause();
  24.   }
  25. });

字符串

  1. // VIDEO CONTROLS START
  2. const video = document.getElementById("heroVideo"),
  3.   pauseControl = document.getElementById("pauseControl"),
  4.   playControl = document.getElementById("playControl"),
  5.   playPauseButton = document.getElementById("playPauseButton");
  6.   
  7. function updateControls() {
  8.   if (video.paused) {
  9.     playPauseButton.classList.remove("pause");
  10.     playPauseButton.classList.add("play");
  11.     pauseControl.style.display = "none";
  12.     playControl.style.display = "unset";
  13.     video.removeAttribute("controls");
  14.   } else {
  15.     playPauseButton.classList.remove("play");
  16.     playPauseButton.classList.add("pause");
  17.     pauseControl.style.display = "unset";
  18.     playControl.style.display = "none";
  19.   }
  20. } 
  21.     
  22. video.addEventListener('pause', updateControls);
  23. video.addEventListener('play', updateControls);
  25. playPauseButton.addEventListener("click", function() {
  26.   if (video.paused) {
  27.     video.play();
  28.   } else {
  29.     video.pause();
  30.   }
  31. });
  32. // VIDEO CONTROLS END
  34. // VIDEO OFFLOAD START
  35. function videoOffload() {
  36.   // Get all video elements with the "video-offload" class
  37.   const videos = document.querySelectorAll(".video-offload");
  39.   // Function to handle the Intersection Observer for a single video
  40.   function handleVideoIntersection(video) {
  41.     // Define the options for the Intersection Observer
  42.     const options = {
  43.       root: null, // Use the viewport as the root
  44.       rootMargin: "0px", // No margin
  45.       threshold: 0.1, // 10% of the target element must be visible to trigger
  46.     };
  48.     // Callback function when the video enters or exits the viewport
  49.     const callback = (entries, observer) => {
  50.       entries.forEach((entry) => {
  51.         if (entry.isIntersecting) {
  52.           // The video is in the viewport, so play it and show controls
  53.           video.play();
  54.           video.removeAttribute("controls");
  55.         } else {
  56.           // The video is out of the viewport, so pause it and hide controls
  57.           video.pause();
  58.         }
  59.       });
  60.     };
  62.     // Create an Intersection Observer with the specified options and callback for the current video
  63.     const observer = new IntersectionObserver(callback, options);
  65.     // Start observing the current video element
  66.     observer.observe(video);
  67.   }
  69.   // Iterate over all video elements and apply the Intersection Observer
  70.   videos.forEach((video) => {
  71.     video.setAttribute("autoplay", "false"); // Disable autoplay initially
  73.     // Apply Intersection Observer to the current video
  74.     handleVideoIntersection(video);
  75.   });
  76. }
  78. // Call the videoOffload function to initialize
  79. videoOffload();
  81. // VIDEO OFFLOAD END
  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  3. <video id="heroVideo" class="video-offload" loop controls>
  4.   <source src="https://v3.cdnpk.net/videvo_files/video/free/2013-08/large_preview/hd0992.mp4" type="video/mp4">
  5.   <source src="https://v3.cdnpk.net/videvo_files/video/free/2013-08/large_watermarked/hd0992_preview.mp4" type="video/mp4">
  6. </video>
  8. <button id="playPauseButton" class="play">
  9.   <i id="playControl" class="fa-regular fa-circle-play fa-xl"></i>
  10.   <i id="pauseControl" class="fa-regular fa-circle-pause fa-xl"></i>
  11. </button>
  13. <div style="height: 150vh"></div>
展开查看全部
赞(0）分享  回复(0）举报  2024-01-04
1tu0hz3e

1tu0hz3e2#

好的，我使用事件监听器来实现图标功能，用于视频播放或暂停。我还对状态变量进行了一些调整，该状态变量可以跟踪视频是由用户暂停还是由videoOffload（）暂停。现在视频暂停和播放工作正常，但是，可见图标只是默认的暂停图标，暂停视频后不切换到播放。所以这条语句不会被执行：

  1. pauseControl.style.display = "none";
  2.  playControl.style.display = "unset";

个字符

赞(0）分享  回复(0）举报  2024-01-04
我来回答

相关问题

    查看更多

    热门标签

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

    最新问答

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