如何在HTML5中更改视频播放速度？

Question

如何在HTML5中更改视频播放速度？我已经查看了w3school中的video标签属性，但是没有找到相应方法。

- Young

Answer 1

根据这个网站，playbackRate和defaultPlaybackRate属性被支持，并可以通过DOM访问。例如：

/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();

/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;

上述 方法 可在 Chrome 43+, Firefox 20+, IE 9+ 和 Edge 12+ 上使用。

- Jeremy Visser

---

感谢这个有用的资源。尽管Firefox不支持我使用的属性，但是在Chrome中我制作了一个演示，可以很好地工作。我猜我的老板会喜欢它。谢谢！ - Young

playbackRate自Firefox 20版本起就可以使用，同时在Chrome浏览器中也可用。 - Janus Troelsen

这段代码在一开始运行时可以正常工作，但如果在进程后期运行，例如在window.onload=function(){document.getElementById("master_video").defaultPlaybackRate=0.1;document.getElementById("master_video").play();}中，则无法正常工作。 - john-jones

它在Ionic Android上无法工作...我正在使用HTML5视频播放器在Ionic框架中为Android，但它不支持播放速率......... - Dinesh R Rajput

同一页面中多个视频播放器无法正常工作。只有第一个可以正常播放，其他的以正常速度播放。 - Sushan

@Sushan .querySelector 返回第一个匹配项。你可以使用 .querySelectorAll，但是你需要通过迭代它们来使用代码而不是直接使用这些答案中的代码。 - leewz

Answer 2

只需输入

document.querySelector('video').playbackRate = 1.25;

在你现代浏览器的JS控制台中。

- Andrey Panasyuk

---

视频元素的某些属性可能会阻止此命令的运行。如果控制台命令失败，请在检查器中查找视频元素及其父元素的属性，并删除阻止用户与视频进行交互的属性，然后再次尝试运行该命令。 - Christopher Harwood

我将这段代码复制粘贴到浏览器的F12开发者工具中，它可以正常运行。 - Marco Aurelio Fernandez Reyes

要对所有视频生效，请使用 document.querySelectorAll('video').forEach(function(el, i) { el.playbackRate = 1.25; }); 这对于存在于页面中的隐藏视频标签的电子学习非常有用，以便对它们进行影响。 - undefined

要对所有视频生效，请使用document.querySelectorAll('video').forEach(function(el, i) { el.playbackRate = 1.25; });。这在电子学习中非常有用，因为页面中可能存在隐藏的视频标签，所以需要对它们都生效。 - Joshua Graham

Answer 3

(在播放YouTube视频时在Chrome中测试过，但应该可以在任何地方使用--特别适用于加快在线培训视频的速度)。

对于希望将它们添加为"书签脚本"（包含JavaScript代码而不是URL的书签）到浏览器中的任何人，请使用以下浏览器书签名称和URL，并向浏览器顶部添加以下每个书签。 在复制下面每个书签的“URL”部分时，请将整个多行代码块（包括换行符）复制到浏览器中的书签创建工具的“URL”字段中。

名称: 0.5x
URL:

javascript:

document.querySelector('video').playbackRate = 0.5;

名称：1.0x
网址：

javascript:

document.querySelector('video').playbackRate = 1.0;

名称: 1.5x
网址:

javascript:

document.querySelector('video').playbackRate = 1.5;

名称：2.0x
网址：

javascript:

document.querySelector('video').playbackRate = 2.0;

以下是我的播放速度书签小工具：

我将上述所有播放速度书签小工具及更多其他书签小工具都添加到一个名为1.00x的文件夹中，如下图所示：

参考资料：

1. Jeremy Visser的主要答案
2. 从我的GitHub收藏夹中复制了这里：https://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
   1. 在此处获取其他书签小工具，例如帮助您在GitHub上进行操作的书签小工具。

- Gabriel Staples

Answer 4

解决方案

1. DOM事件 onloadstart="this.playbackRate = 1.5;"

  <video
    onloadstart="this.playbackRate = 1.5;"
    controls
    src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>

2. js video.playbackRate = 1.5;

  <video
    id="custom-video"
    controls
    src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>

const video = document.querySelector('#custom-video');

if(video) {
  video.playbackRate = 1.5;
}

演示

https://codepen.io/xgqfrms/pen/dydwzjp

- xgqfrms

---

这对我起作用，而其他方法却没有。我试图在YouTube视频预览中更改播放速度，比如在主页上。它有一个动态更新的视频标签用于所有预览播放，但出于某种原因，使用JavaScript设置它并不起作用，但使用onloadstart更新属性却可以。 - Anders Elmgren

如果使用 JavaScript 动态创建 DOM 内容，它将覆盖您所做的任何修改。 - xgqfrms

如果使用js动态创建DOM内容，它将覆盖您所做的任何修改。 - undefined

如果您仍然有问题，请提供一个在线编辑器的完整演示代码URL，比如https://codepen.io/、https://codesandbox.io/。 - xgqfrms

Answer 5

我更喜欢使用更精细的视频速度调节方式。我希望能够在需要时加速或减缓视频播放速度。因此，我使用以下方法：

window.addEventListener("keypress", function(e) {
  if(e.key==="d") document.getElementsByTagName("video")[0].playbackRate += .1; else if(e.key==="s") document.getElementsByTagName("video")[0].playbackRate -= .1;
}, false);

按下 d 键加速，按下 s 键减速。

- phlaxyr

---

定制按键以实现更快的速度变化是个好主意！感谢分享。 - devdanke

Answer 6

您可以使用以下代码：

var vid = document.getElementById("video1");

function slowPlaySpeed() { 
    vid.playbackRate = 0.5;
} 

function normalPlaySpeed() { 
    vid.playbackRate = 1;
} 

function fastPlaySpeed() { 
    vid.playbackRate = 2;
}

- Abdul Quadir

---

嗨@Armel，如果我正在使用Python的Selenium，您能告诉我在哪里放置这段代码吗？ - mpx

嗨@balandongiv，很抱歉我不知道:( - Pingolin

Answer 7

javascript:document.getElementsByClassName("video-stream html5-main-video")[0].playbackRate = 0.1;

您可以在此处放置任何数字，但不要太大，以免超过计算机的承受范围。

- Mattyduke1

Answer 8

在Chrome中，创建一个新的书签 输入任意名称，例如速度选择器，然后在URL中输入以下代码：

javascript:

var speed = prompt("Please enter speed", "1");
document.querySelector('video').playbackRate = speed,void(0);

当你点击这个书签时，会出现一个弹出窗口，然后你可以输入视频的速度。

- Amin Abdiyan Mobarakeh

Answer 9

假设您的视频/音频ID为myVideo，那么您只需使用JavaScript即可轻松完成所需操作，只需键入以下简单的JS代码：-

var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;`

播放速度

指示音频/视频的当前播放速度。

示例数值：

1.0 是正常速度

0.5 是半速（较慢）

2.0 是双倍速（较快）

-1.0 是倒放，正常速度

-0.5 是倒放，半速

来源：w3schools.com

- Nader Ahmed

---

负值在Chrome中无法正常工作。但如果能够正常工作，那将是一个不错的简单倒带或反向播放功能。 - OG Sean

Answer 10

右键点击 Firefox 浏览器时会出现一个速度控制上下文菜单，如下图所示：。

- reubano