資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/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+ 次瀏覽
