Editing Courses/Essential HTML (section)

=Day 3: audio,video,canvas= 
In the latest version of HTML, HTML5 audio-visual media became supported by HTML, without the need for flash plug-ins. Audio and video became as common to HTML, as images.

==How to: codecs==
In order to play audio or video you need to make sure the audio and videos of your pages are readable by all browsers. This means you need to correctly '''choose the codecs you'll use to encode your audio/video'''. 

The safest option is to encode:
* audio as: mp3 or aac 
* video as: mp4(h.264)

To convert your files according to these codecs you can use the online conversion site: http://hdconvert.com/


==How to: audio tag==
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
<pre>
<audio src="myaudio.mp3"></audio>
</pre>

===<nowiki><audio></nowiki> arguments===
Besides the src other arguments can be given to audio tag:
* autoplay: starts playing as the page loads
* controls: will show the controls for the audio player
* loop: audio will loop
* volume: playback volume, it ranges from 0.0 (silent) to 1.0 (loudest).

==How to: video==
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
<pre>
<video src="myvideo.mp4"></video>
</pre>

===<nowiki><video></nowiki> arguments===
same as audio tag arguments

==tracks==
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

Both audio and video tags allow for a child <nowiki><track></nowiki> tag.

Track lets you specify timed text tracks, such as a  subtitle track. 

tracks can be:
* [http://en.wikipedia.org/wiki/SubRip SubRip] .srt 
* [https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_FormatWebVTTT] .vtt
 <track kind="captions" src="foo.en.vtt" srclang="en" label="English">  


'''Knowing all this can you transform you browser in a karaoke machine using an mp3 or mp4 and the corresponding .srt file'''

==<nowiki><canvas></nowiki>==
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

[http://www.html5canvastutorials.com/ canvas tutorial]

[http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/ canvas cheat sheet]

<nowiki><canvas></nowiki> creates a fixed-size drawing surface in one or more rendering contexts (2D or 3D), which are used to create and manipulate the content shown.

 drawing with code (01)

Canvas, like the name indicates, is a blank canvas where images can be drawn. 
You can '''draw''' by choosing '''a drawing context,''' which can either be 2D or 3D and '''draw through instructions'''.

=== 2D Drawing Context===
My context 
 var ctx = canvas.getContext("2d");
My drawing instructions to create a rectangle.
  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 55, 50);

All '''2D''' drawing methods are described in https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.

For an example of a 2D canvas drawing see [[#2D sample]].


=== 3D Drawing Context===
To create '''3D''' drawings [https://www.khronos.org/webgl/ WebGL] 3D graphics API is used.

Here are a few tutorials and and guides on it:


http://learningwebgl.com/blog/

https://dev.opera.com/articles/introduction-to-webgl-part-1/




===canvas samples===
====2D sample====
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="application/javascript">
      function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
      var ctx = canvas.getContext("2d");

      //rectangle
      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
      ctx.fillRect (30, 30, 55, 50);

      // text
      ctx.fillStyle = "black";
      ctx.font = "48px serif";
      ctx.fillText('Test', 10, 100);

      // path
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.lineWidth = 10;
      ctx.lineTo(0, 150);
      ctx.stroke();

      }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>
</source>

[[Category:teaching]]