Web video - Revision history

Andre at 12:09, 27 November 2018

2018-11-27T12:09:41Z

@@ Line 1: / Line 1: @@
 [[Category:tutorial]]
 == video codecs and containers explained==
-Video files such as .avi .mp4 .ogv .mkv are '''container formats'''.
+Video file formats (.avi .mp4 .ogv .mkv) are containers to video and audio streams
+* Each '''video format''' allow specific audio and video codecs
-Like a .zip file which contains other files within it,
+* '''codecs''' are the way by which a audio or video stream is encoded and decoded.
 ==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.
+To be certain that your videos will play in all current browsers, you'll need to have your videos or audio encoded in the codecs above.
-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.
+There are several solutions to do this:
 ===in Miro===
@@ Line 76: / Line 30: @@
 [[File:Miro Video Converter_005.png|300px]]
 == video tag ==
@@ Line 81: / Line 38: @@
 <video controls>
    <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4"  type="video/mp4">
 </video>
 </source>
@@ Line 87: / Line 43: @@
 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>.
+A <nowiki><video></nowiki> tag encapsulating a <nowiki><source></nowiki> tag with the file content of the video
 The argument <nowiki>controls</nowiki> make sure the video players has controls.
@@ Line 97: / Line 53: @@
 <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>
@@ Line 114: / Line 69: @@
 <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">
 </video>
 </source>

Andre at 17:34, 7 November 2016

2016-11-07T17:34:13Z

← Older revision		Revision as of 17:34, 7 November 2016
Line 117:		Line 117:
	</video>		</video>
	</source>		</source>


			=notes=
			<references/>

Andre: Created page with "Category:tutorial = Video and Audio formats for web = Read more on browsers' supported formats in https://developer.mozilla.org/en-US/docs/Web/HTML/S..."

2016-11-07T17:32:36Z

Created page with "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/S..."

New page

[[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>