HTML5 is the latest iteration of the HTML standard programming language. HTML5 has new features that simplify the use of graphics and multimedia content on a web page. Two new tags in HTML5 are “” and “.” The tag is used for drawing graphics with Javascript and displaying images and video content. The tag is not currently supported by many different multimedia sites for a variety of reasons. However, some sites are displaying HTML5 video rather than Flash for iPad users.
Step 1
Add information about the video content to the body of your HTML5 document. You will need to define the “” which is the path to the video file. You will also need to define the “” which is the information about the encoding type of the video.
“Theora” is an open and free video codec. Not all browsers support “ogv” video content. Internet Explorer does not currently support Theora; however, Firefox and Google Chrome do.
Step 2
Define any number of canvas areas to be displayed on your webpage within your HTML5 code. The “” tag is very similar to the ” ” tag. The “” tag does not have a “src” or “alt” attribute, it has only “width” and “height.”
Step 3
Write the Javascript code to be performed when the HTML5 page is first loaded into the browser.
this.video = document.getElementById(“video”);
this.c-mine = document.getElementById(“c-mine”);
this.ctx1 = this.c-mine.getContext(“2d”);
this.c-video-mine = document.getElementById(“c-video-mine”);
this.ctx2 = this.c-video-mine.getContext(“2d”);
This code defines the two canvases, “getElementById” retrieves the canvas DOM node and “getContext” is used to obtain the rendering context and its drawing function.
Step 4 Create a “green screen” effect for your video by loading a different background image into a second canvas. Call “drawImage” to copy the video to the graphics context named “ctx1″ of the “c-mine” canvas. Compute the number of pixels in the canvas and pull out the red, green, and blue pixel values replacing them with zero. This creates transparency. Draw the new image to the canvas with “this.ctx2.putImageData(frame, 0, 0);” which will display a different background image in the second canvas named “c-video-mine.”