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条)

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？