如何更改 HTML5 中视频的播放速度？答案

【问题标题】：How to change the playing speed of videos in HTML5?如何更改 HTML5 中视频的播放速度？
【发布时间】：2011-03-02 22:41:54
【问题描述】：

如何更改 HTML5 中的视频播放速度？我在 w3school 中检查了video tag's attributes，但无法解决。任何帮助将不胜感激！

【问题讨论】：

标签： javascript html performance video html5-video

【解决方案1】：

根据this site，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;

以上works 在 Chrome 43+、Firefox 20+、IE 9+、Edge 12+ 上。

【讨论】：

感谢您提供有用的资源。虽然 Firefox 不支持该属性，但我在 Chrome 中做了一个演示，效果很好。我想我的老板会喜欢的。谢谢！
播放率works in Firefox since version 20。它也适用于 Chrome。
这在开始时有效，但如果在进程后期运行则无效，例如：window.onload=function(){document.getElementById("master_video").defaultPlaybackRate=0.1; document.getElementById("master_video").play();}
它不适用于 Ionic android...我在适用于 android 的 ionic 框架中使用 HTML% 视频播放器，但它不支持播放速率.........
@Sushan .querySelector 返回第一个匹配的。您可以使用.querySelectorAll，但您需要遍历它们而不是直接使用这些答案中的代码。

【解决方案2】：

只需输入

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

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

【讨论】：

视频元素的某些属性会阻止此命令工作。如果此控制台命令失败，请检查检查器中视频元素和父元素的属性，并删除那些阻止用户与视频交互的属性。再次尝试该命令。

【解决方案3】：

（在 YouTube 上播放视频时在 Chrome 中进行了测试，但应该可以在任何地方使用——对于加快在线培训视频的速度尤其有用）。

对于想要将这些作为“书签”（包含 JavaScript 代码而不是 URL 的书签）添加到浏览器的任何人，请使用这些浏览器书签名称和 URL，并将以下每个书签添加到浏览器顶部。 复制下面每个书签的“URL”部分时，将整个多行代码块、换行符和所有代码块复制到浏览器中书签创建工具的“URL”字段中。

名称： 0.5x
网址：

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 的文件夹中，如下所示：

参考资料：

main answer by Jeremy Visser
从我的 GitHub gist 复制到这里：https://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
1. 也可以在此处获取其他书签，例如在 GitHub 上为您提供帮助。

【讨论】：

【解决方案4】：

您可以使用此代码：

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

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

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

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

【讨论】：

嗨 @Armel，如果我在 Python 中使用 Selenium，我可以知道将这段代码放在哪里吗？
嗨@balandongiv，很抱歉我不知道:(

【解决方案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 减速。

【讨论】：

自定义键以加快速度变化的好主意！感谢分享。

【解决方案6】：

在 chrome 中，创建一个新书签

输入任意名称，例如速度选择器，然后在 URL 中输入以下代码

javascript：

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

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

【讨论】：

【解决方案7】：

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

您可以在此处输入任何数字，但不要太远，以免您的计算机超负荷。

【讨论】：

【解决方案8】：

假设你的视频/音频ID是myVideo，那么你可以简单地使用JavaScript来做你想做的事，只需输入以下简单的JS代码：-

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

这会将您的视频/音频的速度降低到一半。

播放速度

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

示例值：

1.0 is normal speed

0.5 is half speed (slower)

2.0 is double speed (faster)

-1.0 is backwards, normal speed

-0.5 is backwards, half speed

来源：w3schools.com

【讨论】：

【解决方案9】：

只需在浏览器的 javascript 控制台中输入以下命令：

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

您可以通过从右键菜单中选择检查选项来获取它，如下所示：

【讨论】：