How to change the playing speed of videos in HTML5?
You*_*ung 106 javascript video performance html5 html5-video
How to change the video play speed in HTML5? I've checked video tag's attributes in w3school but couldn't approach that.Any help would be appreciated!
Jer*_*ser 172
根据这个站点,这个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,以及Firefox 20及更高版本.
- playbackRate [自20版以来在Firefox中运行](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/20).它也适用于Chrome. (4认同)
- 这在开头运行时有效,但如果在稍后的进程中运行则不行,例如at:window.onload = function(){document.getElementById("master_video").defaultPlaybackRate = 0.1; document.getElementById("master_video") .玩();} (2认同)
- @Sushan `.querySelector` 返回第一个匹配的。您可以使用`.querySelectorAll`，但您需要遍历它们，而不是直接使用这些答案中的代码。 (2认同)
小智 42
只需输入
document.querySelector('video').playbackRate = 1.25;
在现代浏览器的JS控制台中.
- 视频元素的某些属性会阻止此命令工作。如果此控制台命令失败，请在检查器中检查视频元素和父元素的属性，并删除那些阻止用户与视频交互的属性。再次尝试该命令。 (2认同)
（在 YouTube 上播放视频时在 Chrome 中进行了测试，但应该可以在任何地方使用——尤其适用于加快在线培训视频的速度）。
对于任何想要将这些作为“书签”（包含 JavaScript 代码而不是 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书签栏上命名的文件夹中，如下所示：
参考：
- Jeremy Visser的主要回答
- 从这里复制我的 GitHub 要点：https : //gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
- 也可以在此处获取其他书签，例如在 GitHub 上为您提供帮助。
解决方案
- dom事件
onloadstart="this.playbackRate = 1.5;"
<video
onloadstart="this.playbackRate = 1.5;"
controls
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
- 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
我更喜欢对视频速度进行更精细的调整。我喜欢能够根据命令加快和减慢视频速度。因此我用这个：
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 减速。