当前位置:Gxlcms > html代码 > 移动端video视频播放的问题案例总结

移动端video视频播放的问题案例总结

时间:2021-07-01 10:21:17 帮助过:153人阅读

下面给大家看几个案列,都是一些问题案列和总结,值得大家参考和研究,因为我用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渲染video,也就是通过canvas的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();

还有一个回调函数,就是在canvas播放完毕之后,可以传入回调函数!这个的测试地址请点击,但是在安卓的微信、和一些浏览器中还是会弹出新的窗口,很是郁闷!!

canvas绘制video的其他应用

canvas绘制video有很多其他的应用方式,例如我们可以制作视频播放同步模糊背景、视频截图、灰色视频等等。

具体有一篇文章,写的还不错,推荐大家看一下:http://html5doctor.com/video-canvas-magic/

但是这个只能做PC端了,移动端还是有问题的!!!!

相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!


相关阅读:

css3点击显示涟漪特效

CSS3怎么制作蝴蝶飞舞的动画

怎样用canvas实现小球和鼠标的互动

以上就是移动端video视频播放的问题案例总结的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行