html 视频播放选项

ryevplcw 于 11个月前发布在其他

关注(0)|答案(2)|浏览(193)

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

// VIDEO CONTROLS START
const video = document.getElementById("heroVideo"),
  pauseControl = document.getElementById("pauseControl"),
  playControl = document.getElementById("playControl"),
  playPauseButton = document.getElementById("playPauseButton");

playPauseButton.addEventListener("click", function () {
  if (video.paused) {
    video.play();
    playPauseButton.classList.remove("play");
    playPauseButton.classList.add("pause");
    pauseControl.style.display = "unset";
    playControl.style.display = "none";
  } else {
    video.pause();
    playPauseButton.classList.remove("pause");
    playPauseButton.classList.add("play");
    pauseControl.style.display = "none";
    playControl.style.display = "unset";
    video.removeAttribute("controls");
  }
});
// VIDEO CONTROLS END

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

// VIDEO OFFLOAD START
function videoOffload() {
  // Get all video elements with the "video-offload" class
  const videos = document.querySelectorAll(".video-offload");

  // Function to handle the Intersection Observer for a single video
  function handleVideoIntersection(video) {
    // Define the options for the Intersection Observer
    const options = {
      root: null, // Use the viewport as the root
      rootMargin: "0px", // No margin
      threshold: 0.1, // 10% of the target element must be visible to trigger
    };

    // Callback function when the video enters or exits the viewport
    const callback = (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // The video is in the viewport, so play it and show controls
          video.play();
          video.removeAttribute("controls");
        } else {
          // The video is out of the viewport, so pause it and hide controls
          video.pause();
        }
      });
    };

    // Create an Intersection Observer with the specified options and callback for the current video
    const observer = new IntersectionObserver(callback, options);

    // Start observing the current video element
    observer.observe(video);
  }

  // Iterate over all video elements and apply the Intersection Observer
  videos.forEach((video) => {
    video.setAttribute("autoplay", "false"); // Disable autoplay initially

    // Apply Intersection Observer to the current video
    handleVideoIntersection(video);
  });
}

// Call the videoOffload function to initialize
videoOffload();

// VIDEO OFFLOAD END

型
视频控制按钮

<button id="playPauseButton" class="play">
              <i id="playControl" class="fa-regular fa-circle-play fa-xl"></i>
              <i id="pauseControl" class="fa-regular fa-circle-pause fa-xl"></i>
            </button>

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

Html

来源：https://stackoverflow.com/questions/77710548/video-play-options

2条答案

按热度按时间

sirbozc51#

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

function updateControls() {
  if (video.paused) {
    playPauseButton.classList.remove("pause");
    playPauseButton.classList.add("play");
    pauseControl.style.display = "none";
    playControl.style.display = "unset";
    video.removeAttribute("controls");
  } else {
    playPauseButton.classList.remove("play");
    playPauseButton.classList.add("pause");
    pauseControl.style.display = "unset";
    playControl.style.display = "none";
  }
} 
    
video.addEventListener('pause', updateControls);
video.addEventListener('play', updateControls);

playPauseButton.addEventListener("click", function() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

字符串

// VIDEO CONTROLS START
const video = document.getElementById("heroVideo"),
  pauseControl = document.getElementById("pauseControl"),
  playControl = document.getElementById("playControl"),
  playPauseButton = document.getElementById("playPauseButton");
  
function updateControls() {
  if (video.paused) {
    playPauseButton.classList.remove("pause");
    playPauseButton.classList.add("play");
    pauseControl.style.display = "none";
    playControl.style.display = "unset";
    video.removeAttribute("controls");
  } else {
    playPauseButton.classList.remove("play");
    playPauseButton.classList.add("pause");
    pauseControl.style.display = "unset";
    playControl.style.display = "none";
  }
} 
    
video.addEventListener('pause', updateControls);
video.addEventListener('play', updateControls);

playPauseButton.addEventListener("click", function() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});
// VIDEO CONTROLS END

// VIDEO OFFLOAD START
function videoOffload() {
  // Get all video elements with the "video-offload" class
  const videos = document.querySelectorAll(".video-offload");

  // Function to handle the Intersection Observer for a single video
  function handleVideoIntersection(video) {
    // Define the options for the Intersection Observer
    const options = {
      root: null, // Use the viewport as the root
      rootMargin: "0px", // No margin
      threshold: 0.1, // 10% of the target element must be visible to trigger
    };

    // Callback function when the video enters or exits the viewport
    const callback = (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // The video is in the viewport, so play it and show controls
          video.play();
          video.removeAttribute("controls");
        } else {
          // The video is out of the viewport, so pause it and hide controls
          video.pause();
        }
      });
    };

    // Create an Intersection Observer with the specified options and callback for the current video
    const observer = new IntersectionObserver(callback, options);

    // Start observing the current video element
    observer.observe(video);
  }

  // Iterate over all video elements and apply the Intersection Observer
  videos.forEach((video) => {
    video.setAttribute("autoplay", "false"); // Disable autoplay initially

    // Apply Intersection Observer to the current video
    handleVideoIntersection(video);
  });
}

// Call the videoOffload function to initialize
videoOffload();

// VIDEO OFFLOAD END

<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" />

<video id="heroVideo" class="video-offload" loop controls>
  <source src="https://v3.cdnpk.net/videvo_files/video/free/2013-08/large_preview/hd0992.mp4" type="video/mp4">
  <source src="https://v3.cdnpk.net/videvo_files/video/free/2013-08/large_watermarked/hd0992_preview.mp4" type="video/mp4">
</video>

<button id="playPauseButton" class="play">
  <i id="playControl" class="fa-regular fa-circle-play fa-xl"></i>
  <i id="pauseControl" class="fa-regular fa-circle-pause fa-xl"></i>
</button>

<div style="height: 150vh"></div>

赞(0）回复(0）举报 11个月前

1tu0hz3e2#

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

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

个字符

赞(0）回复(0）举报 11个月前

我来回答

html 视频播放选项

2条答案

相关问题

热门标签

最新问答