Synthèse des cas problématiques de lecture vidéo sur terminaux mobiles

Je vais vous montrer quelques cas ci-dessous, qui sont des exemples et des résumés de certains problèmes. Ils méritent votre référence et votre étude, car j'ai utilisé un canevas pour dessiner la vidéo et j'ai constaté que l'effet est le même que celui de l'utilisation de la vidéo. directement. Par conséquent, j'ai toujours utilisé la méthode vidéo originale

<div class="commondw videoimg" id="videoimg"></div><video class="vido" id="vidoid" poster="images/photo/video.jpg">
    <source src="media/move.mp4" type="video/mp4"></video>$("#videoimg").on("click", function () {
    $(this).fadeOut(1000);
    $(".clicktips").hide();
    $("#vidoid").show();
    $("#vidoid")[0].play();
    $("#vidoid").bind(&#39;ended&#39;, function () {
        $("#vidoid").hide();
        $("#videoimg").show();
    })
});

, mais il n'y a toujours aucun problème dans le navigateur, tout comme le dessin sur toile ! Cliquez pour découvrir la version vidéo native de la méthode d'aveuglement Vidéo

Cas d'échec 2 (vidéo de rendu sur toile)

Plus tard, j'ai pensé à utiliser Canvas pour rendre la vidéo, c'est-à-dire , grâce à la méthode drawImage de canvas, combinée à l'animation requestAnimationFrame, l'animation requestAnimationFrame, je l'ai également présentée auparavant lorsque j'ai fait un résumé des invitations de mariage.

Le code publié ci-dessous

 function VideoToCanvas(videoElement,fn) {
        if (!videoElement) {
            return;
        }
        var fn=fn||"";
        var canvas = document.createElement('canvas');
        canvas.width = videoElement.offsetWidth;
        canvas.height = videoElement.offsetHeight;
        var ctx = canvas.getContext('2d');
        var newVideo = videoElement.cloneNode(false);
        var timer = null;
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
        function drawCanvas() {
            ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
            timer = requestAnimationFrame(drawCanvas);
        }
        function stopDrawing() {
            cancelAnimationFrame(timer);
        }
        function endedCallBack(){
             cancelAnimationFrame(timer);
             fn && fn()
        }
        newVideo.addEventListener('play', function () {
            drawCanvas();
        }, false);
        newVideo.addEventListener('pause', stopDrawing, false);
        newVideo.addEventListener('ended', endedCallBack, false);
        videoElement.parentNode.replaceChild(canvas, videoElement);
        this.play = function () {
            newVideo.play();
        };
        this.pause = function () {
            newVideo.pause();
        };
        this.playPause = function () {
            if (newVideo.paused) {
                this.play();
            } else {
                this.pause();
            }
        };
        this.change = function (src) {
            if (!src) {
                return;
            }
            newVideo.src = src;
        };
        this.drawFrame = drawCanvas;
        this.show = function () {
            canvas.style.display = "block";
        }
        this.hide = function () {
            canvas.style.display = "none";
        }
    }

encapsule show(), hide(), play(), pause(), change d'adresse change() et change de lecture et de pause playPause() ;

La méthode d'utilisation est la suivante :

var canvasvedio=new VideoToCanvas(document.getElementById("vidoid"),function(){
canvasvedio.hide();
$("#videoimg").show();});canvasvedio.play();

Il existe également une fonction de rappel, qui s'active après que le canevas ait fini de jouer, vous pouvez passer la fonction de rappel ! Veuillez cliquer sur cette adresse de test, mais de nouvelles fenêtres apparaîtront toujours dans Android WeChat et certains navigateurs, ce qui est très frustrant ! !

Autres applications pour la vidéo de dessin sur toile

Il existe de nombreuses autres applications pour la vidéo de dessin sur toile, par exemple, nous pouvons créer une lecture vidéo synchronisée avec des arrière-plans flous, des captures d'écran vidéo, des vidéos grises, etc.

Il y a un article spécifique, qui est plutôt bien, je recommande à tout le monde de le lire : http://html5doctor.com/video-canvas-magic/

Mais cela ne peut être fait. sur PC Il y a toujours un problème avec la version mobile ! ! ! !

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

css3 cliquez pour afficher les effets d'entraînement

Comment faire des papillons volants en CSS3 Animation

Comment utiliser le canevas pour réaliser l'interaction entre la balle et la souris

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!