Html5播放器实现倍速播放的方法示例

当前位置：电视猫 > Html5>

电视猫时间： 2024-08-01 07:58:52

　　Html5播放器实现倍速播放的方法示例

HTML5播放器实现倍速播放的方法示例

理解playbackRate属性

HTML5的<video>元素有一个非常有用的属性：playbackRate。这个属性设置或返回音频/视频的当前播放速度。通过改变这个属性的值，我们就可以实现视频的倍速播放。

实现步骤

获取视频元素: HTML

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

获取playbackRate属性: JavaScript

const video = document.getElementById('myVideo');

设置播放速度: JavaScript

// 将播放速度设置为2倍速
video.playbackRate = 2;

// 创建一个按钮，点击后将播放速度设置为0.5倍
const slowButton = document.createElement('button');
slowButton.textContent = '慢速';
slowButton.onclick = () => {
    video.playbackRate = 0.5;
};
document.body.appendChild(slowButton);

示例代码

HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTML5视频倍速播放</title>
</head>
<body>
    <video id="myVideo" controls>
        <source src="movie.mp4" type="video/mp4">
    </video>
    <button onclick="video.playbackRate = 0.5">慢速</button>
    <button onclick="video.playbackRate = 1">正常速度</button>
    <button onclick="video.playbackRate = 1.5">1.5倍速</button>
    <button onclick="video.playbackRate = 2">2倍速</button>
    <script>
        const video = document.getElementById('myVideo');
    </script>
</body>
</html>