HTML5 Coding Essentials and Best Practices - [Advanced] Extended examples

In this section, we propose five extended examples that use more JavaScript and more complex CSS manipulation. They might be a little hard to understand if you are a JavaScript beginner, but don't be afraid to try and test them, look at the code, etc.

Some examples are given "as is", such as the custom video player that uses SVG (at the end of the page); if you are interested, you may view the code.

Example #1: a player showing the use of every type of CSS3 transformation

Please see this example online, originally written by Chris Heilmann, and tuned by us ;).

codepen.io/w3devcampus/pen/bGqjVWG

Don't forget to click the JavaScript and CSS tabs of the CodePen in order to display the JavaScript code that creates the buttons on the right of the video, and the CSS that processes the different clicks and applies CSS3 transforms.

This example shows a lot:

It uses the HTML5 elements <nav>, <footer>, <header>.
It shows the use of CSS3 2D transformations (scale, translate, and rotate).
It shows how to handle DOM events using JavaScript and how to modify CSS properties of the <video> element from JavaScript.

Example #2: how to track all possible events and manipulate many properties

This example also shows how to handle failures. See the code and play with this example below:

codepen.io/w3devcampus/pen/abJjvqY

Below is a piece of code for handling errors during video playback:

...

vid.addEventListener('error', function(evt) {

logEvent(evt,'red');

}, false);

...

function logEvent(evt, color) {

switch (evt.type) {

...

case 'error':

var error = document.querySelector('video').error;

switch (error.code) {

case error.MEDIA_ERR_ABORTED:

note.innerHTML = "fetching aborted at the user's request";

break;

case error.MEDIA_ERR_NETWORK:

note.innerHTML = "a network error caused the browser to stop fetching the media";

break;

case error.MEDIA_ERR_DECODE:

note.innerHTML = "an error occurred while decoding the media";

break;

case error.MEDIA_ERR_SRC_NOT_SUPPORTED:

note.innerHTML = "the media indicated by the src

attribute was not suitable";

break;

default:

note.innerHTML = "an error occurred";

break;

}

break;

}

...

}

Example #3: how to display a percentage of buffering when using a slow connection

Check the example below:

codepen.io/w3devcampus/pen/vYxaNMq

Note that on mobile phones, the video does not start until the user presses the play control or clicks on the video picture. Using the "canplaythrough" event is a trick to call a function that starts the video player as soon as the page is loaded on a desktop computer. This event is not supported by mobile devices, so if you try this example on a mobile, the video will not start automatically.

As explained by the Apple Developer Web site: "The buffered property is a TimeRanges object: an array of start and stop times, not a single value. Consider what happens if the person watching the media uses the time scrubber to jump forward to a point in the movie that hasn’t loaded yet—the movie stops loading and jumps forward to the new point in time, then starts buffering again from there. So the buffered property can contain an array of discontinuous ranges. The example simply seeks the end of the array and reads the last value, so it actually shows the percentage into the movie duration for which there is data. "

Source code extract:

<!DOCTYPE html>

<head>

<title>JavaScript Progress Monitor</title>

function getPercentProg() {

var myVideo = document.getElementsByTagName('video')[0];

var endBuf = myVideo.buffered.end(0);

var soFar = parseInt(((endBuf / myVideo.duration) * 100));

document.getElementById("loadStatus").innerHTML = soFar + '%';

}

// Will be called as soon as the page is ready on desktop computer,

// Only when a user clicks on play control or image on mobile

function myAutoPlay() {

var myVideo = document.getElementsByTagName('video')[0];

myVideo.play();

}

function addMyListeners(){

var myVideo = document.getElementsByTagName('video')[0];

myVideo.addEventListener('progress', getPercentProg, false);

// Calls autoplay only if the device is adapted

myVideo.addEventListener('canplaythrough', myAutoPlay, false);

}

</script>

</head>

<h1>Check progression of buffering before playing a movie. Useful with

slow connections (3G, etc.)</h1>

<div>

<source src=https://html5doctor.com/demos/video-canvas-magic/video.webm

type=video/webm>

<source src=https://html5doctor.com/demos/video-canvas-magic/video.ogg

type=video/ogg>

<source src=https://html5doctor.com/demos/video-canvas-magic/video.mp4

type=video/mp4>

</video>

<p id="loadStatus">Buffering...</p>

</div>

</body>

</html>

Example #4: how to use SVG elements as external controllers

This is the ultimate way of doing a real custom player: redesign your own controls using SVG shapes! This example (try it online) is given "as is" for those of you who may be curious.

Example #5: a custom video player written by a previous student

This is more an example than a tutorial. Maurice, a student who followed the precursor version of this MOOC, had the assignment to write a custom video player with playlist, video thumbnails, custom play/pause/next/previous/volume controls, and present it in a Web page that used a nice layout based on the HTML5 structuring elements studied previously.

Here is the online example. We recommend that you look at the source code:

codepen.io/w3devcampus/pen/LYWBGYa