Question

我有一个简单的mp4视频文件。

当我在HTML5中播放时，我想将视频分成3x4网格，每个网格播放视频的一部分，如下所示：

Desired outcome

但是，我当前的代码产生了这样的东西：

Current outcome

我很确定drawImage（）函数有问题，但我不知道哪个部分。

的index.html

<!DOCTYPE html>

<html>

  <head>
    <title>
      Lab 5: HTML5
    </title>
    <style>
      .box{
        width:660px;
        height:125px;
        margin-top: auto;
      }
      canvas{
        border:1px solid #fff;
        margin:10px 0 0 0;
      }
    </style>
  </head>

  <body>
    <div style="display:none">
      <video id="videoid" autoplay>
        <source src="video.mp4" type="video/mp4">
      </video>
    </div>

    <div class="box">
      <canvas id="canvas00" width="160" height="120"></canvas>
      <canvas id="canvas01" width="160" height="120"></canvas>
      <canvas id="canvas02" width="160" height="120"></canvas>
      <canvas id="canvas03" width="160" height="120"></canvas>
    </div>
    <div class="box">
      <canvas id="canvas10" width="160" height="120"></canvas>
      <canvas id="canvas11" width="160" height="120"></canvas>
      <canvas id="canvas12" width="160" height="120"></canvas>
      <canvas id="canvas13" width="160" height="120"></canvas>
    </div>
    <div class="box">
      <canvas id="canvas20" width="160" height="120"></canvas>
      <canvas id="canvas21" width="160" height="120"></canvas>
      <canvas id="canvas22" width="160" height="120"></canvas>
      <canvas id="canvas23" width="160" height="120"></canvas>
    </div>

    <script>
      var ROWS = 3; // Number of rows
      var COLS = 4; // Number of columns
      var tile_array = new Array();

      for(var ri = 0; ri < ROWS; ri++) {
        for(var ci = 0; ci < COLS; ci++) {
          tile_array.push("tile"+ri+ci); // An array that stores id of tiles
        }
      }

      var video = document.getElementById("videoid"); // Get the video

      update(video); // Update video

      function update(video) {
        drawtiles(640, 360, ROWS, COLS, video); //
        setTimeout(function(){
          update(video)
        }, 33); // Update video every 33 miliseconds
      }

      function drawtiles(w, h, r, c, source) {
        var tileW = Math.round(w / c); // Get the width of a single tile
        var tileH = Math.round(h / r); // Get the height of a single tile

        for(var ri = 0; ri < r; ri++) {
          for(var ci = 0; ci < c; ci++) {
            var target_ri = parseInt(tile_array[ri*COLS+ci][4]);
            var target_ci = parseInt(tile_array[ri*COLS+ci][5]);
            var thecanvas = document.getElementById("canvas"+ri+ci);

            /*TO DO: implement the code for drawing the tile in the
            (target_ri, target_ci) position of the video, with width tileW
            and height tileH, onto this canvas in the (ri, ci) position of the web page*/

            var ctx = thecanvas.getContext("2d");
            ctx.drawImage(video, target_ri, target_ci, tileW, tileH);

          }
        }
      }

    </script>
  </body>

</html>

Answer 1

context.drawImage()有3个用例，具体取决于您提供的参数数量。更准确地说，您有以下选择：

context.drawImage(video, x, y);

在画布上的特定x,y点绘制框架

context.drawImage(video, x, y, width, height);

除了将视频缩小/放大到您指定的width和height属性（如果视频本身具有600x800分辨率，并指定了{ {1}}您可以将整个视频帧缩小到这些维度。）

您的第三个选择是您所追求的：

width = 300, height = 400

这会占用视频帧的特定矩形区域，从context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);开始到sx, sy结束，仅在swidth, sheight处绘制该部分。

如果我正确理解您的代码，您应该执行以下操作：

x, y

基本上，视频具有自己的videoX = video.width / c; videoY = video.height / r; ctx.drawImage(video, ci*videoX, ri*videoY, videoX, videoY, target_ri, target_ci, tileW, tileH);和width属性。您将宽度分为4个部分（您的列），高度分为3个部分（您的行）。在height，您可以指定要绘制的视频帧的哪个部分（第2个到第5个参数）以及要绘制它的图块（最后4个参数）。

您可以在drawImage here找到更多信息。

如何使用HTML5中的drawImage（）将视频拆分为块？

1 个答案: