简易的html5视频播放倍速代码写法

最新推荐文章于 2024-03-04 18:31:23 发布

阿酷tony

最新推荐文章于 2024-03-04 18:31:23 发布

阅读量8.4k

点赞数 1

分类专栏： html5 网页视频播放器文章标签： html5 音视频 javascript

本文链接：https://blog.csdn.net/ffffffff8/article/details/129612548

版权

html5 同时被 2 个专栏收录

140 篇文章 5 订阅

订阅专栏

网页视频播放器

47 篇文章 0 订阅

订阅专栏

HTML5视频标签有一个叫做playbackRate的属性，用于设置倍速播放。例如设置播放速度为2倍，可以写成：

<video src="video.mp4" autoplay controls playbackRate="2"></video>

同时，可以使用JavaScript来控制播放速度。以下是一个简单的代码示例，包含了3个按钮，点击分别可以将倍速设置为1、1.5和2。

<video src="video.mp4" id="myVideo" autoplay controls></video>

<button onclick="setSpeed(1)">1x</button>
<button onclick="setSpeed(1.5)">1.5x</button>
<button onclick="setSpeed(2)">2x</button>

<script>
  function setSpeed(rate) {
    var video = document.getElementById("myVideo");
    video.playbackRate = rate;
  }
</script>