Bagaimana untuk menukar kelajuan main balik video menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menukar kelajuan main balik video menggunakan JavaScript?

王林

Lepaskan： 2023-08-26 10:05:19

ke hadapan

3120 orang telah melayarinya

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

Dalam artikel ini, kita akan belajar cara menukar kelajuan main balik video menggunakan tag video HTML5 Dibenamkan dalam dokumen HTML.

Nombor yang kurang daripada 1 akan memperlahankan video, nombor yang lebih besar daripada 1 akan mempercepatkan video, kemudian Nombor 1 akan mengembalikan video kepada kelajuan asalnya. Juga ambil perhatian bahawa playbackRate ialah harta bukannya atribut HTML.

Walaupun anda tidak mahu menukar kadar main balik untuk setiap tapak video, anda boleh melakukannya jika anda mahu Fikirkan pelawat anda akan lebih menyukainya. Ini hanya memerlukan satu elemen HTML untuk disediakan!

Harta PlaybackRate membolehkan kami menukar kelajuan main balik. Ini adalah peraturan tatabahasanya.

Tatabahasa

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

Salin selepas log masuk

Pengguna boleh mengubah suai kelajuan main balik lalai dengan mudah dengan menggunakan parameter lalaiPlaybackRate. ia Gunakan sintaks yang disenaraikan di bawah.

Tatabahasa

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

Salin selepas log masuk

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

Salin selepas log masuk

Contoh 2

Kelajuan main balik audio atau video ditetapkan atau dikembalikan melalui sifat Kadar main semula.

Nilai atribut

Nilai	Penerangan
Kelajuan main balik	Tunjukkan kelajuan audio atau video Sedang bermain. Jenis nilai situasi - Kelajuan biasa ialah 1.0. Separuh kelajuan ialah 0.5. (Lambat) 2.0 adalah dua kali lebih pantas (lebih cepat) Mundur ialah -1.0 dan kelajuan biasa Separuh kelajuan terbalik ialah -0.5.

Nilai

Penerangan

Kelajuan main balik

Tunjukkan kelajuan audio atau video Sedang bermain.

Jenis nilai situasi -

Kelajuan biasa ialah 1.0.
Separuh kelajuan ialah 0.5. (Lambat)
2.0 adalah dua kali lebih pantas (lebih cepat)
Mundur ialah -1.0 dan kelajuan biasa
Separuh kelajuan terbalik ialah -0.5.

Atribut Kadar main balik DOM audio/video HTML

Apakah kelajuan main balik?

Media dimainkan semula pada kadar yang ditentukan berdasarkan sifat Kadar main semula. Dengan ini, pengguna Menyedari kawalan ke hadapan pantas, gerakan perlahan dan fungsi lain. Nilai 1.0 bermakna Kelajuan standard, dikira dengan mendarabkan kadar semasa dengan kadar main balik biasa.

Apakah kelajuan main balik yang sesuai?

Kebanyakan penyemak imbas akan menjeda audio di luar main balik Video mempunyai had kadar 0.5 dan 4 Main senyap. Untuk kebanyakan kes, anda harus mengekalkan julat antara 0.5 dan 4 apl.

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

Salin selepas log masuk

Selepas mengklik butang "Dapatkan Kekerapan Main", anda akan melihat skrin berikut.

Selain itu, selepas mengklik butang "Video Gerak Perlahan" dan kemudian mengklik "Dapatkan" anda akan melihatnya di bawah skrin butang kekerapan main".

Pengenalan

Dalam contoh di atas, pembolehubah (demoVideo dalam kes ini) digunakan untuk menukar kelajuan main balik (atau apa sahaja yang kita mahu lakukan). Sebagai contoh, masukkan sahaja demoVideo dan tukar Kadar main balik kepada 2. Berlari dua kali lebih pantas. Kadar main balik adalah sama dengan 2.

Kesimpulan semua ini. Apabila anda menekan main, video akan dimainkan dua kali lebih pantas secara amnya. Adakah anda suka ia berjalan pada separuh kelajuan? Sebaliknya, tetapkan Kadar main balik kepada 0.5. mahu ia pulih Berlari pada kelajuan biasa? Pada asasnya, tetapkan Kadar main balik kepada 1.

Atas ialah kandungan terperinci Bagaimana untuk menukar kelajuan main balik video menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!