Difference between revisions of "Web video"

From Publication Station
 
Line 1: Line 1:
[[Category:tutorial]]
[[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 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.
'''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>


Current web browsers support:
* video format: '''.mp4''' with streams
** '''video''' encoded with '''H264 codec'''
** '''audio''' encodec with '''AAC''' (multichannel) or '''MP3''' (stereo) codecs
 




==prepare your files==
==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:
* [https://handbrake.fr/ Handbrake]
* [http://www.mirovideoconverter.com/ Miro]  


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


===in Miro===
===in Miro===
Line 76: Line 30:


[[File:Miro Video Converter_005.png|300px]]
[[File:Miro Video Converter_005.png|300px]]
===in Handbrake===
See https://www.techspot.com/article/1131-hevc-h256-enconding-playback/


== video tag ==
== video tag ==
Line 81: Line 38:
<video controls>
<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.mp4"  type="video/mp4">
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv"  type="video/ogg">
</video>
</video>
</source>
</source>
Line 87: Line 43:
This is the simplest a web video player you can get.  
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.
The argument <nowiki>controls</nowiki> make sure the video players has controls.
Line 97: Line 53:
<audio controls>
<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.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>
</audio>
</source>
</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">                                                           
<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.mp4"  type="video/mp4">
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv"  type="video/ogg">
</video>
</video>
</source>
</source>

Latest revision as of 12:09, 27 November 2018


video codecs and containers explained

Video file formats (.avi .mp4 .ogv .mkv) are containers to video and audio streams

  • Each video format allow specific audio and video codecs
  • codecs are the way by which a audio or video stream is encoded and decoded.

Current web browsers support:

  • video format: .mp4 with streams
    • video encoded with H264 codec
    • audio encodec with AAC (multichannel) or MP3 (stereo) codecs


prepare your files

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:


in Miro

  • Select the file you want to convert to .ogv and .mp4
  • Choose the Format menu:
    • For a .mp4 video Video > MP4
    • For a .ogv video Video > Ogg Theora
  • Press the large button: "Convert to ..."

Conversion will start. When it is done the new file will be saved.

Miro Video Converter 005.png

in Handbrake

See https://www.techspot.com/article/1131-hevc-h256-enconding-playback/

video tag

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

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

A <video> tag encapsulating a <source> tag with the file content of the video

The argument controls make sure the video players has controls.

audio tag

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

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

video / audio tag attributes

Besides controls the <video> has a number of other attributes.[1]

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


notes

  1. ↑ Read more on video attributes in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Web_video&oldid=7116’