当前位置：首页 > JavaScript

js实现切换视频

2026-01-30 23:17:48JavaScript

使用HTML5 video标签切换视频源

在HTML中嵌入video标签，通过JavaScript动态修改src属性来切换视频

<video id="myVideo" width="640" height="360" controls>
  <source src="video1.mp4" type="video/mp4">
</video>

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

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

使用数组管理多个视频源

创建一个视频源数组，通过索引切换不同视频

js实现切换视频

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

function switchVideo() {
  currentIndex = (currentIndex + 1) % videoSources.length;
  document.getElementById('myVideo').src = videoSources[currentIndex];
  document.getElementById('myVideo').load();
  document.getElementById('myVideo').play();
}

添加过渡效果

在切换视频时添加淡入淡出效果增强用户体验

#myVideo {
  transition: opacity 0.5s ease-in-out;
}

.fade-out {
  opacity: 0;
}

function changeVideoWithFade(newSrc) {
  const video = document.getElementById('myVideo');

  video.classList.add('fade-out');

  setTimeout(() => {
    video.src = newSrc;
    video.load();
    video.oncanplay = function() {
      video.classList.remove('fade-out');
      video.play();
    };
  }, 500);
}

使用MediaSource Extensions API

对于需要拼接或动态生成的视频流，可以使用更高级的MediaSource API

js实现切换视频

const video = document.getElementById('myVideo');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', function() {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

  fetch('video1.mp4')
    .then(response => response.arrayBuffer())
    .then(data => {
      sourceBuffer.appendBuffer(data);
    });
});

function switchVideoWithMSE(newVideoUrl) {
  const sourceBuffer = mediaSource.sourceBuffers[0];

  fetch(newVideoUrl)
    .then(response => response.arrayBuffer())
    .then(data => {
      sourceBuffer.appendBuffer(data);
    });
}

处理视频预加载

提前加载视频以减少切换时的缓冲时间

const videoCache = {};

function preloadVideos(videoUrls) {
  videoUrls.forEach(url => {
    fetch(url)
      .then(response => response.blob())
      .then(blob => {
        videoCache[url] = URL.createObjectURL(blob);
      });
  });
}

function playPreloadedVideo(url) {
  const video = document.getElementById('myVideo');
  video.src = videoCache[url];
  video.play();
}

响应式视频切换

根据屏幕尺寸切换不同分辨率的视频

function getOptimalVideoSource() {
  const screenWidth = window.innerWidth;
  let videoSrc;

  if (screenWidth >= 1920) {
    videoSrc = 'video-4k.mp4';
  } else if (screenWidth >= 1280) {
    videoSrc = 'video-hd.mp4';
  } else {
    videoSrc = 'video-sd.mp4';
  }

  return videoSrc;
}

window.addEventListener('resize', function() {
  const optimalSrc = getOptimalVideoSource();
  if (document.getElementById('myVideo').src !== optimalSrc) {
    changeVideo(optimalSrc);
  }
});