Summary of mobile video playback problem cases

Let me show you some cases below, which are examples and summaries of some problems. They are worthy of your reference and study, because I used canvas to draw the video and found that the effect is the same as using the video directly. Therefore, I still used the original video method

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

, but there is still no problem in the browser, just like canvas drawing! Click to experience the native video version of the trick Video

Failure Case 2 (canvas rendering video)

Later I thought of using canvas to render video, that is, through the drawImage method of canvas, combined with requestAnimationFrame animation, requestAnimationFrame animation, I also introduced it before when I made a summary of wedding invitations.

The code is posted below

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

encapsulates show(), hide(), play(), pause(), change address change(), and switch play and pause playPause ();

The usage method is as follows:

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

There is also a callback function, which is after the canvas has finished playing, you can Pass in the callback function! Please click on this test address, but new windows will still pop up in Android WeChat and some browsers, which is very frustrating! !

Other applications of canvas drawing video

There are many other applications for canvas drawing video, for example, we can make video playback synchronized blurred background, video screenshots, gray video, etc.

There is a specific article, which is pretty good. I recommend everyone to read it: http://html5doctor.com/video-canvas-magic/

But this can only be done on PC. There is still a problem with the mobile version! ! ! !

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

css3 click to display ripple effects

How to make flying butterflies in CSS3 Animation

How to use canvas to realize the interaction between the ball and the mouse

The above is the detailed content of Summary of mobile video playback problem cases. For more information, please follow other related articles on the PHP Chinese website!