jsut_so_so 2016-05-13 07:34 采纳率: 100%
浏览 1550
已采纳

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

 <!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条回答 默认 最新

  • Go 旅城通票 2016-05-14 01:59
    关注
             $(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条)

报告相同问题？

悬赏问题

  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler