モバイルビデオ再生の問題事例のまとめ

以下にいくつかの事例を示します。これは、いくつかの問題の例と概要です。ビデオを描画するためにキャンバスを使用しましたが、効果はビデオを直接使用した場合と同じであることがわかりました。そのため、引き続き元のビデオ方法

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

を使用しましたが、ブラウザでは問題なく、キャンバス描画と同じです。クリックして、ブラインド メソッドのネイティブ ビデオ バージョンを体験してくださいビデオ

失敗ケース 2 (キャンバス レンダリング ビデオ)

その後、キャンバスを使用してビデオをレンダリングすることを考えました。つまり、キャンバスのdrawImage メソッドを使用し、requestAnimationFrame アニメーションと組み合わせて使用​​することを考えました。 , requestAnimationFrame 以前の結婚式招待状のアニメーションまとめ の時にも紹介されました。

コードは以下に掲載されています

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

はshow()、hide()、play()、pause()、アドレス変更change()、再生と一時停止の切り替えplayPause()をカプセル化します

使用法は次のとおりです。

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

コールバック関数もあります。つまり、キャンバスの再生が終了した後、コールバック関数を渡すことができます。このテスト アドレスをクリックしてください。ただし、Android WeChat や一部のブラウザでは引き続き新しいウィンドウが表示され、非常にイライラします。 ！

キャンバス描画ビデオのその他のアプリケーション

キャンバス描画ビデオには他にも多くのアプリケーションがあり、たとえば、同期した背景をぼかしたビデオ再生、ビデオのスクリーンショット、グレーのビデオなどを作成できます。

とても良い記事があるので、ぜひ読んでみてください: http://html5doctor.com/video-canvas-magic/

ただし、これは PC バージョンでのみ実行できます。モバイル版にはまだ問題があります。 ！ ！ ！

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

css3 クリックして波及効果を表示

CSS3 で蝶が飛ぶアニメーションを作成する方法

キャンバスを使用してボールとマウスの相互作用を実現する方法

以上がモバイルビデオ再生の問題事例のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。