Web video

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:

• Handbrake
• Miro

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.

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.

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