一、一般の三种方式

1.1 原生H5 video

对于原生HTML5 video 元素，你可以直接使用 playbackRate 属性来设置播放速度。以下是一个示例：

<video id="myVideo" controls src="my-video-file.mp4"></video>
Javascript

// 获取video元素
var video = document.getElementById('myVideo');

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

1.2 Video.js

对于使用Video.js的视频播放器，你可以通过Video.js的API来修改播放速度。这是一个示例：

<video id="myVideo" class="video-js" controls preload="auto" data-setup='{}'><source src="my-video-file.mp4" type="video/mp4">
</video>

// 获取Video.js播放器实例
var player = videojs('myVideo');

// 设置播放速度为1.5倍
player.playbackRate(1.5);

1.3 动态切换播放速度

如果你想让用户提供播放速度的选择，可以使用HTML的<select>元素结合事件监听器来实现：

<select id="speedSelector"><option value="1">Normal Speed</option><option value="1.5">1.5x</option><option value="2">2x</option>
</select>

然后在JavaScript中添加事件监听器：

// 获取选择器元素
var speedSelector = document.getElementById('speedSelector');// 监听选择器的改变事件
speedSelector.addEventListener('change', function() {// 获取用户选择的播放速度var speed = parseFloat(this.value);// 更新video元素的播放速度if (video) {video.playbackRate = speed;}// 如果使用Video.jsif (player) {player.playbackRate(speed);}
});

这样，每当用户从下拉菜单中选择一个播放速度时，视频播放器的播放速度就会随之改变。

二、最佳设置

通过选择器设置

document.querySelector('video').playbackRate = 1.5

三、效果