Thực thi script khi tốc độ phát video thay đổi (onratechange)

Để chạy script mỗi khi tốc độ phát (playback rate) của video/audio thay đổi, bạn sử dụng thuộc tính sự kiện onratechange.

Ví dụ minh họa

<!DOCTYPE html>
<html>
  <body>
    <video id="myid" width="320" height="176" controls onratechange="display()">
      <source src="/html5/foo.ogg" type="video/ogg" />
      <source src="/html5/foo.mp4" type="video/mp4" />
      Trình duyệt của bạn không hỗ trợ video.
    </video>
    <p id="test">Thay đổi tốc độ video</p>
    <input type="range" min="0.1" max="3" step="0.2" value="1" oninput="update(this)">
    <script>
      function display() {
        document.getElementById("test").innerHTML = 
          "Tốc độ: " + document.getElementById("myid").playbackRate;
      }
      function update(ob) {
        document.getElementById("myid").playbackRate = ob.value;
      }
    </script>
  </body>
</html>

Giải thích

• playbackRate - Thuộc tính thiết lập/lấy tốc độ phát hiện tại (1.0 = bình thường, 2.0 = gấp 2, 0.5 = chậm rãi).
• defaultPlaybackRate - Tốc độ phát mặc định khi video tải.
• Thanh trượt <input type="range"> cho phép người dùng điều chỉnh tốc độ từ 0.1x đến 3x.
• Mỗi khi playbackRate thay đổi (qua script hoặc UI trình duyệt), sự kiện onratechange kích hoạt.

Ứng dụng

• Hiển thị tốc độ hiện tại cho người dùng.
• Lưu cài đặt tốc độ yêu thích vào localStorage.
• Đồng bộ tốc độ giữa nhiều video trên cùng trang.
• Analytics: Theo dõi người dùng xem nhanh/chậm bao nhiêu%.