Topic 10: HTML5 Tags - Video, Audio, and Canvas

Video Tag

The video tag makes it easy to embed videos into a website. HTML5 video includes an opening and closing video tag, with one or more source tags to provide alternate video file formats.


            <video width="300" height="200" controls>

              <source src="video.mp4" type="video/mp4">

              <source src="video.ogg" type="video/ogg">

              Your browser does not support the video tag.

            </video>

Supported video formats include mp4, webm, and ogg. Providing multiple formats make it more likely to have a video format that is supported by the user's browser. The first recognized format is used.

The opening tag can have several attributes.

Providing height/width attributes keep the webpage from flickering as the video loads.
controls will cause controls like pause, play, etc to show in the video window.
autoplay will automatically play the movie on load. This is usually not a good idea as it may annoy users.
loop will make the video repeat automatically.
poster="image.jpg" will display the image in the link until the video plays.
An optional src attribute can be used in the opening tag to provide the video url instead of in a <source> tag.
There are many other attributes that can be added to a video tag.

An optional <track> element can be added as a child of a video element which can have subtitles, captions, descriptions, etc. in it which will appear in the video. The track element must be a .vtt file, and should have a kind attribute specifying how the text track should be used.

Enjoy a video of my son's choir singing about King Louis XVI of France.

Video Events

The HTML5 Video and Audio tags have a wide range of events that can be listened for and used to trigger JavaScript functions. Here are a few Audio/Video Events.

ended - Fires when the current file has ended.
canplaythrough - Fires when the file can be played to the end without buffering.
play - Fires when the playback starts at the beginning or after being paused.
pause - Fires when the playback is paused.
loadstart - Fires when the browser starts looking for the file.

In the previous video, an 'ended' event listener reloads the video once it it has ended, which makes the poster image appear again.

Audio Tag

The audio tag plays embedded audio files and is similar to the video tag, except that the supported file formats are mp3, wav, and ogg. The opening audio tag can have attributes similar to the video tag, such as conntrols, autoplay, loop, muted, volume, etc. It can have child elements of one or more source tags.


            <audio controls>

              <source src="audio.mp3" type="audio/mp3">

              <source src="video.ogg" type="audio/ogg">

              Your browser does not support the audio tag.

            </audio>

Here is an audio file of Master the Tempest is Raging. This is my favorite arrangement, but it is just a practice recording. Forgive the mistakes.

Canvas tag

The canvas tag is a container for graphics. Javascript can be used with the canvas tag to enable drawing on a webpage, displaying graphics, animating objects, etc.

Define tag in HTML


            <canvas id="myCanvas" width="300" height="300">

            
              Your browser does not support the canvas tag.

            </canvas>

The id is necessary to access the canvas through JavaScript. Width and height can also be used to define the size of the canvas. Once the canvas is defined in the HTML, use JavaScript to draw lines, shapes, and text, display and animate images, etc. You should also add a text default for browsers that don't support the canvas tag.

Draw with JavaScript

In order to use the canvas, JavaScript is needed. First, select the canvas element using getElementById().

Next define a rendering context using getContext(2d). (Other contexts, such as 3d are available.)

Then define what you want to draw in the canvas element. Define the fill color or pattern with fillStyle, make a rectangle with fillRect(), a circle with arc(), text with fillText(), or draw a line with lineTo(). Finally, to draw the shape or line add stroke(), and to fill the shape add fill(). Here is an example. of the code to make a circle.


            function draw2() { 

   var ctx = myCanvas.getContext('2d'); 

   ctx.fillStyle = 'rgba(100, 99, 200, 0.5)';

   ctx.beginPath();

   ctx.arc(95,110,40,0,2*Math.PI);

   ctx.stroke();

   ctx.fill();

}