如何改变HTML5视频的播放速度？

Question

如何更改 HTML5 中的视频播放速度？我已经检查了 w3school 中的视频标签的属性，但无法解决该问题。

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+。

Answer 2

输入即可。

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

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

Answer 3

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

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

< a href="https://i.sstatic.net/WU46Y.png" rel="noreferrer">

名称： 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
URL：

javascript:

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

以下是我所有的播放速度书签：

我将上述所有播放速度书签以及更多内容添加到书签栏上名为 1.00x 的文件夹中，如下所示：

参考文献：

1. Jeremy Visser 的主要答案
2. 从我的 GitHub 要点复制到此处：
   1. 也可以在此处获取其他书签，例如在 GitHub 上为您提供帮助的书签。

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

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 减速。

Answer 6

您可以使用此代码：

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

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

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

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

Answer 7

在 Chrome 中，创建一个新书签

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

：

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

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

Answer 8

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

您可以在此处输入任何数字，但不要输入太多，以免计算机过载。

Answer 9

它总是有效你可以尝试这个

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

Answer 10

如上所述，一般的解决方案是：

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

但是，如果这返回一个错误，例如：

caught TypeError: Cannot set properties of null (setting 'playbackRate')

由于第一个函数返回 null（意味着它找不到指定的元素），那么简单的解决方案是使用典型的选择器（ ID、类别等）。但我发现，当抛出此错误时，即使它不应该抛出错误，因为有一个视频元素并且它是页面上唯一的一个，问题与 tabindex 的 HTML 属性设置为“- 1”。只需使用浏览器检查来访问视频，然后删除“tabindex”属性即可修复如上所示的错误。

Answer 11

假设您的视频/音频 id 是 myVideo，那么您可以简单地使用 JavaScript 来完成您想做的事情，只需键入以下简单的 JS 代码： -playbackspeed

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

That will decrease the speed of your video/audio to it's half speed.

指示

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

示例值：

1.0 是正常速度

0.5 是半速（较慢）

2.0 是双倍速度（较快）

-1.0 是向后，正常速度

-0.5 是向后，半速

来源： w3schools.com

Answer 12

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

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

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

Answer 13

右键单击

。

Answer 14

如果页面上有多个视频，则大多数其他答案只会更改第一个视频。

javascript:document.querySelectorAll('video').forEach( (vid) => vid.playbackRate = 1.5 );

^^ 此书签将加快打开页面上所有视频的速度。

Answer 15

使用反应：

onLoadStart={(e) => {
    e.target.playbackRate = 1.5;
}}

Answer 16

<视频
src={USERBG}
自动播放
环形
静音
控制
onLoadStart={(e) =>; (e.target.playbackRate = 0.5)}
className="object-cover object-center w-full h-full 固定 top-0 left-0 z-10"
>

Answer 17

document.querySelector('video').playbackRate = 16.0;
在 Chrome 2024 中最大速度 16