Web video: Difference between revisions
From Publication Station
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
[[Category:tutorial]] | [[Category:tutorial]] | ||
== video codecs and containers explained== | == video codecs and containers explained== | ||
Video | 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== | ==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 | There are several solutions to do this: | ||
* [https://handbrake.fr/ Handbrake] | |||
* [http://www.mirovideoconverter.com/ Miro] | |||
===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"> | ||
</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 | 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"> | ||
</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"> | ||
</video> | </video> | ||
</source> | </source> | ||
Latest revision as of 12:09, 27 November 2018
video codecs and containers explained
[edit]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
[edit]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
[edit]- 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
- For a .mp4 video Video >
- Press the large button: "Convert to ..."
Conversion will start. When it is done the new file will be saved.
in Handbrake
[edit]See https://www.techspot.com/article/1131-hevc-h256-enconding-playback/
video tag
[edit]<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
[edit]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
[edit]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
[edit]- ↑ Read more on video attributes in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
