background preloader

Using HTML5 audio and video - Web developer guide

Using HTML5 audio and video - Web developer guide
HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents. Embedding media in your HTML document is trivial: <video src=" controls> Your browser does not support the <code>video</code> element. </video> This example plays a sample video, with playback controls, from the Theora web site. Here is an example for embedding audio into your HTML document <audio src="/test/audio.ogg"><p>Your browser does not support the <code>audio</code> element. The src attribute can be a URL of the audio file or the path to the file on the local system. <audio src="audio.ogg" controls autoplay loop><p>Your browser does not support the <code>audio</code> element </p></audio> This code example uses attributes of the <audio> element: The preload attribute is used in the audio element for buffering large files. This plays the Ogg video file in browsers supporting the Ogg format. Using Flash Related:  robinkhatriMozilla Developers

Buzz, a Javascript HTML5 Audio library Hello Backbone.js Tutorial Shameless advertisement: Don't forget to check out Agility.js, a simpler alternative to Backbone.js. Hello Backbone is a simple Backbone.js tutorial comprised of self-explanatory "hello world" examples of increasing complexity. It was designed to provide a smoother transition from zero to the popular Todos example. Backbone.js offers a lean MVC framework for organizing your Javascript application. The tutorial starts with a minimalist View object, and progressively introduces event binding/handling, Models, and Collections. Start the tutorial Once in the tutorial, use the navigation menu in the top-right corner to view other examples. Copyright © Artur Adib [ ]

Video - MDC Summary The HTML <video> element is used to embed video content in an HTML or XHTML document. For a list of supported formats, see Media formats supported by the audio and video elements. Usage context Attributes Like all other HTML elements, this element supports the global attributes. autoplay A Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data. autobuffer A Boolean attribute; if specified, the video will automatically begin buffering even if it's not set to automatically play. Implementation note: though part of the early drafts of the HTML5 specification, the autobuffer attribute has been removed in later releases. buffered An attribute you can read to determine which time ranges of the media have been buffered. controls If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback. crossorigin anonymous src

Document Object Model (DOM) The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree. The DOM defines methods that allow access to the tree, so that they can change the document structure, style and content. Although the DOM is often accessed using JavaScript, it is not a part of the JavaScript language. An introduction to the DOM is available. DOM interfaces Obsolete DOM interfaces The Document Object Model has been highly simplified. HTML interfaces A document containing HTML is described using the HTMLDocument interface. An HTMLDocument object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the Window interface, the Style associated to it (usually CSS), the history of the browser relative to the context, History. HTML element interfaces Other interfaces Obsolete HTML interfaces SVG interfaces SVG element interfaces SVG data type interfaces Static type See also

SoundJS | A Javascript library that lets you easily work with HTML5 audio. Recent Updates Follow @CreateJS December 2013 SoundJS 0.5.2 available. November 2013 SoundJS 0.5.1 available, which addresses webaudio issues introduced in FF25 September 2013 SoundJS 0.5.0 available.HTMLAudioPlugin - fixed an issue with not removing tags from DOM when removing src from SoundJS using removeAllSounds etcDate: April 10th The Story Why we built SoundJS About SoundJS Consistant cross-browser support for audio is currently a mess in HTML5, but SoundJS works to abstract away the problems and makes adding sound to your games or rich experiences much easier. HTML5 Audio Javascript Mistakes You Must Avoid If you are new to JavaScript and you write raw JavaScript or use any framework (jQuery, Mootools, Dojo, YUI) with it, you must avoid few mistakes. Actually these are my experiences when I was learning JavaScript. Equality Operator You may know that in js, two operators are used for comparing values. Here are more examples. Some of the results are unexpected specially for those who don’t know how JavaScript evaluates == operator. Consider the first example (1 == “1″). In the second example (“true” == true) is false because if the string contain characters other than digits, convertion to number will return NaN which means Not a Number. You can check what value will be returned after conversion to number using the Number constructor. Now you maybe wondering how === operator works. Not Assigning null to Reference Types It’s common mistake that many js developers don’t assign null value to variables of reference types (object or Array) when there use is finished. Don’t Forget Keyword var

Manipulating video using canvas - MDC By combining the capabilities of the video element with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed. This tutorial, adapted from this blog post by Paul Rouget, demonstrates how to perform chroma-keying (also known as the "green screen effect") using JavaScript code. View this live example. The document content The XHTML document used to render this content is shown below. The key bits to take away from this are: This document establishes two canvas elements, with the IDs c1 and c2. The JavaScript code The JavaScript code in main.js consists of three methods. Initializing the chroma-key player The doLoad() method is called when the XHTML document initially loads. This code grabs references to the elements in the XHTML document that are of particular interest, namely the video element and the two canvas elements. The timer callback Manipulating the video frame data The resulting image looks like this: See also