Zusammenfassung der Problemfälle bei der mobilen Videowiedergabe

Im Folgenden zeige ich Ihnen einige Fälle, bei denen es sich um Beispiele und Zusammenfassungen einiger Probleme handelt. Sie sind eine Referenz und ein Studium wert, da ich zum Zeichnen des Videos die gleiche Wirkung festgestellt habe wie bei der Verwendung des Videos direkt. Daher habe ich immer noch die ursprüngliche Videomethode

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

verwendet, aber im Browser gibt es immer noch kein Problem, genau wie beim Zeichnen auf Leinwand! Klicken Sie hier, um die native Videoversion der Blending-Methode zu erleben Video

Fehlerfall 2 (Canvas-Rendering-Video)

Später dachte ich darüber nach, Canvas zum Rendern von Videos zu verwenden Durch die drawImage-Methode von Canvas in Kombination mit der requestAnimationFrame-Animation und der requestAnimationFrame-Animation habe ich sie auch schon einmal eingeführt, als ich eine Zusammenfassung der Hochzeitseinladungen erstellt habe.

Der unten gepostete Code

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

kapselt show(), hide(), play(), pause(), change address change() und switch play und Pause playPause() ;

Die Verwendungsmethode ist wie folgt:

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

Es gibt auch eine Rückruffunktion, die nach der Leinwand erfolgt Wenn Sie mit dem Spielen fertig sind, können Sie die Rückruffunktion übergeben! Bitte klicken Sie auf diese Testadresse, aber in Android WeChat und einigen Browsern werden immer noch neue Fenster angezeigt, was sehr frustrierend ist! !

Andere Anwendungen für Leinwand-Zeichnungsvideos

Es gibt viele andere Anwendungen für Leinwand-Zeichnungsvideos, zum Beispiel können wir mit der Videowiedergabe synchronisierte, unscharfe Hintergründe, Video-Screenshots, graue Videos usw. erstellen.

Es gibt einen bestimmten Artikel, den ich jedem empfehlen kann, ihn zu lesen: http://html5doctor.com/video-canvas-magic/

Aber das kann nur getan werden auf dem PC. Es gibt immer noch ein Problem mit der mobilen Version! ! ! !

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

css3 klicken, um Welleneffekte anzuzeigen

Wie man fliegende Schmetterlinge macht in CSS3-Animation

Wie man Canvas verwendet, um die Interaktion zwischen dem Ball und der Maus zu realisieren

Das obige ist der detaillierte Inhalt vonZusammenfassung der Problemfälle bei der mobilen Videowiedergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!