如何改变HTML5视频播放速度?我在w3school中检查了视频标签的属性,但无法接近。
根据这个站点,这在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.getElementsByClassName("video-stream html5-main-video")[0].playbackRate = 0.1;
你可以在这里输入任何数字,但不要太大,以免你的电脑超负荷。
你可以使用下面的代码:
var vid = document.getElementById("video1");
function slowPlaySpeed() {
vid.playbackRate = 0.5;
}
function normalPlaySpeed() {
vid.playbackRate = 1;
}
function fastPlaySpeed() {
vid.playbackRate = 2;
}
(在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上帮助你。
假设你的视频/音频id是myVideo,那么你可以简单地使用JavaScript来做你想做的,只需输入以下简单的JS代码
var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;`
That will decrease the speed of your video/audio to it's half speed.
playbackspeed
显示当前音频/视频的播放速度。
示例值:
1.0为正常速度
0.5为半速(较慢)
2.0是速度的两倍(更快)
-1.0是向后的,正常速度
-0.5是向后,半速
来源:w3schools.com
在chrome中,创建一个新的书签
输入任意名称,例如速度选择器,然后在URL中输入以下代码
javascript:
var speed = prompt("Please enter speed", "1");
document.querySelector('video').playbackRate = speed,void(0);
然后,当你点击这个书签,弹出窗口出现,然后你可以输入视频的速度
我更喜欢对视频速度进行更精细的调整。我喜欢能够按指令加速和减慢视频。因此我使用这个:
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减速。
只需在浏览器的javascript控制台中输入以下命令:
document.querySelector('video').playbackRate = 2.0;
你可以从右键菜单中选择inspect选项,如下所示:
解决方案
我从来没做过这种事平分率= 1.5
<video
onloadstart="this.playbackRate = 1.5;"
controls
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
js 视频音量 = 0.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;
}
demo
https://codepen.io/xgqfrms/pen/bGLOrjM
它总是有效的,你可以试试
var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;
如果页面上有多个视频,大多数其他答案只会改变第一个。
javascript: document.querySelectorAll(视频)。forEach((vid) => vid。playbackRate = 1.5);
^^这个书签将加速打开页面上的所有视频。
推荐文章
- 如何禁用文本区域大小调整?
- JSHint和jQuery: '$'没有定义
- 模仿JavaScript中的集合?
- 用JavaScript验证电话号码
- 如何在HTML5中改变视频的播放速度?
- 保留HTML字体大小时,iPhone的方向从纵向改变为横向
- 谷歌地图API v3:我可以setZoom后fitBounds?
- 我如何提高ASP。NET MVC应用程序性能?
- ES6/2015中的null安全属性访问(和条件赋值)
- 与push()相反;
- 嵌套行与自举网格系统?
- JS字符串“+”vs concat方法
- AngularJS使用ng-class切换类
- 访问Handlebars.js每次循环范围之外的变量
- 如何用JavaScript截屏一个div ?