HTML 5 Media Support
HTML 5 introduced support for audio and video natively in the browser (without plugins). This makes removes the need to use proprietary tools and formats (such as Flash, QuickTime, Windows Media, Real) in order to provide basic media capabilities.
Media Elements
Video:
<video width="720" height="480" src="video.mp4" controls />
Example: http://itp.nyu.edu/~sve204/js_media/video_basics.html
Reference: http://www.w3schools.com/html/html5_video.asp
Browser Support: http://caniuse.com/#feat=video
Formats/Codecs:
MPEG-4/H.264: http://caniuse.com/#feat=mpeg4
WebM/VP8: http://caniuse.com/#feat=webm
Ogg/Theora: http://caniuse.com/#feat=ogv
Tools: Miro Video Converter: http://www.mirovideoconverter.com/
Supporting Multiple Formats:
<video width="720" height="480" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Attributes: autoplay, controls, height, width, loop, muted, poster, preload, src
Example: http://itp.nyu.edu/~sve204/js_media/video_basics_multi.html
Audio:
<audio controls src="audio.mp3" />
Reference: http://www.w3schools.com/tags/tag_audio.asp
Browser Support: http://caniuse.com/#feat=audio
Formats/Codecs: MP3, Ogg Vorbis, WAV
Supporting Multiple Formats:
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Attributes: autoplay, controls, loop, preload, src
JavaScript
Of course, there are a lot of features and functionality available via JavaScript.
Overview:
http://www.w3schools.com/tags/ref_av_dom.asp
Quick Example:
<html>
<head>
<title>Video JavaScript</title>
</head>
<body>
<!-- Add an “id” to the video tag so that we can access it easily in JavaScript -->
<video width="720" height="480" controls id="thevideo">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- When this button is clicked, call the doSomething function -->
<button onClick="doSomething()">Do Something here</button>
<script type="text/javascript">
// Get Access to the Video Object
var theVideoObject = document.getElementById("thevideo");
// Alert, just to make sure it isn’t null
alert(theVideoObject);
// Called by the Do Something button
function doSomething() {
// Change the width
theVideoObject.width = theVideoObject.width/2;
if (theVideoObject.paused) {
// If the video is paused, call play
theVideoObject.play();
} else {
// Otherwise, pause it
theVideoObject.pause();
}
}
</script>
</body>
</html>
Example: http://itp.nyu.edu/~sve204/js_media/video_javascript.html
More Information:
http://www.html5rocks.com/en/features/multimedia
Popcorn.js - http://popcornjs.org/
Popcorn is a JavaScript library that offers the ability to integrate HTML/CSS with time based media.
To use it, first point to it in your page:
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
Then you can create a Popcorn object, pointing to the “id” of your time based media
var popcorn = Popcorn("#thevideo");
Following that, you can tell popcorn to do things on the page at certain points in your video. Here we are using the “cue” method: http://popcornjs.org/popcorn-docs/media-methods/#cue
popcorn.cue(5, function() {
alert("We are 5 seconds in!");
});
Many plugins have been developed to allow specific things to happen:
http://popcornjs.org/popcorn-docs/plugins/
Show an image:
http://popcornjs.org/popcorn-docs/plugins/#Image
popcorn.image({
start: 7,
end: 10,
target: "contentdiv",
src: "image.jpg"
});
Set text content in a div:
http://popcornjs.org/popcorn-docs/plugins/#Footnote
popcorn.footnote({
start: 2,
end: 6,
text: "Hi!",
target: "contentdiv"
});
Show a web page:
http://popcornjs.org/popcorn-docs/plugins/#Webpage
Show a Processing.js sketch:
http://popcornjs.org/popcorn-docs/plugins/#Processing
(Currently not working?)
Finally, we have to call the “play” method to kick things off.
popcorn.play();
Full Example: http://itp.nyu.edu/~sve204/js_media/video_popcorn.html
Popcorn Maker: https://popcorn.webmaker.org/templates/basic/
WebRTC
Demo: http://www.walking-productions.com:8000
WebRTC.io: https://github.com/webRTC/webRTC.io
Live Video + Canvas
http://itp.nyu.edu/~sve204/js_media/video_self.html