如何通过HTML5中Video标签的DefaultPlaybackRate设置初始播放速度-H5教程-PHP中文网

defaultplaybackrate属性用于设置视频加载后的初始播放速度，仅chrome完全支持，需在loadedmetadata事件中设置，且不改变当前播放速度；playbackrate则立即生效并兼容所有浏览器。

如何通过html5中video标签的defaultplaybackrate设置初始播放速度

直接在 JavaScript 中设置 defaultPlaybackRate 属性，就能指定视频加载后的初始默认播放速度。这个值只影响新开始播放时的默认状态，不改变当前正在播放的速度（那得用 playbackRate）。

注意：defaultPlaybackRate 是一个仅 Chrome 完全支持的属性，其他主流浏览器（如 Safari、Firefox、Edge）目前不识别或忽略该设置。所以它不适合做跨浏览器的可靠控制，更多是作为 Chrome 下的补充优化。

设置 defaultPlaybackRate 的正确时机

必须等视频元信息加载完成后再设置，否则可能无效。推荐监听 loadedmetadata 事件：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

const video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', () => {
  video.defaultPlaybackRate = 0.8; // 设为 0.8 倍速作为默认
});

也可以在 canplay 或 canplaythrough 事件中设，但 loadedmetadata 最早且足够——此时宽高、时长等已知，播放器已准备好应用默认速率。

和 playbackRate 的区别要分清

defaultPlaybackRate = 0.8
→ 下次调用 video.play() 时，会以 0.8 倍速启动（仅 Chrome 有效）
video.playbackRate = 0.8
→ 立即生效，改变当前播放速度，所有现代浏览器都支持

所以如果你的目标是“用户一点击播放就按慢速开始”，在 Chrome 中可设 defaultPlaybackRate；但为兼容性，更稳妥的做法是：
在 play 事件或按钮点击时，同步设 playbackRate，并搭配 localStorage 记住用户偏好。

实际建议组合写法

const video = document.getElementById('myVideo');
const savedRate = parseFloat(localStorage.getItem('videoRate')) || 1.0;

video.addEventListener('loadedmetadata', () => {
  // Chrome 下设默认值（可选）
  if ('defaultPlaybackRate' in video) {
    video.defaultPlaybackRate = savedRate;
  }
  // 所有浏览器都立即应用一次（确保生效）
  video.playbackRate = savedRate;
});

// 播放时再兜底一次（防中途重载）
video.addEventListener('play', () => {
  video.playbackRate = savedRate;
});