当前位置：首页 > JavaScript

js实现视频播放

2026-04-04 02:57:38JavaScript

使用HTML5 Video元素实现基础播放

HTML5提供了<video>标签，可以直接嵌入视频并控制播放。JavaScript可用于增强交互性。

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持HTML5视频
</video>

<script>
  const video = document.getElementById('myVideo');
  // 播放
  video.play(); 
  // 暂停
  video.pause();
  // 跳转到特定时间
  video.currentTime = 10;
</script>

自定义播放器控件

通过JavaScript完全自定义播放器界面，隐藏原生控件并添加自定义按钮。

<video id="customVideo" width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<div>
  <button id="playBtn">播放</button>
  <button id="pauseBtn">暂停</button>
  <input type="range" id="progressBar" min="0" max="100">
</div>

<script>
  const video = document.getElementById('customVideo');
  document.getElementById('playBtn').addEventListener('click', () => video.play());
  document.getElementById('pauseBtn').addEventListener('click', () => video.pause());

  video.addEventListener('timeupdate', () => {
    const progress = (video.currentTime / video.duration) * 100;
    document.getElementById('progressBar').value = progress;
  });
</script>

使用Video.js库实现高级功能

Video.js是一个开源的HTML5视频播放器库，支持多种格式和插件。

js实现视频播放

<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet">
<video id="advVideo" class="video-js" controls preload="auto" width="640" height="264">
  <source src="movie.mp4" type="video/mp4">
</video>

<script src="https://vjs.zencdn.net/7.20.3/video.js"></script>
<script>
  const player = videojs('advVideo');
  player.ready(function() {
    // 添加水印插件等扩展功能
  });
</script>

处理全屏播放

现代浏览器提供了全屏API，可以控制视频全屏显示。

function toggleFullscreen() {
  const video = document.getElementById('myVideo');
  if (!document.fullscreenElement) {
    video.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`);
    });
  } else {
    document.exitFullscreen();
  }
}

添加字幕轨道

HTML5视频支持WebVTT格式的字幕文件。

js实现视频播放

<video id="subVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  <track label="English" kind="subtitles" srclang="en" src="subtitles.vtt" default>
</video>

响应式视频布局

通过CSS确保视频在不同设备上正确显示。

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9宽高比 */
  height: 0;
  overflow: hidden;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

处理自适应流媒体

对于HLS或DASH等自适应流媒体格式，可以使用hls.js或dash.js库。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('hlsVideo');
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource('stream.m3u8');
    hls.attachMedia(video);
  }
</script>