＜video＞标签快进不生效

在H5项目中，使用<video>标签来播放视频，跳不过视频的快进播放，按照原生提供的方法，来进行如下监听设置：

var vol = 0.1;  //1代表100%音量，每次增减0.1
var time = 2; //单位秒，每次增减10秒function listenKeyboard() {var videoElement = document.getElementById("video");document.onkeyup = function (event) {//键盘事件var e = event || window.event || arguments.callee.caller.arguments[0];//鼠标上下键控制视频音量if (e && e.keyCode === 38) {console.log("音量加1");// 按 向上键videoElement.volume !== 1 ? videoElement.volume += vol : 1;return false;} else if (e && e.keyCode === 40) {console.log("音量减1");// 按 向下键videoElement.volume !== 0 ? videoElement.volume -= vol : 1;return false;} else if (e && e.keyCode === 37) {console.log("倒退1秒");// 按 向左键videoElement.currentTime !== 0 ? videoElement.currentTime = videoElement.currentTime -= time : 1;return false;} else if (e && e.keyCode === 39) {console.log("前进2秒,当前时间是:"+videoElement.currentTime+",视频长度是："+videoElement.duration);// 按 向右键var currPlayTime = videoElement.currentTime ;if (currPlayTime !== videoElement.duration){var afterSetTime = currPlayTime + time ;console.log('afterSetTime should be :'+afterSetTime) ;videoElement.currentTime = afterSetTime ;console.log('afterSetTime is :'+videoElement.currentTime) ;}else {videoElement.currentTime = videoElement.currentTime + 1;}console.log("快进后的时间是:"+videoElement.currentTime);return false;} else if (e && e.keyCode === 32) {console.log("暂停");// 按空格键 判断当前是否暂停videoElement.paused === true ? videoElement.play() : videoElement.pause();return false;}}
}

每次快进时，视频会跳动到开始，重新进行播放。

后在想，视频每次播放，读取的文件流肯定不同，需要从文件对应的位置进行截取，类似于翻页一样，需要传递一个起始边界值，于是打印出request中传递的所有参数名称，但除了业务参数外，并没有其他更多的参数值。

后看到video发起请求时，会在head中有Range的属性，根据该属性值来获取到需要将视频定位的位置，需要在后台进行处理，具体代码如下：

            String rangeString = request.getHeader("Range");//如果是video标签发起的请求就不会为nullif (StringUtils.isNotBlank(rangeString)){long range = Long.valueOf(rangeString.substring(rangeString.indexOf("=") + 1, rangeString.indexOf("-")));response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Content-Type", "video/mp4");response.setHeader("content-disposition", "attachment;filename=" + URLEncoder.encode(file.getName() , "UTF-8"));int fileLength = (int)file.length() ;response.setContentLength(fileLength);//10000是视频文件的大小，上传文件时都会有这些参数的response.setHeader("Content-Range", String.valueOf(range + (fileLength-1)));//拖动进度条时的断点，其中10000是上面的视频文件大小，改成你的就好response.setHeader("Accept-Ranges", "bytes");
//            response.setHeader("Etag", "W/"9767057-1323779115364"");//上传文件时都会有这些参数的response.setHeader("Etag", "737060cd8c284d8af7ad3082f209582d");//上传文件时都会有这些参数的}

然后，debug时，就会发现每次重新定位video的播放位置，就会有新的请求过来，带有具体的播放时长范围。

有另外一个新的小问题，就是视频正在播放时，后台正在向前端输出文件流，此时重新设置时间，就会关闭原来的连接，这种连接关闭为非正常关闭，会报出中止连接的异常信息，这种无需处理，如果不太想看见这种异常提示，在catch中将异常屏蔽掉即可。

＜video＞标签快进不生效相关推荐

限制 video 播放快进（vue）
限制/禁止 video 播放快进 html script html <video ref="video" :src="videoUrl" control ...
video视频快进拖动限制
简述通过使用流媒体形式分段加载视频,调取的是m3u8格式文件,再根据文件ts路径请求资源,然后转码播放: hls之m3u8.ts流格式详解拖动本次使用的是video的官方事件来操作的 seeki ...
html5应用测试方法,详解html5的video标签测试应用
1.video标签的使用属性:src(要播放的音频文件路径).autoplay(是否自动播放).control(进度条).loop(循环播放).onended(是否播放完毕的是一个事件) 2.实现了 ...
关于前端video标签视频无法拖动进度条快进问题(Django)
因为后端返回的是视频的文件流,并不是视频文件地址.后端返回流的时候要为header设置一些参数,否则部分浏览器会出现问题(如Google Chrome...). django中常用返回文件流写法: c ...
video视频标签怎么禁止用户拖动进度条快进
昨天经理给我一个需求 , 让我查一下h5播放视频怎么禁止用户快进, 然后刚刚搜了下, 实现了出来,代码如下 , 效果就是我点进度条想快进的话 , 会强制退回去, 这样用户就不能快进了 <body ...
html5 video首次观看禁止快进,Video Speed Controller - 快进/后退/回看在线视频
Video Speed Controller插件背景简介如今几乎每个人都会看网络视频,无论是电影.电视剧.新闻.搞笑娱乐,还是看视频教程.学习网课等等,每天可能都要花上不少的时间.如果你用过一些电脑 ...
Java后端处理video快进快退播放以及断点续传的原理和代码
video 快进快退的原理: 通过对所在服务器上的流媒体进行skip操作,然后再response的header里设置相应的Content-Range以及其他属性,来控制视频流的快进快退的功能. 断点续 ...
uniapp实现video禁止拖拽快进功能
开发中可能会遇到一个视频,不能让你拖拽,必须看完的功能- 不说废话,具体怎么实现呢? 首先一个video标签 <video id="myVideo" @timeupdate= ...
uniapp实现禁止video拖拽快进
在项目开发过程中,难免会用到video视频标签.根据客户要求,视频只能正常观看完,不能手动快进,以下是实现的方法:  <video id=" ...
给网页上的video元素加上快捷键实现快进几秒
在网页上观看视频的时候,可能无法通过方向键左右来快进和快退.这时候如果该视频元素使用的是Html的video标签,那么可以自己加js来实现. 如何判断页面视频使用的元素: f12打开开发者控制台,切换 ...

＜video＞标签快进不生效

＜video＞标签快进不生效相关推荐

最新文章

热门文章

＜video＞ 标签快进不生效

＜video＞ 标签快进不生效相关推荐

最新文章

热门文章

＜video＞标签快进不生效

＜video＞标签快进不生效相关推荐