在本文中，我们将了解如何使用 html5 视频标签来改变视频的播放速度嵌入在 html 文档中。
小于 1 的数字会减慢视频速度，大于 1 的数字会加速视频，然后数字 1 会使视频恢复到原来的速度。另请注意，playbackrate 是一个属性而不是 html 属性。
尽管您不想更改每个视频网站的播放速率，但如果您愿意，也可以这样做认为您的访客会更喜欢它。这只需要一个 html 元素设置！
playbackrate 属性允许我们更改播放速度。这些是它的语法规则。
语法let video = document.queryselector('video')video.playbackrate = newplaybackrate
通过使用defaultplaybackrate参数，用户可以轻松修改默认播放速度。它使用下面列出的语法。
语法let video = document.queryselector('video')video.defaultplaybackrate = 4video.load()
示例 1<!doctype html><html><title>how to change video playing speed using javascript - tutorialspoint</title><head> <meta charset=utf-8> <meta http-equiv=x-ua-compatible content=ie=edge> <meta name=viewport content=width=device-width, initial-scale=1.0> <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css> <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js></script> <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js></script> <style> body { text-align: center; margin-top: 5%; } h1 { color: rgb(3, 95, 121); } p { margin-top: 5%; } button { margin-right: 20px; } </style></head><body> <h1>tutorialspoint sample video</h1><br> <video width=420 height=240 controls loop> <source src=https://www.tutorialspoint.com/videos/sample720.mp4 type=video/mp4> the video tag is incompatible with your browser. </video> <p> <button type=button class=btn btn-primary onclick=speedup()> speed up</button> <button type=button class=btn btn-primary onclick=speeddown()> speed down</button> </p> <script> let video = document.queryselector('video'); // make the playing speed the default video.defaultplaybackrate = 0.5 // the video is loaded after setting video.load(); function speedup() { // the playback speed has been increased by 1 video.playbackrate += 1; } function speeddown() { // the playback speed has been decreased by 1 if (video.playbackrate > 1) video.playbackrate -= 1; } </script></body></html>
示例 2音频或视频的播放速度通过playbackrate属性设置或返回。
属性的值价值描述
播放速度 显示音频或视频的速度当前正在播放。
情况值的类型 -
通常的速度为 1.0。半速为 0.5。 （较慢）2.0 的速度是原来的两倍（更快）向后为 -1.0 且正常速度后退半速为-0.5。
html 音频/视频 dom 的 playbackrate 属性播放速度是多少？
媒体根据playbackrate 属性以定义的速率播放。有了这个，用户实现了快进、慢动作和其他功能的控制。值为 1.0 表示标准速度，通过将当前速率乘以通常的播放速率来计算。
什么播放速度是完美的？
大多数浏览器会在播放之外暂停音频 视频的速率限制为 0.5 和 4播放无声。对于大多数情况，您应该将范围保持在 0.5 到 4 之间应用程序。
<!doctype html><html><title>how to change video playing speed using javascript - tutorialspoint</title><head> <meta charset=utf-8> <meta http-equiv=x-ua-compatible content=ie=edge> <meta name=viewport content=width=device-width, initial-scale=1.0> <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css> <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js></script> <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js></script> <style> body { text-align: center; margin-top: 5%; } h1 { color: rgb(3, 95, 121); } button { margin-top: 20px; } </style></head><body> <h1>tutorialspoint sample video</h1><br> <video id=myvideo width=420 height=240 controls> <source src=https://www.tutorialspoint.com/videos/sample720.mp4 type=video/mp4> html5 video is not compatible with your browser. </video> <br> <button type=button class=btn btn-primary onclick=getspeed() type=button>get frequency of playback</button> <button type=button class=btn btn-primary onclick=setspeed() type=button>slow motion video</button><br> <script> let demovideo = document.getelementbyid(myvideo); function getspeed() { alert(demovideo.playbackrate); } function setspeed() { demovideo.playbackrate = 0.5; } </script></body></html>
点击“获取播放频率”按钮后，您将看到以下屏幕。
此外，单击“慢动作视频”按钮，然后单击“获取”后，您将在屏幕下方看到他播放频率”按钮。
简介在上面的示例中，变量（本例中为 demovideo）用于更改播放速度（或任何我们想做的事情）。例如，只需输入 demovideo 并将playbackrate 更改为2 以两倍的速度跑步。 playbackrate 等于 2。
所有这一切的结论。当您按下“播放”时，该视频的播放速度将是原来的两倍通常。您喜欢它以半速运行吗？相反，将playbackrate 设置为0.5。想让它恢复以正常速度运行？基本上，将playbackrate 设置为1。
以上就是如何使用 javascript 改变视频播放速度？的详细内容。