带Toggle开关的按钮切换视频功能实现方案问询

Got it, let's build this step by step. We'll use vanilla HTML/CSS/JS so it's lightweight and easy to tweak for your cartoon videos. Here's a complete implementation that matches your requirements:

1. HTML Structure #

We'll use a checkbox for the toggle (since it has a built-in checked state we can leverage), a container to hold the intro video and buttons, and separate video elements for each cartoon clip.

<!-- Toggle Switch -->
<div class="toggle-container">
  <label class="toggle-switch">
    <input type="checkbox" id="videoToggle">
    <span class="slider"></span>
  </label>
  <span>Show Cartoon Player</span>
</div>

<!-- Video & Buttons Container (Hidden by Default) -->
<div id="playerContainer" class="player-container hidden">
  <!-- Intro Video -->
  <video id="introVideo" class="cartoon-video" controls autoplay muted loop>
    <source src="intro.mp4" type="video/mp4">
    Your browser doesn't support HTML5 video.
  </video>

  <!-- Target Videos (Hidden by Default) -->
  <video id="video1" class="cartoon-video hidden" controls>
    <source src="video1.mp4" type="video/mp4">
    Your browser doesn't support HTML5 video.
  </video>
  <video id="video2" class="cartoon-video hidden" controls>
    <source src="video2.mp4" type="video/mp4">
    Your browser doesn't support HTML5 video.
  </video>
  <video id="video3" class="cartoon-video hidden" controls>
    <source src="video3.mp4" type="video/mp4">
    Your browser doesn't support HTML5 video.
  </video>

  <!-- Button Group -->
  <div class="btn-group">
    <button class="video-btn" data-target="video1">Play Clip 1</button>
    <button class="video-btn" data-target="video2">Play Clip 2</button>
    <button class="video-btn" data-target="video3">Play Clip 3</button>
  </div>
</div>

2. CSS Styling #

We'll style the toggle to look like a proper switch, hide the player container by default, and add some basic layout to make it look clean.

/* Toggle Switch Styles */
.toggle-container {
  margin: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Arial, sans-serif;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Player Container Styles */
.player-container {
  margin: 20px;
  max-width: 600px;
}

.cartoon-video {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.hidden {
  display: none !important;
}

/* Button Group Styles */
.btn-group {
  display: flex;
  gap: 10px;
}

.video-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #2196F3;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.video-btn:hover {
  background-color: #1976D2;
}

3. JavaScript Logic #

We'll handle the toggle's show/hide behavior, and button clicks to switch between videos.

// Get DOM elements
const toggle = document.getElementById('videoToggle');
const playerContainer = document.getElementById('playerContainer');
const introVideo = document.getElementById('introVideo');
const videoButtons = document.querySelectorAll('.video-btn');
const allVideos = document.querySelectorAll('.cartoon-video');

// Toggle player container visibility when switch is clicked
toggle.addEventListener('change', () => {
  if (toggle.checked) {
    playerContainer.classList.remove('hidden');
    // Restart intro video when showing the player
    introVideo.currentTime = 0;
    introVideo.play();
  } else {
    playerContainer.classList.add('hidden');
    // Pause all videos when hiding the player
    allVideos.forEach(video => video.pause());
  }
});

// Handle button clicks to play target videos
videoButtons.forEach(button => {
  button.addEventListener('click', () => {
    const targetVideoId = button.dataset.target;
    const targetVideo = document.getElementById(targetVideoId);

    // Pause and hide all videos first
    allVideos.forEach(video => {
      video.pause();
      video.classList.add('hidden');
    });

    // Show and play the target video
    targetVideo.classList.remove('hidden');
    targetVideo.currentTime = 0;
    targetVideo.play();
  });
});

Key Notes & Customization Tips #

• Video Paths: Make sure to replace intro.mp4, video1.mp4, etc., with your actual video file paths.
• Autoplay/Mute: Browsers block autoplay unless videos are muted (hence the muted attribute on the intro video). You can adjust this if needed, but keep browser restrictions in mind.
• Loop Intro: The intro has loop set so it plays repeatedly until a button is clicked. Remove this if you don't want it to loop.
• Styling: Tweak the CSS colors, sizes, and layout to match your cartoon's aesthetic.
• Preloading: Add preload="auto" to video elements if you want videos to load in advance (good for small clips, but avoid for large files to save bandwidth).

内容的提问来源于stack exchange，提问作者Vangelis Markos