音频视频播放无法拖动快进

在项目中使用 <audio> <video> 标签时出现了无法拖动进度条，无法快进的问题

解决方法如下

后端：

@RequestMapping(value = "audioListen")@ResponseBodypublic String getAudio(HttpServletRequest request, HttpServletResponse response,@RequestParam String path) throws Exception{if (path!=null) {String range = request.getHeader("Range");  String[] rs = range.split("\\=");  range = rs[1].split("\\-")[0]; File file = new File(path);  if(!file.exists()) throw new RuntimeException("音频文件不存在 --> 404");OutputStream os = response.getOutputStream();  FileInputStream fis = new FileInputStream(file);  long length = file.length();  // 播放进度  int count = 0;  // 播放百分比  int percent = (int)(length * 1);  int irange = Integer.parseInt(range);  length = length - irange;  response.addHeader("Accept-Ranges", "bytes");  response.addHeader("Content-Length", length + "");  response.addHeader("Content-Range", "bytes " + range + "-" + length + "/" + length);  response.addHeader("Content-Type", "audio/mpeg;charset=UTF-8");   int len = 0;  byte[] b = new byte[1024];  while ((len = fis.read(b)) != -1) {  os.write(b, 0, len);  count += len;  if(count >= percent){  break;  }  }  fis.close();  os.close();  }return null;}

前端：


<div class="modal fade" id="robot-audio-listen-modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">消息提醒：</h4></div><div class="modal-body"><audio src="" controls="controls" id="audio-listen-id">您的浏览器不支持 audio 标签。</audio></div><div class="modal-footer"><button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog -->
</div>


audioListen(path){//url = 接口+图片地址var url = '${ctx}/admin/robot/audio/audioListen?path='+ path.replace(/\\/g,"/"));$("#audio-listen-id").attr("src", url);document.getElementById("audio-listen-id").load();
}

参考原文

这世界盛大着也美好着

音频视频播放无法拖动快进相关推荐

前端html + js视频播放器（快进，快退，倍速，全屏等功能）
基于h5的video,很容易上手,直接上代码,其中还有一些可以优化的地方,大家可以自己优化在这里插入代码片<!DOCTYPE html> <html lang="en&q ...
video.js 实现视频只能后退，不能快进
主要思路是点击进度条需要获取拖动前的时间点,我用mouseup事件去处理的,获得到了oldTime 就好办,然后根据需求限制拖动快进快退,因为项目允许回看,不允许快进,所以得记录maxTime,记录用 ...
Android 入门第九讲01-音频（本地音乐播放，暂停，继续播放，获取播放时间，快进到指定位置，变速播放，播放data/data/目录下的音频文件，播放网络歌曲）
Android 入门第九讲01-音频(本地音乐播放,暂停,继续播放,获取播放时间,快进到指定位置,变速播放,播放data/data/目录下的音频文件,播放网络歌曲) 准备 1.储存在raw文件夹 2. ...
小程序禁止左右拖动_网课视频快进小技巧
目前很多网课教程网站都是采取播放内嵌Flash视频课件进行教学的方式,且绝大部分屏蔽了视频快进(倍进)播放功能,只能等待整段视频缓冲完成后才可对视频时间轴进度条进行拖拽操作,加上网站课件视频缓冲速度较 ...
ckplayer ajax,谁能帮我做一个脚本啊？能让这个网页视频播放可以拉动进度条可以快进...
谁能帮我做一个脚本啊?能让这个网页视频播放可以拉动进度条可以快进 $('.c_type').click(function(){ var data_id = $(this).attr('data-id ...
安卓平板倍速_推荐：安卓上本地音频播放器，可实现5秒快进快退和倍速播放...
前一篇文章推荐过一个app,但那app没倍速播放功能.我又找到了一个更完美的app 安卓手机上我自己需要这样一款app,主要用来听电子书,知识音频等.需要能实现快进快退几秒钟的以及倍速播放功能.这功能 ...
uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进
之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码一 , template中 <video id="myVide ...
利用海康播放库实现视频播放快进功能
给产品组开发的一个PYQT工具,用来播放视频,并能进行截图操作等,一开始我用的PYQT自带的phonon库实现的,比较简单,视频截图则通过代码调用Windows截图,效果不是很好,后来测试同事想让视频 ...
FFmpeg开发(九)——Qt视频播放器之快进滑动条(参考了暴风影音、迅雷影音)
FFmpeg开发(九)--Qt视频播放器之快进滑动条(参考了暴风影音.迅雷影音) 上一篇介绍了使用多线程 FFmpeg开发(八)--Qt视频播放器之多线程的使用(参考了暴风影音.迅雷影音) 本播放器系 ...

音频视频播放无法拖动快进

音频视频播放无法拖动快进相关推荐

最新文章

热门文章