当前位置：首页 > JavaScript

js实现视频

2026-02-02 01:25:53JavaScript

使用HTML5 Video元素

在HTML中嵌入<video>标签，通过JavaScript控制播放行为。这是最基础的原生实现方式，无需第三方库。

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

<script>
  const video = document.getElementById('myVideo');
  video.play(); // 播放
  video.pause(); // 暂停
</script>

自定义播放器控件

通过JavaScript完全自定义UI和控制逻辑，隐藏原生控件并添加自定义按钮。

document.querySelector('.play-btn').addEventListener('click', () => {
  video.play();
});

document.querySelector('.volume-slider').addEventListener('input', (e) => {
  video.volume = e.target.value;
});

使用Video.js库

引入Video.js可快速实现跨浏览器兼容的播放器，支持HLS/DASH等流媒体协议。

js实现视频

<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet">
<video id="myPlayer" class="video-js" data-setup='{}'>
  <source src="video.m3u8" type="application/x-mpegURL">
</video>

<script src="https://vjs.zencdn.net/7.20.3/video.js"></script>
<script>
  const player = videojs('myPlayer');
</script>

实现画中画模式

利用浏览器API开启画中画功能，需注意兼容性检查。

document.querySelector('.pip-btn').addEventListener('click', async () => {
  if (document.pictureInPictureEnabled) {
    await video.requestPictureInPicture();
  }
});

视频截图功能

通过Canvas捕获视频帧，实现截图保存功能。

js实现视频

document.querySelector('.capture-btn').addEventListener('click', () => {
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  const img = document.createElement('img');
  img.src = canvas.toDataURL();
  document.body.appendChild(img);
});

实时滤镜处理

结合Canvas和requestAnimationFrame实现实时视频滤镜效果。

function applyFilter() {
  const canvas = document.querySelector('#filterCanvas');
  const ctx = canvas.getContext('2d');
  ctx.filter = 'sepia(100%)';
  ctx.drawImage(video, 0, 0);
  requestAnimationFrame(applyFilter);
}
video.addEventListener('play', applyFilter);

视频分段播放

使用timeupdate事件监听实现分段播放控制。

const segments = [{start: 10, end: 15}, {start: 20, end: 25}];
video.addEventListener('timeupdate', () => {
  segments.forEach(seg => {
    if (video.currentTime > seg.end) {
      video.currentTime = seg.start;
    }
  });
});

MSE高级应用

使用Media Source Extensions API实现动态视频源加载。

const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
  fetch('video_chunk.mp4').then(res => res.arrayBuffer())
    .then(data => sourceBuffer.appendBuffer(data));
});