移動端video視頻播放的痛

2017-06-28 1418 7 編輯:Monster 來源:前端技術分享

安卓很多瀏覽器播放視頻都會新開窗口,甚至播放完畢會有類似播放器的那種推薦廣告,讓我很是頭疼。我一度以為用canvas繪制視頻,應該可以解決這個問題,但是當我用canvas繪制完了視頻之后,在微信中播放還是一樣彈出新的播放窗口!!這就是移動端video視頻播放的痛!


失敗案例一

也就是我目前邀請函用的方式,因為我用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('ended', function () {

        $("#vidoid").hide();

        $("#videoimg").show();

    })

});


失敗案例二(canvas渲染video)

后來我想到用canvas渲染video,也就是通過canvas的drawImage方式,結合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();

還有一個回調函數,就是在canvas播放完畢之后,可以傳入回調函數!但是在安卓的微信、和一些瀏覽器中還是會彈出新的窗口,很是郁悶!!

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾 必赢国际苹果 梦幻 手游 钓鱼 赚钱 奥迅球探网足球指数 不投资在哪赚钱 分亨视频赚钱软件 雪缘园即时赔率 趣赢娱乐网址 男人考什么证最有前景赚钱多 广西快乐双彩 赚钱的门路-v讯cdfnbq 名人娱乐首页 高三暑假有一千元资金要怎么赚钱 七乐彩 微信小程序步数赚钱骗局 APP赚钱 花钱会员 科乐吉林麻将 下载