参考来源:
https://stackoverflow.com/questions/19112255/change-the-video-playback-speed-using-video-js
以下代码相比stackoverflow添加了一个延时,否则无法正常播放,官方文档并没有相关过多说明,不理解具体原因
var player = videojs('example-video'); player.ready(function() { var _this = this //速率 var playbackRate = $("#playbackRate").val(); var speed = parseFloat(playbackRate); setTimeout(function() { _this.playbackRate(speed); },20); });
...
player.play();
$("#playbackRate").change(function(){
var speed = $(this).val();
$("#playbackRateLabel").text("x"+speed+"倍速");
});
<audio id=example-video preload="auto" class="video-js vjs-default-skin" type="audio/wav" hidden="hidden"> <input type="range" min="0.5" max="2" value="1" id="playbackRate" step="0.5"/><span id="playbackRateLabel">×1</span> <script type="text/javascript" th:src="@{/js/jquery3.4.1.js}"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7..0.0/video.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.0/lang/zh-CN.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script> <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">