2023年11月25日

WEB HTML代写 | COMP3322B Modern Technologies on World Wide Web

本次香港CS代写主要是HTML5相关的WEB开发
COMP3322B Modern Technologies on World Wide Web Assignment Three
Total 6 points

Deadline: Apr 23, 2021 23:59

Overview

You are going to develop a Web interface with a number of HTML 5 features. The interface will display a video in a Video element and a series of processed frames in a Canvas element. Effects will be applied to the frames drawn on the canvas, which is controlled by a drag-and-drop mechanism using the HTML drag-and-drop API.

Please note that due to security constraints, browser will not draw video frames on a canvas if the page is loaded locally. Therefore, you must test your work by accessing the page through a web server. (Same as what you have done in Assignment 2)

Objectives

  1. A learning activity to support ILO 1 and ILO 2.
  2. To learn how to manipulate video frames in a HTML canvas.
  3. To learn how to manipulate image data on a HTML canvas.
  4. To learn how to use HTML drag-and-drop API features.

HTML5 features

▪ The HTML video element
The HTML video element <video> can be used to show video. We can adjust the settings through the many attributes available, and monitor the video status through its events, for example:

HTML

<head>
  <script type="text/javascript" src="demo.js"></script>

</head>
<body>

  <video id="myVideo" width="640" controls="true">
    <source src="video.mp4" type="video/mp4">

  </video>
</body>

JavaScript (demo.js)

window.addEventListener('DOMContentLoaded', function() {
  let myVideo = document.getElementById('myVideo');

  myVideo.addEventListener('play', function() {
    console.log("playing");

}, false);

myVideo.addEventListener('pause', function() {
    console.log("paused");

  }, false);
  myVideo.addEventListener('ended', function() {

    console.log("stopped");
  }, false);

});

Here, the DOMContentLoaded event is used so that the video element is accessed right after DOM is loaded completely. You may use window.onload to achieve the same goal.

References: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

▪ Manipulate video frame on a HTML canvas
We can draw the current video frame of a video on a canvas by using drawImage() of a canvas context. This process could be done repeatedly to mimic a video playback on the canvas. For example:

HTML

<head>
  <script type="text/javascript" src="demo.js"></script>

</head>
<body>

  <video id="myVideo" width="640" controls="true">
    <source src="video.mp4" type="video/mp4">

</video>

  <canvas id="myCanvas" width="640" height="360"></canvas>
</body>

JavaScript (demo.js)

let myCanvas, myContext, myVideo;

// wait for DOM before animation
window.addEventListener('DOMContentLoaded', function() {

  myCanvas = document.getElementById('myCanvas');
  myContext = myCanvas.getContext('2d');
  myVideo = document.getElementById('myVideo');

  // start animation when video starts playing
  myVideo.addEventListener('play', function() {

    requestAnimationFrame(drawVideo);
  }, false);

});

function drawVideo() {
  myContext.drawImage(myVideo, 0, 0,

                      myVideo.videoWidth, myVideo.videoHeight);
  requestAnimationFrame(drawVideo); // draw next frame

}