当前位置：首页 > JavaScript

js实现播放视频

2026-03-16 07:24:34JavaScript

使用HTML5 Video元素

在HTML中嵌入<video>标签，通过JavaScript控制播放。这是最基础且兼容性较好的方法。

<video id="myVideo" width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

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

动态加载视频源

通过JavaScript动态修改视频源，适用于需要切换不同视频的场景。

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

自定义播放器控件

隐藏原生控件，通过JavaScript实现自定义按钮控制。

<video id="myVideo" width="320" height="240"></video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>

<script>
  function playVideo() {
    document.getElementById('myVideo').play();
  }
  function pauseVideo() {
    document.getElementById('myVideo').pause();
  }
</script>

监听视频事件

通过事件监听实现播放状态反馈或交互逻辑。

const video = document.getElementById('myVideo');
video.addEventListener('play', () => {
  console.log('视频开始播放');
});
video.addEventListener('ended', () => {
  console.log('视频播放结束');
});

全屏播放控制

通过JavaScript触发视频全屏模式。

const video = document.getElementById('myVideo');
if (video.requestFullscreen) {
  video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
  video.webkitRequestFullscreen();
}

使用第三方库（如Video.js）

对于更复杂的需求，可以使用成熟的视频播放库。

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

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

移动端自动播放处理

iOS等设备限制自动播放，需通过用户交互触发。

document.body.addEventListener('click', () => {
  const video = document.getElementById('myVideo');
  video.play();
}, { once: true });

流媒体播放（如HLS）

使用hls.js库实现自适应码率流播放。

js实现播放视频

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="myVideo" controls></video>

<script>
  const video = document.getElementById('myVideo');
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource('stream.m3u8');
    hls.attachMedia(video);
  }
</script>