COMP3322 MODERN TECHNOLOGIES ON WORLD WIDE WEB

Lab 5 HTML5

Note: Please use Chrome when you are developing and testing your code
in this lab.

Overview
In this lab, we will implement a web page that splits a video to display on many draggable
CANVAS elements, using the new elements and APIs that HTML5 provides.

Fig. 1 shows the page upon loading, where a video is split and displayed onto an array of
3*4 CANVAS elements. We say the video is split into 3*4 tiles. The user can drag and drop
each tile (call it tile A) into a different position, and the tile (call it tile B) in the drop
position will be displayed in the original position of tile A. For example, an illustration of
the page after dragging and dropping the tile in the (2, 1) position to the (0, 1) position is
given in Fig. 2 (index of the rows/columns starts from 0).

Fig. 1
 Fig. 2

Lab Exercise 1 – Split and draw video onto canvas

In this lab exercise, we implement the display of the video on 12 <canvas> elements. On
each <canvas>, we will use the drawImage function to display the current playback image
of the video. The function will be called repeatedly in a high frequency, so as to achieve
the effect of video playback.

Step1: Download lab5_xxxxxxxx.zip, and extract it to a new folder, "lab5". There are two
files provided, index_template.html and video.mp4. You will implement all the codes in
index_template.html.

Step2: In the given <div style="display:none"></div>, create a <video> element with an id

of "videoid". Add video.mp4 as the source of this <video> element, with the type of
"video/mp4". Due to "display:none" style of the enclosing <div>, the video is not to be
seen where it is added in the web page, but will be displayed onto 12 <canvas> elements,
using the following steps.

Step3: Create 12 <canvas> elements in 3 <div> elements of class “box”, as follows:

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

Step4: In <script></script>, The following code is for repeatedly drawing the current
playback image of the video onto the 12 <canvas> elements. The tile_array is created to
record the id’s of the video tiles, to be displayed on the web page according to their
sequence in the array. Learn about the JavaScript setTimeout function at
https://www.w3schools.com/jsref/met_win_settimeout.asp, and parseInt function at
https://www.w3schools.com/jsref/jsref_parseint.asp.

Especially, thecanvas is the <canvas> element displayed in the (ri, ci) position on the page.
Implement the code for drawing the tile in the (target_ri, target_ci) position of the video,
of width tileW and height tileH, onto the canvas thecanvas. Learn how to draw part of a
video onto a canvas at https://www.w3schools.com/tags/canvas_drawimage.asp.

var ROWS = 3;
var COLS = 4;
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);
}
}

var video = document.getElementById("videoid");

update(video);

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

function drawtiles(w, h, r, c, source) {

var tileW = Math.round(w / c);
var tileH = Math.round(h / r);

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

}
}
}

Lab Exercise 2- Create a button to play/pause the video

In this section, we would create a button which when manually clicked, the video that is
playing will be paused (if it’s playing) or played (if it’s paused).

<div>

<button onclick="PlayPaused()">Play/Pause</button>

</div>

function PlayPaused() {
//Implement the code here.

Hint: You can refer to HTML5 video in W3 Schools.

https://www.w3schools.com/htmL/html5_video.asp

Lab Exercise 3 – Drag and drop video tiles

Next, we will use HTML5 "drag and drop" to allow the user to exchange two video tiles
between two <canvas> elements.

Step 1. Make each of the 12 <canvas> elements draggable by adding the draggable="true"
attribute.

Step 2. Add an event listener on the "ondragstart" event on each of the 12 <canvas>
elements. Implement the event handler function "drag", which passes id of the draggable
<canvas> element to the dataTransfer object.

Step 3. Add an event listener on the "ondragover" event on each of the 12 <canvas>
elements. Implement the event handler function "allowDrop", which prevents default
actions.

Step 4. Add an event listener on the "ondrop" event on each of the 12 <canvas> elements.
Implement the event handler function "drop" followng the sketch and hints as follows:

function drop(ev){
event.preventDefault();

var current_ri = parseInt(ev.dataTransfer.getData("text")[6]);

var current_ci = parseInt(ev.dataTransfer.getData("text")[7]);

//TO DO: complete the following code to retrieve row and colunm indices of the
canvas element in the drop position, similar to how we retrieve row and colunm
indices of the dragged canvas element in the above

var target_ri =
var target_ci =
 var index_current_id = current_ri*COLS + current_ci;
var index_drop_id = target_ri*COLS+target_ci;

//TO DO: exchange current_id and drop_id in tile_array

Note that with the above implemention, we do not really exchange positions of two
<canvas> elements on the web page by the drag-and-drop, but only exchange the video
tiles to be displayed on the two <canvas> elements. This is achieved by swapping the
sequence of the two tiles’ id’s in the tile_array array.

Lab Exercise 4 – Restore the video tiles into original sequence

In this section, we would create a button which when it is manually clicked, the video
tiles would be arranged back to original sequence (Fig. 4).

Before clicking the “Restore” button:

 Fig. 3

After clicking the “Restore” button:

Fig. 4

<div>

<button onclick="update2(video)"> Restore </button>

</div>

function update2(video) {

// Implement the code here.

}

Hints:

1. Make sure you understand the code that was implemented in Lab Exercise 1 and
3, especially how and where is the video tiles being stored.
2. It is recommended you create a copy of the video tiles before it is being exchanged
by the users.
3. Some functions that were implemented in previous steps can be reused.

Submission
Please finish this lab assignment before 23:59 Thursday November 15, 2018. Please
upload index.html and video.mp4 to i.cs.hku.hk web server under “Lab5”, similar to what
you did in previous labs. The URL to access your page should be
http://i.cs.hku.hk/~[your_CSID]/Lab5/index_template.html. We will check the page for
your lab 5 marking. Make sure you check the page after uploading it to the server.