Que faire si la vidéo HTML5 ne peut pas être avancée rapidement

Solution au problème selon lequel la vidéo HTML5 ne peut pas être avancée rapidement : 1. Créez un événement clavier "document.onkeyup = function (event){...}" ; 2. Imprimez tous les noms de paramètres transmis dans la requête ; Selon la valeur de l'attribut Range Pour obtenir la position où la vidéo doit être positionnée 4. Bloquez simplement l'exception dans le catch ;

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.

Que dois-je faire si ma vidéo HTML5 ne peut pas être avancée rapidement ?

＜vidéo＞ Solution pour que la balise d'avance rapide ne prenne pas effet :

Dans le projet H5, utilisez la balise 39000f942b2545a5315c57fa3276f220 pour lire la vidéo, mais la lecture d'avance rapide de la vidéo ne peut pas être ignorée. Suivez la méthode native. pour définir les paramètres de surveillance suivants :

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

Chaque fois que vous avancez rapidement, la vidéo passe au début et est lue à nouveau.

Ensuite, j'ai pensé qu'à chaque fois que la vidéo est lue, le flux de fichier lu doit être différent. Il doit être intercepté à partir de la position correspondante du fichier. Semblable à tourner une page, une valeur limite de départ doit être passée, ainsi, toutes les données transmises dans la requête sont imprimées. Les noms des paramètres, mais à part les paramètres métier, il n'y a pas d'autres valeurs de paramètres.

Lorsque vous voyez que la vidéo lance une requête, il y aura un attribut Range dans l'en-tête. Selon la valeur de l'attribut, vous pouvez obtenir la position où la vidéo doit être positionnée. Elle doit être traitée en arrière-plan. Le code spécifique est le suivant :

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

Ensuite, lors du débogage, vous constaterez qu'à chaque fois que vous repositionnez la position de lecture vidéo, il y aura une nouvelle requête avec une plage de durée de lecture spécifique.

Il y a un autre nouveau petit problème, c'est-à-dire que lorsque la vidéo est en cours de lecture, l'arrière-plan génère un flux de fichiers vers le front-end. À ce moment-là, la réinitialisation de l'heure fermera la connexion d'origine. Ce type de fermeture de connexion est anormal. et un abandon sera signalé. Les informations sur l'exception de connexion n'ont pas besoin d'être traitées. Si vous ne souhaitez pas voir cette invite d'exception, bloquez simplement l'exception dans le catch.

Apprentissage recommandé : "Tutoriel vidéo HTML5"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!