Editing Web video

[[Category:tutorial]]

= Video and Audio formats for web =
<ref name="formats"> Read more on browsers' supported formats in https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats</ref>


{| class="wikitable" border="1"
|-
!
! '''Royalty Free'''
! '''Patented''' 
|-
| Codec & containers
| Theora(video) + Vorbis(audio) > '''.ogv''' 
| H.264 (video) + AAC or MP3 (audio) > '''.mp4'''
|-
| Browsers
| Firefox, Chrome, Opera
| Internet Explorer, Chrome, Safari 
|}

== video codecs and containers explained==
Video files such as .avi .mp4 .ogv .mkv are '''container formats'''.

Like a .zip file which contains other files within it, 
'''video container formats define how to store video and audio streams within them.''' <ref name="divehtml">
http://diveintohtml5.info/video.html</ref>

'''Each video container allow specific audio and video codecs'''. 


A codec defines the way (the algorithm) by which a audio or video stream is encoded and decoded. <ref name="all">All info on av codecs and containers in http://wiki.multimedia.cx/</ref>

More on video codecs <reg name="codecs">
H264 (video):
* can be embedded in '''.mp4''' container
* is patent-encumbered

Theora (video):
* can be embedded in any codec, but is most common in '''.ogv''' container 
* royalty-free 

MP3 (audio):
* number of channels: 1 or 2 
* possible bitrates: 64 kbps, 128 kbps, 192 kbps
* is patent-encumbered
* Also known as MPEG-1 Audio Layer 3. 

AAC (audio)
* Also known as Advanced Audio Coding
* number of channels: up to 48
* is patent-encumbered

Vorbis (audio)
* can be embedded in .ogg (also .mp4, .webm, .mkv) containers 
* royalty-free 
* number of channels: any
</ref>



==prepare your files==
<span style="background:yellow">To be certain that your videos will play in all current browsers, you'll need to have videos in '''both .mp4 and .ogv container formats.'''</span> In other words you need to encode your videos into these 2 formats.

There are several solutions to do this, but [http://www.mirovideoconverter.com/ Miro video converter] seems to the best, converting both to .mp3 and .ogg.

Download Miro from http://www.mirovideoconverter.com/

===in Miro===
* Select the file you want to convert to .ogv and .mp4
* Choose the Format menu: 
** '''For a .mp4 video''' Video > <code>MP4</code>
** '''For a .ogv video''' Video > <code>Ogg Theora</code>
* Press the large button: "Convert to ..."
Conversion will start. When it is done the new file will be saved.

[[File:Miro Video Converter_005.png|300px]]

== video tag ==
<source lang="html4strict">
<video controls>
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4"  type="video/mp4">
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv"  type="video/ogg">
</video>
</source>

This is the simplest a web video player you can get. 

A <nowiki><video></nowiki> tag encapsulating 2 <nowiki><source></nowiki> tags, each containing the same video in the different formats <nowiki>mp4 and ogv</nowiki>. 

The argument <nowiki>controls</nowiki> make sure the video players has controls.

==audio tag==
If you want to create an audio player, it is similar to video: 

<source lang="html4strict">
<audio controls>
  <source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.mp3"  type="audio/mp3">
  <source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.ogg"  type="audio/ogg">
</audio>
</source>

== video / audio tag attributes ==
Besides <nowiki>controls</nowiki> the <nowiki><video></nowiki> has a number of other attributes.<ref name="attributes">Read more on video attributes in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video</ref>

* controls - if present, show  player's controls
* autoplay - if present, automatically start player as page loads.
* loop - if present, 
* poster - presents a poster image while the video is stopped  as 
* height
* width

<source lang="html4strict">
<video controls loop width=800 poster="http://static.ddmcdn.com/gif/tour-de-france-top-ways-the-race-has-changed-picnic-130619.jpg">                                                           
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4"  type="video/mp4">
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv"  type="video/ogg">
</video>
</source>