JS控制视频播放：play与pause使用教程

本文深入讲解了如何使用JavaScript的play()和pause()方法精准控制HTML5视频的播放与暂停，涵盖获取video元素、处理自动播放被浏览器拦截的兼容性问题（通过Promise捕获错误）、结合按钮实现状态切换及实时更新UI等核心实践技巧，帮助开发者快速构建稳定、用户友好的视频交互功能。

JavaScript 可以轻松控制 HTML5 视频的播放、暂停等行为，主要通过操作 元素提供的方法来实现。最常用的就是 play() 和 pause() 方法。

获取视频元素

要控制视频，先要在 JavaScript 中获取到页面中的 video 元素。可以通过 ID、类名或其他选择器方式获取，通常使用 document.getElementById 最为直接。

const video = document.getElementById('myVideo');

使用 play() 播放视频

调用 play() 方法可以让视频开始播放。这个方法返回一个 Promise，可以用来处理自动播放被浏览器阻止的情况。

• video.play(); // 开始播放
• 如果浏览器阻止自动播放（如无用户交互），Promise 会返回拒绝状态，可做提示处理

video.play().then(() => {
  console.log('播放成功');
}).catch(error => {
  console.log('播放失败：', error);
});

使用 pause() 暂停视频

调用 pause() 方法会暂停当前正在播放的视频。这个方法没有返回值，也不需要参数。

video.pause(); // 暂停播放

结合按钮控制播放/暂停

实际开发中，常通过按钮点击切换播放和暂停状态。

<video id="myVideo" width="640">
  <source src="example.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>
<button id="toggleBtn">播放</button>

const video = document.getElementById('myVideo');
const button = document.getElementById('toggleBtn');

button.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    button.textContent = '暂停';
  } else {
    video.pause();
    button.textContent = '播放';
  }
});

基本上就这些。通过监听视频状态（如 paused 属性），再调用 play 或 pause 方法，就能实现基本控制。注意部分浏览器对自动播放有限制，建议在用户操作后触发播放行为。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS控制视频播放：play与pause使用教程》文章吧，也可关注golang学习网公众号了解相关技术文章。