Question

我找到了一个代码，可以使用带JavaScript的画布分割视频，我只更改了源视频，但是加载后该视频无法播放，任何想法:) 我对写此书的人表示由衷的谢意，我不知道他的名字原来在这里：http://techslides.com/demos/split-video-into-canvas-tiles.html

<html>
    <head>
        <title>HTML5 Video Tiles with Drag and Drop using CANVAS Demo</title> 
        <style>
        #box{
          width:648px;
          height:366px;
          margin:0px auto;
        }
        .tile{
          border:1px solid #fff;
          float:left;
        }
        </style>
        </head>
        <body>
        <h1>Demo of splitting a video into HTML5 CANVAS Tiles with Drag and Drop</h1>
        <p>Check out the source to see how it works.  <a href="http://techslides.com/split-video-into-html5-canvas-tiles-with-drag-and-drop/">Back to Article</a></p>
        
        <div style="display:none">
            <video id="source-vid" autoplay loop> 
              <source src="Media/Acqua.mp4" type="video/mp4"> 
            </video> 
        </div>
        <div id="box"><canvas class="tile ui-draggable" id="tile00" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile01" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile02" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile03" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile10" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile11" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile12" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile13" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile20" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile21" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile22" height="120" width="160" style="position: relative;"></canvas><canvas class="tile ui-draggable" id="tile23" height="120" width="160" style="position: relative;"></canvas></div>
        <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <script type="text/javascript">
            ROWS = 3;
            COLS = 4;
            tiles(640, 360, ROWS, COLS);
            
            var video = $("#source-vid")[0];
            update(video);
        
            function update(video) {
              tiles(640, 360, ROWS, COLS, video);
              setTimeout(function() { update(video) }, 33);
            }
        
            function tiles(w, h, r, c, source) {
                var tileW = Math.round(w / c);
                var tileH = Math.round(h / r);
        
                for(var ri = 0; ri < r; ri += 1) {
                  for(var ci = 0; ci < c; ci += 1) {
                    //if source is not specified, just build canvas object, otherwise draw inside them
                    if (typeof source === 'undefined') {
                      var tile = $('<canvas class="tile" id="tile' + ri + ci + '" height="' + tileH + '" width="' + tileW + '"></canvas>').get(0);
                      $("#box").append(tile);
                      $(".tile").draggable();
                    } else {
                        var getit = $('#tile' + ri + ci).get(0);
                        context = getit.getContext('2d');
                        context.drawImage(source, ci*tileW, ri*tileH, tileW, tileH, 0, 0, tileW, tileH);
                    }
                  }
                }   
        
            }
        </script>
        
        </body></html>

高级Javascript-使用画布分割视频

0 个答案: