Difference between revisions of "BTC640/Video"
(Fixed some typo) |
(→Video on the web) |
||
(4 intermediate revisions by the same user not shown) | |||
Line 54: | Line 54: | ||
* DVI: a specification for digital transmission of video, and also the common name for a connector. No audio. Interestingly a DVI cable also carries an analog signal for the same video. | * DVI: a specification for digital transmission of video, and also the common name for a connector. No audio. Interestingly a DVI cable also carries an analog signal for the same video. | ||
* HDMI: an interface that includes digital video, digital audio, CEC, and even ethernet. Mini HDMI and micro HDMI are also becoming popular, used on smaller devices such as smartphones. | * HDMI: an interface that includes digital video, digital audio, CEC, and even ethernet. Mini HDMI and micro HDMI are also becoming popular, used on smaller devices such as smartphones. | ||
+ | * Display port. | ||
=== RF channels === | === RF channels === | ||
Line 118: | Line 119: | ||
* Use it to convert your ports.wmv to ports.3gp using the H.263 codec. | * Use it to convert your ports.wmv to ports.3gp using the H.263 codec. | ||
* Use it to convert your ports.wmv to ports.mp4 using the H.264 codec. | * Use it to convert your ports.wmv to ports.mp4 using the H.264 codec. | ||
− | * Use it to convert your ports.wmv to ports.gif, this will be an simple animated gif. This one will obviously not have any sound. | + | * Use it to convert your ports.wmv to ports.gif, this will be an simple animated gif. This one will obviously not have any sound (and will be an animated image, not a video). |
+ | |||
+ | * Download the free Miro Video Converter and install it. | ||
+ | * Convert your video to ports.ogg | ||
+ | * Convert your video to ports.webm | ||
== Video on the web == | == Video on the web == | ||
Line 127: | Line 132: | ||
** The container (extension) and codec | ** The container (extension) and codec | ||
** The size of the file | ** The size of the file | ||
− | ** An html <video> tag with that file. | + | ** An html <video> tag with that file, except for the gif. |
** List of browsers where the video did and did not play. | ** List of browsers where the video did and did not play. | ||
* Try it in at least 3 different browsers. | * Try it in at least 3 different browsers. | ||
Line 135: | Line 140: | ||
You have to submit: | You have to submit: | ||
− | * | + | * A screenshot shopwing all the video files you created |
* The wmv with you created under 'simple editing' | * The wmv with you created under 'simple editing' | ||
* The HTML file | * The HTML file |
Latest revision as of 09:32, 16 July 2013
Contents
Lecture
Textbook chapter: 6
Since TV took off video has been one of the best ways to deliver information to consumers. Like other presentation technologies it's better for some kinds of information than others, and also like other presentation technologies there is lots to learn about it.
Because the technology is quite complex we will only get an overview of video in this course, without going into too much detail, but you need to know some basics at least.
Codecs and Containers
Video is encoded and decoded using a codec. The format is a digital representation of the data (like PNG, WAV, BMP), and the codec is a program following rules for creating and displaying it (like libpng).
Video is rarely used without audio, but the two are separate technologies that are combined into one by placing them into the same container and synchronising their playback. This is the main reason that a container is not the same as a codec.
Examples of containers:
- AVI
- MPEG
- Matroska (mkv)
- Quicktime (mov)
- 3GP
- MP4
- OGG
- Flash (flv)
Each of these containers contains video in one of a few formats, for example:
- MPEG-1
- MPEG-2
- MPEG-4
- H.263
- H.264
- Theora
as well as audio in one format or another.
The decision which container and format to use is usually dictated by the tools available, the distribution channel, and the size/quality of the result.
Channels and Interfaces
There are two big categories here: analog and digital. With video the differences between the two are similar to the differences between analog and digital audio, though unlike analog audio - analog video is lossy.
Here are the most popular channels and interfaces for video:
Analog channels
- Component video: three cables with an RCA jack each. If audio is required - a fourth cable (usually also RCA or double-RCA for stereo) is used.
- VGA cable/connector: the most common video-out connector in a computer. This is also component video. Though it usually comes out of a computer - it does not carry a digital signal.
- S-Video: one cable with a DIN connector. Only two channels instead of 3 as with component thus lower quality. The cable does not carry audio, usually the separate audio cable has TRS connectors.
- Composite: a single cable with an RCA jack. All the information goes over this single channel, which makes it the lowest quality of the three. If audio is required - a fourth cable (usually also RCA or double-RCA for stereo) is used.
Digital channels
- DVI: a specification for digital transmission of video, and also the common name for a connector. No audio. Interestingly a DVI cable also carries an analog signal for the same video.
- HDMI: an interface that includes digital video, digital audio, CEC, and even ethernet. Mini HDMI and micro HDMI are also becoming popular, used on smaller devices such as smartphones.
- Display port.
RF channels
- Coaxial cable (like cable TV) actually transmits radio signals over a wire, which is why it's heavily shielded. It can be used for both analog (like traditional cable TV) and digital (like high-speed internet) signals, often at the same time.
- Broadcast TV uses some of the available RF spectrum to broadcast video signals as far as they will go. This used to be completely analog transmissions, but more recently digital transmissions started beeing used. This is a heavily regulated distribution channel, you cannot simply set up your own.
Video on the Web
A few years ago it became possible to put videos on the web by using a Flash container, which worked great because almost everyone had a recent version of the flash plugin installed.
More recently with development of HTML5 it became possible to embed non-flash videos on webpages using the <video> tag. Unfortunately that specification does not mandate use of a particular container and codec, so support for the tag varies with different browsers.
Hardware for the lab
If you have a digital camera or if your phone can shoot video - bring it to the lab next time (don't forget the cable).
Links
- http://en.wikipedia.org/wiki/RCA_connector
- http://en.wikipedia.org/wiki/TRS_connector
- http://en.wikipedia.org/wiki/Component_video
- http://en.wikipedia.org/wiki/S-Video
- http://en.wikipedia.org/wiki/Composite_video
- http://en.wikipedia.org/wiki/VGA_connector
- http://en.wikipedia.org/wiki/Digital_Visual_Interface
- http://en.wikipedia.org/wiki/HDMI
- http://en.wikipedia.org/wiki/Uncompressed_video
- http://en.wikipedia.org/wiki/Coaxial_cable
- http://en.wikipedia.org/wiki/Tv_antenna
- http://en.wikipedia.org/wiki/Broadcast_television
- http://en.wikipedia.org/wiki/Digital_terrestrial_television
- http://en.wikipedia.org/wiki/High-definition_television
- http://en.wikipedia.org/wiki/Comparison_of_container_formats
- http://en.wikipedia.org/wiki/Container_format_%28digital%29
- http://en.wikipedia.org/wiki/Flash_video
- http://en.wikipedia.org/wiki/HTML5_video
Lab
This is a marked lab. Please submit it using Moodle (Lab5).
Shoot a video
- Have a look at the video ports available on your laptop, or your desktop, or the lab machines. Note that Apple likes to have their own versions of connectors. Make a list of the ports, what types of ports they are.
- If you cellphone/camera can shoot video - make a short one, probably 30 seconds, just showing the video ports on your machine. If you don't have one - you can borrow mine.
Simple editing
This is very basic movie editing, and professionals will laugh if you say you edited a movie with this tool, but it`s a good set of basic skills to have.
- Use the windows live movie maker to create a new project.
- Add the video you shot to your project.
- Save the project, note that the project file is very small and does not include the video file.
- Add a title screen with your name, date, and the machine you`ve shot the video of.
- Add a transition effect between the title screen and the video.
- Add some subtitles, naming the ports that are beeing displayed in the center of the video at any given time.
- Save the movie as "ports.wmv" using any of the options. Try to find a way to keep the file small, it has to be under 10MB for Moodle to accept it.
Format coversions
- Download the free Prism video file converter from NCH sotware and install it.
- Set the video to shrink to a smaller size (640x480 or 640x360 depending on whether your video was widescreen to begin with).
- Use it to convert your ports.wmv to ports.3gp using the H.263 codec.
- Use it to convert your ports.wmv to ports.mp4 using the H.264 codec.
- Use it to convert your ports.wmv to ports.gif, this will be an simple animated gif. This one will obviously not have any sound (and will be an animated image, not a video).
- Download the free Miro Video Converter and install it.
- Convert your video to ports.ogg
- Convert your video to ports.webm
Video on the web
This part is very similar to the audio part you`ve done last week but now you use video instead.
- Make an html page with a table, and in each file have cells for:
- The container (extension) and codec
- The size of the file
- An html <video> tag with that file, except for the gif.
- List of browsers where the video did and did not play.
- Try it in at least 3 different browsers.
Submit
You have to submit:
- A screenshot shopwing all the video files you created
- The wmv with you created under 'simple editing'
- The HTML file