suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie ändere ich die Geschwindigkeit der Videowiedergabe mit JavaScript?

Wie ändere ich die Geschwindigkeit der Videowiedergabe mit JavaScript?

王林
王林nach vorne
2023-08-26 10:05:193060Durchsuche

如何使用 JavaScript 改变视频播放速度？

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

Benutzer können die Standardwiedergabegeschwindigkeit einfach ändern, indem sie den Parameter defaultPlaybackRate verwenden. Es Verwenden Sie die unten aufgeführte Syntax.

Grammatik

let video = document.querySelector('video')
video.defaultPlaybackRate = 4
video.load()

Beispiel 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>

Beispiel 2

Die Wiedergabegeschwindigkeit von Audio oder Video wird über die Eigenschaft „playbackRate“ festgelegt oder zurückgegeben.

Wert des Attributs

WertBeschreibung
Wiedergabegeschwindigkeit Zeigen Sie die Geschwindigkeit von Audio oder Video an Spielt gerade.

Typ des Situationswerts -

    Übliche Geschwindigkeit ist 1,0.
    • Halbe Geschwindigkeit beträgt 0,5. (Langsamer)
    • 2.0 ist doppelt so schnell (schneller)
    • Rückwärts ist -1,0 und normale Geschwindigkeit
    • Die halbe Rückwärtsgeschwindigkeit beträgt -0,5.
Das Attribut „playbackRate“ des HTML-Audio-/Video-DOM

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>

Nachdem Sie auf die Schaltfläche „Wiedergabehäufigkeit abrufen“ geklickt haben, wird der folgende Bildschirm angezeigt.

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

Im obigen Beispiel wird eine Variable (in diesem Fall demoVideo) verwendet, um die Wiedergabegeschwindigkeit (bzw alles, was wir tun wollen). Geben Sie beispielsweise einfach demoVideo ein und ändern Sie die Wiedergaberate in 2. Laufen Sie doppelt so schnell. Die Wiedergaberate ist gleich 2.

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!

JavaScript html5 html dom
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie erstelle ich eine Zeichenfolge, die zur Hälfte aus Groß- und zur Hälfte aus Kleinbuchstaben besteht?Nächster Artikel：Wie erstelle ich eine Zeichenfolge, die zur Hälfte aus Groß- und zur Hälfte aus Kleinbuchstaben besteht?

In Verbindung stehende Artikel

Mehr sehen