如何改变HTML5视频播放速度?我在w3school中检查了视频标签的属性,但无法接近。


当前回答

你可以使用下面的代码:

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

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

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

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

其他回答

根据这个站点,这在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+。

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

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

你可以从右键菜单中选择inspect选项,如下所示:

Firefox有一个速度控制上下文菜单,当你右键单击

.

(在Chrome浏览器中测试,同时在YouTube上播放视频,但应该在任何地方工作——特别适用于加速在线培训视频)。

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

名称:0.5倍 URL:

javascript:

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

名称:1.0倍 URL:

javascript:

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

名称:1.5倍 URL:

javascript:

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

名称:2.0倍 URL:

javascript:

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

这里是我所有的回放速度书签:

我添加了以上所有的播放速度书签,以及更多,到我的书签栏上一个名为1.00x的文件夹中,如下所示:

引用:

杰里米·维瑟给出了主要答案 从我的GitHub要点复制在这里:https://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets 在这里也可以获得其他书签,比如在GitHub上帮助你。

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

javascript: document.querySelectorAll(视频)。forEach((vid) => vid。playbackRate = 1.5);

^^这个书签将加速打开页面上的所有视频。