视频如何实现倍速播放（比如1.5倍、2倍播放）

最新推荐文章于 2025-11-03 19:54:37 发布

原创最新推荐文章于 2025-11-03 19:54:37 发布 · 2w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#视频倍速播放 #视频加速播放

视频应用同时被 2 个专栏收录

110 篇文章

订阅专栏

工具

42 篇文章

订阅专栏

本文介绍了两种视频倍速播放的实现方式。第一种是通过JS代码，利用playbackRate属性调整本地mp4文件的播放速度。第二种是利用酷播云平台，上传视频后获取代码并添加至网站，用户可在播放器上选择多种倍速。此外，还推荐了作者的其他相关文章。

原创文章 IPHONE108原创 20191204

方式1：自己写代码调用自己的本地的mp4文件

使用playbackRate倍速播放来实现，实例如下：

<video id="video" width="180" height="314" autobuffer controls src="./sing-song.mp4" type="video/mp4"></video> 
<p>选择播放速率：<select id="selRate"> 
    <option value="0.5">0.5</option> 
    <option value="1" selected>1.0</option> 
    <option value="1.25">1.25</option> 
    <option value="1.5">1.5</option> 
    <option value="2">2.0</option> 
</select></p> 
<p><button id="btnPlay">酷播视频CUPLAYER播放</button></p>

JS部分：

var eleSelect = document.getElementById('selRate'); 
var eleButton = document.getElementById('btnPlay'); 
// 酷播提示：视频元素 
var video = document.getElementById('video'); 
// 改变播放速率 
eleSelect.addEventListener('change', function () { 
    video.playbackRate = this.value; 
}); 
// 点击播放按钮 
eleButton.addEventListener('click', function () { 
    video.play(); 
});

什么？看不懂代码？好吧，如果看不懂代码，可以用第2种方式。

方式2：用酷播云平台（视频上传至酷播云）

操作：上传视频之后，自动生成代码，获取代码添加到自己网站中，就可以了：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
autoplay:'true',
width: 800,
height: 533,
vid: '88083abbf5f16507525894e5a997aeb2_8',
});
</script>

<h1>酷播云代码测试</h1>

效果是什么样的？右下角有个1x，点击可以选择倍速，多种倍速可随意选。

视频全终端观看