Video: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 75: Line 75:
</audio>
</audio>
</source>
</source>
== Complete Page ==
<source lang="html4strict">
<!DOCTYPE html>
<html>
<body>
<video controls autoplay>
    <source src="video/demo.mp4">
    <source src="video/demo.webm">
    No video support!
</video>
</body>
</html>
</source>
See at:
http://pzwart3.wdka.hro.nl/~mmurtaugh/demo.html


== Compressing media ==
== Compressing media ==
Line 83: Line 101:
* ffmpeg
* ffmpeg
* avidemux
* avidemux
== Using ffmpeg to convert mp3 to ogg/vorbis ==
ffmpeg -i input.mp3 -acodec libvorbis test.ogg
== Embedding video on this wiki ==
A "widget" is installed on this wiki to allow the embedding of HTML5 videos.
<nowiki>
{{#Widget:Video|webm=http://url.to/your.webm|mp4=http://url.to/your.mp4}}
</nowiki>


== Resources ==
== Resources ==
* [http://blog.gingertech.net/ Silvia Pfeiffer's Blog]
* [http://blog.gingertech.net/ Silvia Pfeiffer's Blog]
* http://www.archive.org/details/Prozim-Christmas863
* [http://automatist.org/poc/aaplayer/ogg.html HTML5 video player event viewer]
* http://mediaelementjs.com/

Latest revision as of 11:57, 25 September 2012

<slidy theme="aa" />

History

A brief history of online video

  • 1990s QuickTime, Windows Media, RealPlayer
  • 2002 Flash (Player 6: Spark)
  • 2005 Flash (Player 8: On2 VP6)

Culture Shift / Patent Wars

Media formats have consistently been at the intersection of legal & social battles reflective of the impact of digital media on an established music and film industry.

Seb Luetgert - "new oil": http://oil21.org/

Terminology

Terminology: Container

The container is the "box" that holds the video file. Containers organize how the audio/video data is "laid out" as a "byte stream" (thus may have an impact on how well a video can "stream" or appear in the browser when only partially downloaded). Container formats may also allow for "metadata" to be included (name-value pairs of data such as the artist name of a music track).

Examples:

  • MOV (Apple/QuickTime)
  • MP4 (MPEG)
  • WMV (Microsoft/Windows)
  • FLV (Flash Video)
  • AVI ("audio-video interleave": Microsoft)
  • MKV (Matroska, Free software, basis of WebM, Implemented by many hardware media players)
  • OGG (Free software)

Terminology: Codecs

The specific (digital) format of audio / video data. The codec (COmpresion/DECompression) is the specific algorithm used to turn audio/visual data into digital data and vice versa. As the name "compression" implies, codecs are all about preserving the most quality of the image and sound using the least data (bitrate). Most codecs are "lossy", meaning that the original data is degraded somewhat in order to make the data size small enough for viewing online. Choosing an appropriate bitrate and compressing source material is an important and potentially complex process that can be greatly helped by tools that support sensible "preset" configurations. "Lossless" codecs, such as FLAC for audio, reduce data without data loss.

Examples:

  • H.263
  • H.264
  • AIFF, WAV ("raw" uncompressed audio formats)
  • AAC (Advanced Audio Codec)
  • MP3 (MPEG-1 Audio Level 3)
  • Theora (Free, typically in OGG)
  • Vorbis (Free, in OGG & WebM)
  • VP8 (webm: On2 -- bought by Google in 2010)
  • Dirac
  • FLAC

The State of Codecs

Two camps:

  • "MPEG": Safari/iOS (Apple), Explorer (Microsoft): MP4 (H.264/AAC)
  • "Free": (Firefox, Chrome (Google), Opera): OGG (Theora/Vorbis) & WebM (VP8/Vorbis)

Only Chrome is supporting both MP4/3

Flash future for WebM/VP8 ?!

As easy as... (in principle)

<video controls autoplay>
    <source src="video.mp4">
    <source src="video.webm">
    No video support!
</video>
  • nb iPad "bug" requires mp4 comes first
<audio controls autoplay>
    <source src="audio.mp3">
    <source src="audio.ogg">
    No audio support!
</audio>

Complete Page

<!DOCTYPE html>
<html>
<body>
<video controls autoplay>
    <source src="video/demo.mp4">
    <source src="video/demo.webm">
    No video support!
</video>
</body>
</html>

See at: http://pzwart3.wdka.hro.nl/~mmurtaugh/demo.html

Compressing media

  • firefogg
  • ffmpeg2theora
  • HandBrake
  • ffmpeg
  • avidemux

Using ffmpeg to convert mp3 to ogg/vorbis

ffmpeg -i input.mp3 -acodec libvorbis test.ogg

Embedding video on this wiki

A "widget" is installed on this wiki to allow the embedding of HTML5 videos.

 {{#Widget:Video|webm=http://url.to/your.webm|mp4=http://url.to/your.mp4}}
 

Resources