Advanced video examples

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 😉 The editable source code is here at JS Bin.

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: APPLYING CSS3 FILTERS TO A VIDEO IN REAL TIME

Please see this example online. Play the video and then click on the video while it’s playing. This will change in real-time the CSS class of the video element. Each class uses the filter property with different values.

Note that CSS filters are not yet 100% supported by the major browsers. You still need to use prefixed versions of the CSS properties, as shown below (this table is taken from caniuse.com).

CSS filter support (green squares with a small yellow part in the top right corner) means that a prefix is needed, like -webkit-filter, or -moz-filter or -o-filter):

There is an up-to-date version of this table.

Use <video class=”blur”> for example, to obtain a blurry video. This complete example changes the CSS class associated to the video element, on the fly in a mouseclick listener callback.

 

  1. .blur {
  2.     filter: blur(3px);
  3. }
  4. .brightness {
  5.     filter: brightness(5);
  6. }
  7. .contrast {
  8.     filter: contrast(8);
  9. }
  10. .huerotate {
  11.     filter: huerotate(90deg);
  12. }
  13. .huerotate2 {
  14.     filter: huerotate(180deg);
  15. }
  16. .huerotate3 {
  17.     filter: huerotate(270deg);
  18. }
  19. .saturate {
  20.     filter: saturate(10);
  21. }
  22. .grayscale {
  23.     filter: grayscale(1);
  24. }
  25. .sepia {
  26.     filter: sepia(1);
  27. }
  28. .invert {
  29.     filter: invert(1)
  30. }

EXAMPLE 3: 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 online.

 

EXAMPLE 4: HOW TO DISPLAY A PERCENTAGE OF BUFFERING WHEN USING A SLOW CONNECTION

See the example online here too.

 

EXAMPLE 5: 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 is given “as is” for those of you who may be curious. An SVG course from W3C might be available on W3Cx one of these days. Stay tuned 😉

Try it online!

EXAMPLE 6: A CUSTOM VIDEO PLAYER WRITTEN BY A STUDENT WHO TOOK A PRECURSOR VERSION OF THIS MOOC

This is more an example than a tutorial. Maurice, a student who followed the precursor version of this MOOC at the w3devcampus.com Web site, 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 new structuring elements seen during Week 1.

Here is the online example on JS Bin, by Maurice Buiten.

OPTIONAL PROJECTS

This might be useful: free videos at https://download.blender.org/peach/bigbuckbunny_movies/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s