In diesem Artikel erfahren Sie, wie Sie die Wiedergabegeschwindigkeit eines Videos mithilfe des HTML5-Video-Tags ändern Eingebettet in ein HTML-Dokument.
Eine Zahl kleiner als 1 verlangsamt das Video, eine Zahl größer als 1 beschleunigt das Video Die Nummer 1 stellt das Video auf seine ursprüngliche Geschwindigkeit zurück. Beachten Sie außerdem, dass es sich bei der Wiedergaberate um eine Eigenschaft handelt anstelle von HTML-Attributen.
Obwohl Sie die Wiedergaberate nicht für jede Videoseite ändern möchten, können Sie dies tun, wenn Sie möchten Denken Sie, dass es Ihren Besuchern mehr gefallen wird. Hierfür ist nur ein HTML-Element zum Einrichten erforderlich!
Mit der Eigenschaft „PlaybackRate“ können wir die Wiedergabegeschwindigkeit ändern. Dies sind seine grammatikalischen Regeln.Grammatik
let video = document.querySelector('video')
video.playbackRate = newPlaybackRate
Grammatik
let video = document.querySelector('video')
video.defaultPlaybackRate = 4
video.load()
<!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>
Wert des Attributs
| Beschreibung | |
|---|---|
| Wiedergabegeschwindigkeit | Zeigen Sie die Geschwindigkeit von Audio oder Video an
Spielt gerade. Typ des Situationswerts -
|
Wie hoch ist die Wiedergabegeschwindigkeit?
Medien werden mit einer definierten Geschwindigkeit basierend auf der Eigenschaft „playbackRate“ wiedergegeben. Damit, Benutzer Ermöglicht die Steuerung von Schnellvorlauf, Zeitlupe und anderen Funktionen. Ein Wert von 1,0 bedeutet Standardgeschwindigkeit, berechnet durch Multiplikation der aktuellen Geschwindigkeit mit der üblichen Wiedergabegeschwindigkeit.
Welche Wiedergabegeschwindigkeit ist perfekt?
Die meisten Browser pausieren den Ton außerhalb der Wiedergabe. Für Videos gelten Ratenbeschränkungen von 0,5 und 4 Spielen Sie leise. In den meisten Fällen sollten Sie den Bereich zwischen 0,5 und 4 belassen App.
<!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>
Außerdem sehen Sie ihn unten auf dem Bildschirm, nachdem Sie auf die Schaltfläche „Slow-Motion-Video“ und dann auf „Get“ geklickt haben „Wiedergabefrequenz“-Taste.
Einführung
Das Fazit zu all dem. Wenn Sie auf „Play“ drücken, wird das Video doppelt so schnell abgespielt allgemein. Magst du es, mit halber Geschwindigkeit zu laufen? Setzen Sie stattdessen die Wiedergaberate auf 0,5. möchte, dass es sich erholt Mit normaler Geschwindigkeit laufen? Stellen Sie die Wiedergaberate grundsätzlich auf 1 ein.
Das obige ist der detaillierte Inhalt vonWie ändere ich die Geschwindigkeit der Videowiedergabe mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
