当前位置：首页 > JavaScript

js实现切换视频

2026-03-01 14:21:10JavaScript

切换视频的实现方法

在JavaScript中实现视频切换功能可以通过多种方式完成，以下是几种常见的实现方法：

使用HTML5 video元素和JavaScript控制

创建一个video元素并准备多个视频源，通过JavaScript动态切换src属性：

js实现切换视频

<video id="myVideo" controls>
  <source src="video1.mp4" type="video/mp4">
</video>

<button onclick="switchVideo('video2.mp4')">切换视频</button>

function switchVideo(newSource) {
  const video = document.getElementById('myVideo');
  video.src = newSource;
  video.load();
  video.play();
}

多个video元素切换显示

使用CSS隐藏不需要的视频，只显示当前活动的视频：

js实现切换视频

<div class="video-container">
  <video id="video1" controls class="active">
    <source src="video1.mp4" type="video/mp4">
  </video>
  <video id="video2" controls>
    <source src="video2.mp4" type="video/mp4">
  </video>
</div>

<button onclick="switchToVideo(2)">切换到视频2</button>

function switchToVideo(videoNumber) {
  document.querySelectorAll('.video-container video').forEach(video => {
    video.classList.remove('active');
  });
  document.getElementById(`video${videoNumber}`).classList.add('active');
}

使用video.js等第三方库

video.js提供了更丰富的视频控制功能，包括视频切换：

var player = videojs('my-video');

function switchVideo(newSource) {
  player.src({type: 'video/mp4', src: newSource});
  player.play();
}

实现播放列表功能

创建一个视频播放列表，按顺序或随机播放：

const playlist = [
  'video1.mp4',
  'video2.mp4',
  'video3.mp4'
];
let currentIndex = 0;

function playNextVideo() {
  currentIndex = (currentIndex + 1) % playlist.length;
  switchVideo(playlist[currentIndex]);
}