Maison > Article > interface Web > Comment modifier la vitesse de lecture d'une vidéo à l'aide de JavaScript ?

Comment modifier la vitesse de lecture d'une vidéo à l'aide de JavaScript ?

王林avant: 2023-08-26 10:05:192965parcourir

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

Dans cet article, nous apprendrons comment modifier la vitesse de lecture d'une vidéo à l'aide de la balise vidéo HTML5 Intégré dans un document HTML.

Un nombre inférieur à 1 ralentira la vidéo, un nombre supérieur à 1 accélérera la vidéo, puis Le numéro 1 ramènera la vidéo à sa vitesse d'origine. Notez également que playbackRate est une propriété au lieu des attributs HTML.

Bien que vous ne souhaitiez pas modifier la vitesse de lecture de chaque site vidéo, vous pouvez le faire si vous le souhaitez. Pensez que vos visiteurs l’apprécieront davantage. Cela ne nécessite qu’un seul élément HTML à configurer !

La propriété

PlaybackRate nous permet de modifier la vitesse de lecture. Ce sont ses règles grammaticales.

Grammaire

let video = document.querySelector('video')
video.playbackRate = newPlaybackRate

Les utilisateurs peuvent facilement modifier la vitesse de lecture par défaut en utilisant le paramètre defaultPlaybackRate. il Utilisez la syntaxe répertoriée ci-dessous.

Grammaire

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

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

Exemple 2

La vitesse de lecture de l'audio ou de la vidéo est définie ou renvoyée via la propriété playbackRate.

Valeur de l'attribut

Valeur	Description
Vitesse de lecture	Afficher la vitesse de l'audio ou de la vidéo Je joue actuellement. Type de valeur de situation - La vitesse habituelle est de 1,0. La demi-vitesse est de 0,5. (Plus lentement) 2.0 est deux fois plus rapide (plus rapide) La marche arrière est de -1,0 et la vitesse normale La demi-vitesse inverse est de -0,5.

Valeur

Description

Vitesse de lecture

Afficher la vitesse de l'audio ou de la vidéo Je joue actuellement.

Type de valeur de situation -

La vitesse habituelle est de 1,0.
La demi-vitesse est de 0,5. (Plus lentement)
2.0 est deux fois plus rapide (plus rapide)
La marche arrière est de -1,0 et la vitesse normale
La demi-vitesse inverse est de -0,5.

L'attribut playbackRate du DOM audio/vidéo HTML

Quelle est la vitesse de lecture ?

Le média est lu à une vitesse définie en fonction de la propriété playbackRate. Avec cela, les utilisateurs Réalise le contrôle de l'avance rapide, du ralenti et d'autres fonctions. Une valeur de 1,0 signifie Vitesse standard, calculée en multipliant la fréquence actuelle par la fréquence de lecture habituelle.

Quelle vitesse de lecture est parfaite ?

La plupart des navigateurs mettent l'audio en pause en dehors de la lecture. La vidéo a des limites de débit de 0,5 et 4. Jouez en silence. Dans la plupart des cas, vous devez conserver une plage comprise entre 0,5 et 4. application.

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

Après avoir cliqué sur le bouton « Obtenir la fréquence de lecture », vous verrez l'écran suivant.

De plus, après avoir cliqué sur le bouton "Vidéo au ralenti", puis sur "Obtenir", vous le verrez sous l'écran Bouton "Fréquence de lecture".

Présentation

Dans l'exemple ci-dessus, une variable (demoVideo dans ce cas) est utilisée pour modifier la vitesse de lecture (ou tout ce que nous voulons faire). Par exemple, entrez simplement demoVideo et remplacez playbackRate par 2. Courez deux fois plus vite. playbackRate est égal à 2.

La conclusion de tout cela. Lorsque vous appuyez sur Play, la vidéo sera lue deux fois plus vite en général. Aimez-vous rouler à moitié vitesse ? Au lieu de cela, définissez playbackRate sur 0,5. je veux qu'il récupère Courir à vitesse normale ? Fondamentalement, définissez playbackRate sur 1.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html5 html dom

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer une chaîne avec moitié majuscule et moitié minuscule ?Article suivant：Comment créer une chaîne avec moitié majuscule et moitié minuscule ?

Articles Liés

Voir plus