html5 video無法快進怎麼辦
2023-01-06 18:00:32
html5 video無法快進的解決辦法：1、建立鍵盤事件「document.onkeyup = function (event){...}」；2、列印出request中傳遞的所有引數名稱；3、根據Range屬性值來獲取到需要將視訊定位的位置；4、在catch中將異常遮蔽掉即可。
本教學操作環境：Windows10系統、HTML5版、Dell G3電腦。
html5 video無法快進怎麼辦？
＜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標籤發起的請求就不會為null
if (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中將異常遮蔽掉即可。
推薦學習：《》
以上就是html5 video無法快進怎麼辦的詳細內容，更多請關注TW511.COM其它相關文章！