当前位置：首页 > JavaScript

js实现切换视频

2026-04-04 15:06:37JavaScript

切换视频的实现方法

在JavaScript中切换视频可以通过操作<video>元素的src属性或动态加载新的视频源来实现。以下是几种常见方法：

动态修改视频源

通过修改<video>元素的src属性来切换视频：

const videoElement = document.getElementById('myVideo');
videoElement.src = 'new-video.mp4';
videoElement.load(); // 重新加载视频
videoElement.play(); // 自动播放新视频

使用多个视频元素

在HTML中放置多个<video>元素，通过显示/隐藏来切换：

js实现切换视频

<video id="video1" src="video1.mp4" controls></video>
<video id="video2" src="video2.mp4" controls style="display:none;"></video>

function switchVideo() {
    document.getElementById('video1').style.display = 'none';
    document.getElementById('video2').style.display = 'block';
    document.getElementById('video2').play();
}

使用视频列表

维护一个视频列表，按顺序切换：

const videos = ['video1.mp4', 'video2.mp4', 'video3.mp4'];
let currentVideoIndex = 0;
const videoElement = document.getElementById('myVideo');

function playNextVideo() {
    currentVideoIndex = (currentVideoIndex + 1) % videos.length;
    videoElement.src = videos[currentVideoIndex];
    videoElement.load();
    videoElement.play();
}

监听视频结束事件

js实现切换视频

自动播放下一个视频：

videoElement.addEventListener('ended', playNextVideo);

使用MediaSource Extensions

对于更高级的场景，可以使用MediaSource API动态切换视频源：

const mediaSource = new MediaSource();
videoElement.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    fetch('new-video.mp4')
        .then(response => response.arrayBuffer())
        .then(data => {
            sourceBuffer.appendBuffer(data);
        });
});