HTML5 비디오를 빨리 감을 수 없는 경우 수행할 작업

HTML5 비디오를 빨리 전달할 수 없는 문제에 대한 해결 방법: 1. 키보드 이벤트 "document.onkeyup = function (event){...}"를 생성합니다. 2. 요청에 전달된 모든 매개 변수 이름을 인쇄합니다. Range 속성 값에 따라 비디오를 배치해야 하는 위치를 얻으려면 4. catch에서 예외를 차단하면 됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5 버전, Dell G3 컴퓨터.

내 HTML5 동영상을 빨리 감기할 수 없으면 어떻게 해야 하나요?

H5 프로젝트에서는

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

빨리감기할 때마다 비디오가 처음으로 이동하고 다시 재생됩니다.

이후에는 동영상을 재생할 때마다 읽어오는 파일 스트림이 달라야 한다고 생각했습니다. 페이지를 넘기는 것과 마찬가지로 시작 경계 값을 전달해야 합니다. 따라서 요청에 전달된 모든 데이터가 매개변수 이름으로 출력되지만 비즈니스 매개변수 외에 다른 매개변수 값은 없습니다.

비디오가 요청을 시작하는 것을 보면 헤드에 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");//上传文件时都会有这些参数的
            }

그런 다음 디버깅할 때 비디오 재생 위치를 변경할 때마다 특정 재생 기간 범위와 함께 새로운 요청이 발생한다는 것을 알 수 있습니다.

또 다른 작은 문제가 있습니다. 즉, 비디오가 재생될 때 백그라운드에서 파일 스트림을 프런트 엔드로 출력하고 있습니다. 이때 시간을 재설정하면 원래 연결이 닫히게 됩니다. 중단이 보고됩니다. 연결 예외 정보를 처리할 필요가 없습니다. 이 예외 프롬프트를 표시하지 않으려면 catch에서 예외를 차단하면 됩니다.

추천 학습: "HTML5 비디오 튜토리얼"

위 내용은 HTML5 비디오를 빨리 감을 수 없는 경우 수행할 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!