如何使用 JavaScript 改變影片播放速度？
- 王林轉載
- 2023-08-26 10:05:193098瀏覽
在本文中，我們將了解如何使用 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 = 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://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屬性設定或返回。
屬性的值
| 價值 | 描述 |
|---|---|
| 播放速度 |
顯示音訊或影片的速度 目前正在播放。 情況值的類型 -
|
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 改變影片播放速度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！