上传到VOD-视频点播的音频,在html中用audio播放器,无法设置起播时长怎么解决呢?每次拖放到任意进度,点击播放都会重新开始播放。
该问题的根本原因是HTML5的Audio标签无法设置音频起播的时间,因此每次播放都会从音频的起始位置开始播放。不过,我们可以通过JavaScript代码来实现这一功能。
具体实现方式如下:
1、在HTML文件中添加audio标签,并为其设置id和src属性,如下所示:
<audio id="myAudio" src="http://example.com/myaudio.mp3"></audio>
2、在JavaScript代码中获取audio元素,并为其添加canplay事件监听器,如下所示:
var audio = document.getElementById("myAudio");
audio.addEventListener("canplay", function() {
audio.currentTime = 10; // 设置音频起播时间为10秒
});
在canplay事件被触发时,将音频的起播时间设置为10秒,即可实现音频在指定时间点开始播放的效果。
另外,如果希望在音频被拖动时不会重新开始播放,可以在JavaScript代码中为audio元素添加timeupdate事件监听器,并记录当前播放时间,如下所示:
var audio = document.getElementById("myAudio");
var startTime = 10; // 设置音频起播时间为10秒
var currTime = startTime; // 记录当前播放时间
audio.addEventListener("canplay", function() {
audio.currentTime = startTime;
});
audio.addEventListener("timeupdate", function() {
if (audio.currentTime < startTime) {
audio.currentTime = currTime;
} else {
currTime = audio.currentTime;
}
});
在timeupdate事件被触发时,如果当前播放时间小于起播时间,则将播放时间设置为之前记录的当前播放时间,否则更新当前播放时间。这样,即使用户拖动了音频的播放进度条,音频也会从指定时间点开始播放,而不会重新开始播放。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。