首頁 > 文章 > web前端 > 行動端video影片播放的問題案例總結

行動端video影片播放的問題案例總結

php中世界最好的语言原創: 2017-11-27 10:59:024130瀏覽

下面給大家看幾個案列，都是一些問題案列和總結，值得大家參考和研究，因為我用canvas繪製了video，發現效果和直接用video一樣。因此還是用了原來video的方式

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

但是瀏覽器中還是沒有問題的，和canvas繪製一樣！點選體驗原生video版障眼法影片

失敗案例二（canvas渲染video）

後來我想到用canvas渲染video，也就是透過canvas的drawImage方式,結合requestAnimationFrame動畫，requestAnimationFrame動畫我之前製作婚禮邀請函總結的時候也介紹過。

下面貼出程式碼

 function VideoToCanvas(videoElement,fn) {
        if (!videoElement) {
            return;
        }
        var fn=fn||"";
        var canvas = document.createElement(&#39;canvas&#39;);
        canvas.width = videoElement.offsetWidth;
        canvas.height = videoElement.offsetHeight;
        var ctx = canvas.getContext(&#39;2d&#39;);
        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(&#39;play&#39;, function () {
            drawCanvas();
        }, false);
        newVideo.addEventListener(&#39;pause&#39;, stopDrawing, false);
        newVideo.addEventListener(&#39;ended&#39;, 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();

#還有一個回呼函數，就是在canvas播放完畢之後，可以傳入回呼函數！這個的測試地址請點擊，但是在安卓的微信、和一些瀏覽器中還是會彈出新的窗口，很是鬱悶！！

canvas繪製video的其他應用程式

canvas繪製video有很多其他的應用方式，例如我們可以製作影片播放同步模糊背景、影片截圖、灰色影片等等。

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

但這個只能做PC端了，行動端還是有問題的！！！！

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！