Was tun, wenn HTML5-Video nicht schnell vorgespult werden kann?

Lösung für das Problem, dass HTML5-Videos nicht schnell vorgespult werden können: 1. Erstellen Sie ein Tastaturereignis „document.onkeyup = function (event){...}“ 2. Drucken Sie alle in der Anfrage übergebenen Parameternamen aus; Gemäß dem Bereichsattributwert So ermitteln Sie die Position, an der das Video positioniert werden muss: 4. Blockieren Sie einfach die Ausnahme im Catch.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, Dell G3-Computer.

Was soll ich tun, wenn mein HTML5-Video nicht schnell vorgespult werden kann?

＜video＞ Lösung dafür, dass der Schnellvorlauf nicht wirksam wird:

Verwenden Sie im H5-Projekt den Tag 39000f942b2545a5315c57fa3276f220, aber die Schnellvorlaufwiedergabe des Videos kann nicht übersprungen werden um die folgenden Überwachungseinstellungen vorzunehmen:

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

Jedes Mal, wenn Sie vorspulen, springt das Video an den Anfang und wird erneut abgespielt.

Danach dachte ich, dass der gelesene Dateistrom bei jeder Wiedergabe unterschiedlich sein muss. Ähnlich wie beim Umblättern einer Seite muss ein Startgrenzwert übergeben werden. Daher werden alle in der Anfrage übergebenen Daten ausgedruckt, außer den Geschäftsparametern gibt es jedoch keine anderen Parameterwerte.

Wenn Sie sehen, dass das Video eine Anfrage auslöst, befindet sich im Kopf ein Bereichsattribut. Anhand des Attributwerts können Sie die Position ermitteln, an der das Video positioniert werden muss. Dies muss im Hintergrund verarbeitet werden. Der spezifische Code lautet wie folgt:

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

Dann werden Sie beim Debuggen feststellen, dass jedes Mal, wenn Sie die Videowiedergabeposition neu positionieren, eine neue Anfrage mit einem bestimmten Wiedergabedauerbereich kommt.

Es gibt ein weiteres neues kleines Problem: Wenn das Video abgespielt wird, gibt der Hintergrund einen Dateistream an das Frontend aus. Zu diesem Zeitpunkt wird die ursprüngliche Verbindung geschlossen und es wird ein Abbruch der Verbindungsausnahme gemeldet. Wenn Sie diese Ausnahmeaufforderung nicht sehen möchten, blockieren Sie einfach die Ausnahme im Catch.

Empfohlenes Lernen: „HTML5-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWas tun, wenn HTML5-Video nicht schnell vorgespult werden kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!