数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 JavaScript 更改视频播放速度？
在本文中，让我们了解如何使用 HTML5 video 标签来更改嵌入在 HTML 文档中的视频的播放速度。
小于 1 的数字会减慢视频速度，大于 1 的数字会加速视频速度，而 1 会将视频恢复到原始速度。还要注意，playbackRate 是一个属性，而不是 HTML 属性。
虽然您可能不想为每个视频网站更改播放速率，但如果您认为您的访客会更喜欢它，您可以这样做。这只需要一个 HTML 元素设置！
PlaybackRate 属性允许我们更改播放速度。以下是它的语法规则。
语法
let video = document.querySelector('video')
video.playbackRate = newPlaybackRate
通过使用 defaultPlaybackRate 参数，用户可以轻松修改默认播放速度。它使用下面列出的语法。
语法
let video = document.querySelector('video')
video.defaultPlaybackRate = 4
video.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://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 属性设置或返回。
属性的值
| 值 | 描述 |
|---|---|
| 播放速度 | 显示音频或视频当前播放的速度。 情景值类型 -
|
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://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。
3000+ 次浏览
