JavaScript 以及 HTML5实现视频播放的平滑过渡-前端教程-前军教程网

想象一下，你正在为你的朋友举办一个生日聚会，他非常喜欢音乐视频。你想要给他一个特别的惊喜：在聚会期间播放一个由他最喜欢的音乐视频组成的串烧。为了让这个视觉体验更加完美，你需要确保在视频之间进行平滑切换，避免任何尴尬的停顿。幸运的是，你有一些 HTML 和 JavaScript 的基础知识，所以你决定用这些技能来制作一个自定义的视频播放器，实现无缝切换。

在本文中，我们将展示如何使用 JavaScript 和 HTML5 的 <video> 标签在不同视频之间实现平滑过渡，让你可以为你的朋友创造一个令人难忘的音乐视频串烧。

要实现视频播放中断切换并顺利过渡，可以使用 JavaScript 以及 HTML5 的 <video> 标签来实现。以下是一个基本的示例，展示了如何在两个视频之间平滑切换。

首先，我们需要在 HTML 文件中创建两个视频标签：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #videoContainer {
        position: relative;
      }

      video {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="videoContainer">
      <br>
    		<button onclick="myFunction()" style="width: 80px;height: 30px;">Click me</button>
    	<br>
      <video id="video2" width="640" height="360" preload="auto">
        <source src="video2.mp4" type="video/mp4" />
      </video>
      <video id="video1" width="640" height="360" preload="auto">
        <source src="video1.mp4" type="video/mp4" />
      </video>
    </div>
    <script src="script.js"></script>
  </body>
</html>

然后，我们需要创建一个 JavaScript 文件（如 script.js），并编写以下代码：

const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');

// 当第一个视频播放完毕时触发
video1.onended = () => {
  // 隐藏第一个视频
  video1.style.opacity = 0;
    video2.style.opacity = 1;
  // 开始播放第二个视频
  video2.play();
};

function myFunction() {
    // ：播放第一个视频
    video1.play();
  }

在此示例中，当第一个视频播放完毕时，我们将其隐藏并开始播放第二个视频。这样可以实现在两个视频之间平滑切换。请注意，此示例仅在视频结束时切换，如果需要在特定时间点或根据其他条件进行切换，可以修改代码以适应需求。

如果你希望在视频切换时有更丝滑的过渡效果，可以尝试使用 CSS 动画。例如，在 JavaScript 中添加以下代码：

// 定义一个用于执行过渡动画的函数
function fadeTransition(videoOut, videoIn, duration) {
  videoOut.style.transition = `opacity ${duration}ms`;
    videoOut.style.opacity = 0;
  
    videoIn.style.opacity = 1;
    videoIn.play();
    
    setTimeout(() => {
       videoOut.style.display = 'none';
       videoOut.style.opacity = 1;
       videoOut.style.transition = '';

      
     }, duration);
}

// 修改 onended 事件处理程序
video1.onended = () => {
  fadeTransition(video1, video2, 500);
};

这段代码定义了一个 fadeTransition 函数，该函数会渐隐当前播放的视频并播放下一个视频。在这个例子中，我们在第一个视频结束时调用该函数，实现了两个视频之间的平滑过渡。

但是实际操作中，似乎没有动画的时候，感觉反而更流畅，这个就需要反复调试测试了。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

JavaScript 以及 HTML5实现视频播放的平滑过渡