移動端video視頻播放的問題案例總結(jié)

<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('ended', function () {
        $("#vidoid").hide();
        $("#videoimg").show();
    })
});

但是瀏覽器中還是沒有問題的，和canvas繪制一樣！點(diǎn)擊體驗(yàn)原生video版障眼法視頻

失敗案例二（canvas渲染video）

后來我想到用canvas渲染video，也就是通過canvas的drawImage方式,結(jié)合requestAnimationFrame動畫，requestAnimationFrame動畫我之前制作婚禮邀請函總結(jié)的時(shí)候也介紹過。

下面貼出代碼

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

還有一個(gè)回調(diào)函數(shù)，就是在canvas播放完畢之后，可以傳入回調(diào)函數(shù)！這個(gè)的測試地址請點(diǎn)擊，但是在安卓的微信、和一些瀏覽器中還是會彈出新的窗口，很是郁悶！！

canvas繪制video的其他應(yīng)用

canvas繪制video有很多其他的應(yīng)用方式，例如我們可以制作視頻播放同步模糊背景、視頻截圖、灰色視頻等等。

具體有一篇文章，寫的還不錯(cuò)，推薦大家看一下：http://html5doctor.com/video-canvas-magic/

但是這個(gè)只能做PC端了，移動端還是有問題的�。。。�

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

css3點(diǎn)擊顯示漣漪特效

CSS3怎么制作蝴蝶飛舞的動畫

怎樣用canvas實(shí)現(xiàn)小球和鼠標(biāo)的互動

以上就是移動端video視頻播放的問題案例總結(jié)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！