What to do if html5 video cannot be fast forwarded

html5 The solution to the problem that video cannot be fast forwarded: 1. Create a keyboard event "document.onkeyup = function (event){...}"; 2. Print out the names of all parameters passed in the request; 3. Get the position where the video needs to be positioned based on the Range attribute value; 4. Just block the exception in the catch.

#The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

html5 What should I do if the video cannot be fast forwarded?

＜video＞ Solution to the problem that the fast forward tag does not take effect:

In the H5 project, use the

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;
 
        }
 
    }
}

Every time you fast forward, the video will jump to the beginning and play again.

Later, I thought that every time the video is played, the file stream read must be different. It needs to be intercepted from the corresponding position of the file. Similar to turning a page, a starting boundary value needs to be passed, so the request is printed out. All parameter names passed in, but except for business parameters, there are no other parameter values.

When you see that the video initiates a request, there will be a Range attribute in the head. According to the attribute value, you can obtain the position where the video needs to be positioned. This needs to be processed in the background. The specific code is as follows:

        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");//上传文件时都会有这些参数的
            }

Then, when debugging, you will find that every time you reposition the video playback position, a new request will come with a specific playback duration range.

There is another new small problem, that is, when the video is playing, the background is outputting a file stream to the front end. If the time is reset at this time, the original connection will be closed. This kind of connection closure is abnormal. An exception message for aborting the connection will be reported, which does not need to be handled. If you don't want to see this exception prompt, just block the exception in the catch.

Recommended learning: "HTML5 Video Tutorial"

The above is the detailed content of What to do if html5 video cannot be fast forwarded. For more information, please follow other related articles on the PHP Chinese website!