JavaScript 视频加载与播放优化：如何确保视频稳定自动播放？

应用场景

在 Web 开发中，很多网站都会嵌入视频，例如：

• 在线课程平台：需要确保视频播放流畅，避免加载失败影响用户体验。

• 社交媒体：短视频平台需要自动播放功能，保证无缝切换。

• 广告行业：视频广告必须确保成功加载，并符合自动播放规则。

案例分析

假设你正在开发一个视频播放应用，当用户访问页面时，视频需要自动播放且保证加载完毕。然而，直接调用 video.play() 可能会遇到：

1. 浏览器策略限制：部分浏览器要求视频必须静音才能自动播放。

2. 网络加载问题：视频未完全加载，导致 play() 失败。

3. 事件监听问题：未正确监听 playing 和 timeupdate，导致状态判断出错。

为了确保视频稳定播放，我们对代码进行了优化，接下来是详细解析和优化方案。

---

常见问题分析

1. 基础设置

const video = document.createElement("video");
video.playsInline = true;  // 允许移动端内联播放
video.muted = true;        // 静音（自动播放必须）
video.loop = true;         // 循环播放

• 静音 (muted)：浏览器策略要求静音才能自动播放。

• 内联播放 (playsInline)：防止移动端视频强制全屏。

2. 事件监听问题

let playing = false;
let timeupdate = false;

video.addEventListener("playing", () => {
  playing = true;
  checkReady();
}, true);

video.addEventListener("timeupdate", () => {
  timeupdate = true;
  checkReady();
}, true);

• playing 事件：视频开始播放时触发。

• timeupdate 事件：播放时间更新时触发。

• 问题：checkReady() 依赖 playing 和 timeupdate，但 copyVideo 未定义！

3. 视频加载与播放

video.src = url;
video.play();  // 依赖静音自动播放

• 直接调用 play() 可能失败，应捕获异常。

4. 状态检查问题

function checkReady() {
  if (playing && timeupdate) {
    copyVideo = true;  // 问题：变量未声明
  }
}

• 问题：copyVideo 未在作用域中声明，可能导致运行时错误。

---

优化方案

1. 修复变量作用域问题

function setupVideo(url) {
  const video = document.createElement("video");
  let playing = false;
  let timeupdate = false;
  let copyVideo = false;  // 明确声明

  video.playsInline = true;
  video.muted = true;
  video.loop = true;

2. 添加错误处理

  video.addEventListener("error", (e) => {
    console.error("视频加载失败:", e.target.error);
  });

3. 事件监听优化

  video.addEventListener("playing", () => {
    playing = true;
    checkReady();
  });

  video.addEventListener("timeupdate", () => {
    timeupdate = true;
    checkReady();
  });

• 移除第三个参数 true，避免不必要的捕获阶段监听。

4. 处理自动播放失败

  video.src = url;
  video.play().catch(err => {
    console.error("自动播放失败:", err);
  });

5. 重新定义 checkReady()

  function checkReady() {
    if (playing && timeupdate && !copyVideo) {
      copyVideo = true;
      console.log("视频已准备好");
    }
  }

6. 返回视频和状态

  return {
    video,
    isReady: () => copyVideo  // 通过方法暴露状态
  };
}

---

完整优化代码

function setupVideo(url) {
  const video = document.createElement("video");
  let playing = false;
  let timeupdate = false;
  let copyVideo = false;

  video.playsInline = true;
  video.muted = true;
  video.loop = true;

  video.addEventListener("playing", () => {
    playing = true;
    checkReady();
  });

  video.addEventListener("timeupdate", () => {
    timeupdate = true;
    checkReady();
  });

  video.addEventListener("error", (e) => {
    console.error("视频加载失败:", e.target.error);
  });

  video.src = url;
  video.play().catch(err => {
    console.error("自动播放失败:", err);
  });

  function checkReady() {
    if (playing && timeupdate && !copyVideo) {
      copyVideo = true;
      console.log("视频已准备好");
    }
  }

  return {
    video,
    isReady: () => copyVideo
  };
}

---

如何使用？

const { video, isReady } = setupVideo("video.mp4");
document.body.appendChild(video);

const checkInterval = setInterval(() => {
  if (isReady()) {
    clearInterval(checkInterval);
    console.log("视频已准备好，可以执行后续操作");
  }
}, 100);

---

优化总结

问题	优化方式
copyVideo 未定义	明确声明变量
play() 可能失败	捕获 Promise 异常
事件监听问题	移除 true 避免不必要的捕获阶段
缺少错误处理	监听 error 事件
checkReady() 多次触发	增加 !copyVideo 判断

此优化方案可确保视频在加载完毕后正确播放，并暴露 isReady() 方法供外部使用，提升代码可维护性与兼容性！