qq_15651481
jsut_so_so
采纳率100%
2016-05-13 07:34

多个本地视频如何切换到一个canvas里下面代码会显示多个视频重叠在一起求解啊aaaaa

10
已采纳
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网络视频Demo</title>
<script type="text/javascript" src="jquery.min.js">

</script>
<script>
    $(function() {
        $("#vv").on("click", "li video", function() {


            var $v = $(this);
            var v = $v[0];
            var c = $("#myCanvas")[0];
            var ctx = c.getContext("2d");
            ctx.clearRect(0,0,500, 500);
            //alert("ssd");         
                var i =setInterval(function() {
                    ctx.drawImage(v, 0, 0, 500, 500)

                }, 20);


        });
    })
</script>
</head>
<body>
    <input type="file" id="file" onchange="onInputFileChange()" />
    <div>
        <ul id="vv">
        </ul>
    </div>
    <div id="d">
        <canvas id="myCanvas" width="500" height="500"></canvas>
    </div>
    <script>
        function onInputFileChange() {
            var file = document.getElementById('file').files[0];
            var url = URL.createObjectURL(file);
            //document.getElementById("vv").innerHTML="<video src="+url+" controls autoplay >";
            var sli = '<li><video src='+url+' width="270" controls autoplay loop/></li>';
            var $li = $(sli);
            $("#vv").append($li);

        }
    </script>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • showbo GoCityPass新加坡曼谷通票 5年前
             $(function () {
                var timer/////////
                $("#vv").on("click", "li video", function () {
                    clearInterval(timer)//清除上一个视频的实施期,要不就交替显示了
    
                    var $v = $(this);
                    var v = $v[0];
                    var c = $("#myCanvas")[0];
                    var ctx = c.getContext("2d");
                    ctx.clearRect(0, 0, 500, 500);
                    timer = setInterval(function () {/////////////
                        ctx.drawImage(v, 0, 0, 500, 500)
    
                    }, 20);
    
    
                });
            })
    
    点赞 1 评论 复制链接分享
  • wangmanjie -缘故- 5年前

    这排版,我也是醉了,还不如插个图片呢

    点赞 评论 复制链接分享

相关推荐