HTML5 audio and video playlists
.webm(Converters: ffmpeg, Miro (issues))
.jsonfiles must be on the same domain due to cross-domain restrictions.
[data-tunes] is the data attribute in which the JSON playlist is stored. It is designed to be placed on a container element that holds the media element and related informational elements such as credits or captions. It can contain inline JSON or the filename of a
.json file to load via AJAX. Inline JSON is more performant and more stable than loading AJAX requests.
[data-tunes-insert] makes it possible to insert values from the properties in your media object into your HTML.
Caption for the default video. The value of the "caption"property gets inserted here when the video changes.
[data-tunes-attr] makes it possible to update arbitrary HTML attributes based on the properties in your media object. It takes a JSON object that maps attribute names to the property names from the media object that should fill them.
To watch this video please updgrade your browseror download the .mp4
The format for the JSON playlist data is an array of media objects containing data about each media file. Please validate your JSON to prevent syntax errors. The media objects provide several capabilities. A simple
<video> example would look something like this:
Alternate syntax: You can achieve the same as above by setting the
src property to an array of URIs. If you mix the 2 syntaxes, the named extension props take precedence over the
src prop. In either case tunes will choose the most appropriate file based on the feature detection.
In your media objects, you can include whatever extra properties you want for use with
[data-tunes-attr]. The purpose of these attributes is to enable you to include relavent credits, captions, or links.
To play media files, your server must recognize the correct MIME types.
.htaccessincludes these rules (via H5BP)
# MIME types for audio and video filesAddType audio/mp4 m4a f4a f4bAddType audio/ogg oga oggAddType video/mp4 mp4 m4v f4v f4pAddType video/ogg ogvAddType video/webm webmAddType video/x-flv flv
Fallbacks and graceful degradation for pre-HTML5 browsers are possible through smart use of
[data-tunes-attr]. It's a vanilla diet approach and no Flash is used.
$.ajax()*needed only for AJAX playlists
$.get()*needed only for AJAX playlists
Copyright (C) 2013 by Ryan Van Etten