HTML5视频播放时防止屏幕自动休眠的API调用-H5教程-PHP中文网

需使用 screen wake lock api 保持屏幕常亮，仅 chromium（chrome 84+等）和 firefox 119+ 支持，safari 需引导用户手动设置；须 https/localhost 环境且用户手势触发，播放时请求、暂停/结束时释放锁。

html5视频播放时防止屏幕自动休眠的api调用

在HTML5视频播放时防止设备屏幕自动休眠，需使用 Screen Wake Lock API。该API允许网页在特定场景（如播放视频、导航、下载）下请求保持屏幕常亮，但需满足安全上下文（HTTPS 或 localhost）且用户已与页面发生交互（如点击、触摸）。

启用 Wake Lock 的基本步骤

需先检查浏览器支持，再请求锁屏权限，并在播放开始时激活、暂停/结束时释放：

调用 navigator.wakeLock.request("screen") 获取 WakeLockSentinel 实例
将实例保存为变量，用于后续释放（.release()）
监听播放状态变化（如 play、pause、ended 事件）动态管理锁
捕获 NotAllowedError 等异常，降级处理（如提示用户手动保持唤醒）

兼容性与权限要求

当前仅 Chromium 内核浏览器（Chrome 84+、Edge 84+、Opera 70+）和 Firefox 119+ 原生支持 Screen Wake Lock。Safari 尚未实现，需通过引导用户开启系统级“防止自动锁定”设置作为补充方案。必须满足：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

页面运行在 HTTPS 或 localhost 环境下
调用 request() 前已有用户手势触发（如点击播放按钮）
不能在页面加载时自动调用，否则会抛出 NotAllowedError

实用代码示例

以下为轻量集成方式，适配常见播放控制逻辑：

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock 被释放');
    });
  } catch (err) {
    console.warn('无法启用 Wake Lock:', err.name, err.message);
  }
}

const video = document.querySelector('#myVideo');
video.addEventListener('play', () => {
  if ('wakeLock' in navigator) requestWakeLock();
});
video.addEventListener('pause', () => {
  if (wakeLock) wakeLock.release().then(() => wakeLock = null);
});
video.addEventListener('ended', () => {
  if (wakeLock) wakeLock.release().then(() => wakeLock = null);
});