HTML5 : Separate a 1000x1000 video on four different 250x250 videos

Question

是否可以使用 HTML5 将一个 1000x1000 的矩形视频分成 4 个不同的 500x500 视频，并以不同方式配置每个较小的矩形？

Answer 1

文章:http://techslides.com/split-video-into-html5-canvas-tiles-with-drag-and-drop/

原始来源:http://techslides.com/demos/split-video-into-canvas-tiles.html

其实很简单:

<div style="display:none">
    <video id="source-vid" autoplay loop="true"> 
      <source src="sample-videos/BigBuckBunny_640x360.mp4" type="video/mp4"/> 
      <source src="sample-videos/BigBuckBunny_640x360.ogv" type="video/ogg"/> 
    </video> 
</div>
<div id="box"></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>

如果您需要没有可拖动脚本的演示，请告诉我。