hmedia: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m (→‎Scope: spelling mistake :()
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(112 intermediate revisions by 9 users not shown)
Line 1: Line 1:
<h1>hMedia</h1>
{{DISPLAYTITLE:hMedia}}
{{Template:DraftSpecification}}
{{TOC-right}}


'''hMedia''' ("Hypertext Media") is a simple and open format for publishing Images Video and Audio. hMedia may be embedded in HTML or XHTML, Atom, RSS, and arbitrary XML. hMedia is one of several open [[microformats|microformat]] standards.
'''[[hmedia|hMedia]]''' is a simple and open format for publishing Images Video and Audio. hMedia may be embedded in HTML or XHTML, Atom, RSS, and arbitrary XML. hMedia is one of several open [[microformats|microformat]] standards.
 
{{TOC-right}}


== Proposal 2008-11-10 ==
== hMedia Draft Specification 2009-01-04 ==


=== Editor/Author ===
=== Editor/Author ===


* [[User:WebOrganics| Martin McEvoy]]
* <span class="author">[[User:WebOrganics| Martin McEvoy]]</span>


=== Contributors ===
=== Contributors ===
Line 16: Line 16:


* [http://tantek.com/log/ Tantek Çelik]
* [http://tantek.com/log/ Tantek Çelik]
* [[User:Kevin_Marks|Kevin Marks]]
* [http://napsterization.org/stories/ Mary Hodder]
* [http://napsterization.org/stories/ Mary Hodder]
* [[User:RodBegbie | Rod Begbie]]
* [[User:RodBegbie | Rod Begbie]]
Line 21: Line 22:
* [[User:ChrisMessina | ChrisMessina]]
* [[User:ChrisMessina | ChrisMessina]]
* [http://onlisareinsradar.com/ Lisa Rein]
* [http://onlisareinsradar.com/ Lisa Rein]
* [[User:ChrisNewell | Chris Newell]]
* [[User:ManuSporny | Manu Sporny]]
* [[User:ManuSporny | Manu Sporny]]
* [[User:MikeJohnson | Mike Johnson]]
* [[User:MikeJohnson | Mike Johnson]]
* [[User:WebOrganics| Martin McEvoy]]
* [[User:WebOrganics| Martin McEvoy]]


=== Inspiration and Acknowledgments ===
=== Inspiration and Acknowledgements ===


Many thanks to [http://tantek.com/log/ Tantek Çelik], [http://napsterization.org/stories/ Mary Hodder], and [[User:ManuSporny | Manu Sporny]] for their continual contributions to  Media and Audio Microformats in general.
Many thanks to [http://tantek.com/log/ Tantek Çelik], [[User:Kevin_Marks|Kevin Marks]], [http://napsterization.org/stories/ Mary Hodder], [[User:ChrisNewell|Chris Newell]], [[User:ChrisMessina | Chris Messina]], [http://changelog.ca/ Charles Iliya Krempeaux] and [http://blog.digitalbazaar.com Manu Sporny] for their valuable contributions to  Media Info and Media Metadata in general.


=== Patents ===
=== Patents ===
Line 39: Line 41:
== Scope ==
== Scope ==


Images, Video and Audio regularly share several common fields. hMedia has been based on a minimal common subset based on the analysis of 225 media related web pages. All fields discovered during analysis occur more than 70% of the time or more across each of the target domains listed on the [[media-info-examples|Media Info Examples]] page. hMedia was developed using the [[process|Microformats Process]] and [[principles|Design Principles]].
Images, Video and Audio regularly share several common fields. hMedia has been based on a minimal common subset based on the analysis of 225 media related web pages. All fields discovered during analysis occur more than 80% of the time or more across each of the target domains listed on the [[media-info-examples|Media Info Examples]] page. hMedia was developed using the [[process|Microformats Process]] and [[principles|Design Principles]].


== Introduction ==
== Introduction ==
Line 45: Line 47:
<cite>[http://napsterization.org/stories/ Mary Hodder] - 22 Jan 2006</cite>  
<cite>[http://napsterization.org/stories/ Mary Hodder] - 22 Jan 2006</cite>  
<blockquote>There are many ways to publish media by users, but as people try to access those remixing and aggregation become more and more prevalent, having consistent records becomes important. Audio, photos and video show up in each other's publishing spaces, even though they are unique media objects. A photo might be next to the link for an audio piece, as it's visual artwork. A video can be comprised of quotes of other videos, photos and audio. Still photos can be made from videos. All three types of objects can contain subsets of media that is tagged and described.</blockquote>
<blockquote>There are many ways to publish media by users, but as people try to access those remixing and aggregation become more and more prevalent, having consistent records becomes important. Audio, photos and video show up in each other's publishing spaces, even though they are unique media objects. A photo might be next to the link for an audio piece, as it's visual artwork. A video can be comprised of quotes of other videos, photos and audio. Still photos can be made from videos. All three types of objects can contain subsets of media that is tagged and described.</blockquote>
{{rfc-2119-intro}}


== Format ==
== Format ==
Line 52: Line 52:
=== Abstract ===
=== Abstract ===


hMedia is a single media publishing format that relates to Images, Video and Audio in a meaningful, organized and structured way. Wherever possible field names have been chosen from those defined by the hCard standard.  
hMedia is a single media publishing format that relates to Images, Video and Audio with an Emphasis on Practical, Simple, and Minimal. Wherever possible field names have been chosen from those defined by the [[hcard|hCard]] standard.


=== Schema ===
=== Schema ===


* hMedia '''<code>hmedia</code>'''
See [[hmedia#Key|key]].
** '''fn''' {{required}}. Text.
 
** '''contributor'''. {{optional}}. using text or [[hcard]].
* hMedia '''hmedia'''{1}.
** '''description'''. {{optional}}. text.
** '''fn'''. {1}.
** '''photo[1]'''. Using the HTML IMG element.
** ''contributor'' *. Using text or [[hcard]].
** '''video[1]'''. Using the HTML elemens DIV, SPAN or OBJECT.
** photo ?. Using the HTML IMG element.
** '''enclosure[1]'''.  A <abbr title="Uniform Resource Identifier">URI</abbr> using the [[rel-design-pattern]].
** player ?. Using use any appropriate html element such as OBJECT.
** '''published'''. {{optional}}. using [[datetime-design-pattern]].
** ''enclosure'' *. A <abbr title="Uniform Resource Locator">URL</abbr> using the [[rel-design-pattern]]
** '''comment'''. {{optional}}. using [[hcard]]
** '''alternate'''. {{optional}}. A <abbr title="Uniform Resource Identifier">URI</abbr> using the [[rel-design-pattern]].
** '''category'''. {{optional}}. Text and/or [[rel-tag]]
** '''item''' {{optional}}. Using multiple properties from [[hmedia]].


'''[1]''' hMedia {{must}} contain at least one.
{{cheatsheet-key}}


=== Schema Definition ===
=== Schema Definition ===
{{rfc-2119-intro}}


==== hmedia ====
==== hmedia ====


hMedia is used to describe semantic information associated with Images, Videos and Audio.
hMedia is used to describe information associated with Images, Videos and Audio.


====fn====  
====fn====  
The name of a media. Reused from [[hcard]]
The name of a media.


* The element is identified by the class name <code>fn</code>.
* The element is identified by the class name <code>fn</code>.
* hMedia {{must}} have at least <code>fn</code>.
* hMedia {{must}} include one <code>fn</code> element.


==== contributor ====
==== contributor ====


A Contributor is any person or organization that takes part in the creation or distribution of the Media. Reused from [[haudio]]
A Contributor is any person or organization that takes part in the creation or distribution of the Media


* The element is identified by the class name <code>contributor</code>.
* The element is identified by the class name <code>contributor</code>.
* hMedia {{may}} include one or more contributors.
* hMedia {{may}} include one or more contributors.
* The contents of the element {{should}} include a valid [[hcard|hCard]].
* The contents of the element {{may}} include a valid [[hcard|hCard]].
 
==== description ====
 
A full-text description of the Media. Reused from [[hreview]]
 
* The element is identified by the class name <code>description</code>.
* Multiple elements of class <code>description</code> {{should}} be ordered by default document order.


==== photo ====
==== photo ====


An embedded Image or Photograph of the Media. Reused from [[hcard]]
An embedded Image or Photograph of the Media


* The element is identified by the class name <code>photo</code>.
* The element is identified by the class name <code>photo</code>.
* hMedia {{may}} include one or more <code>photo</code>'s.
* hMedia {{may}} include one <code>photo</code> element.
* The element {{should}} use an &lt;img&gt; element.
* The element {{should}} use an &lt;img&gt; element.
* The &lt;img&gt; element attributes <code>height</code> and <code>width</code> {{may}} be used to determine the dimensions of a <code>photo</code>
* The &lt;img&gt; element attributes <code>height</code> and <code>width</code> {{may}} be used to determine the dimensions of a <code>photo</code>


==== video ====
==== player ====


The contents are an embedded video or movie of the Media such as a Flash Movie.
The contents are an embedded video or movie of the Media such as a Flash Movie.


* The element is identified by the class name <code>video</code>.
* The element is identified by the class name <code>player</code>.
* hMedia {{may}} include one or more <code>video</code>'s.
* hMedia {{may}} include one <code>player</code> element.
* The element {{should}} use a &lt;div&gt;, &lt;span&gt; or &lt;object&gt; element.
* The element {{may}} use any appropriate html element such as &lt;object&gt;.
* The &lt;object&gt; element attributes <code>height</code> and <code>width</code> {{may}} be used to determine the dimensions of a <code>player</code>


==== enclosure ====
==== enclosure ====


Indicates that the referred url is a download of the Media. Using [[rel-enclosure]].
Indicates that the referred <abbr title="uniform resource locator">url</abbr> is a download of the Media.


* The element is identified by a <abbr title="Uniform Resource Identifier">URI</abbr> using the [[rel-design-pattern]], the rel attribute {{should}} contain the value of <code>enclosure</code>.
* The element is identified by a <abbr title="Uniform Resource Locator">URL</abbr> using the [[rel-design-pattern]], the rel attribute {{should}} contain the value of <code>enclosure</code>..
* hMedia {{may}} include one or more <code>enclosure</code>'s.
* hMedia {{may}} include one or more <code>enclosure</code>'s.
* The type of the file {{should}} be specified by using the <code>type</code> specifier for a <abbr title="Uniform Resource Identifier">URI</abbr>.
* The media type of the enclosure {{should}} be specified by using a <code>type</code> specifier for a <abbr title="uniform resource locator">url</abbr>,  the contents {{may}} be any [http://www.iana.org/assignments/media-types/ iana assigned media type] .
 
* Multiple enclosure elements {{should}} be used for different representations of the same Audio, video or Image.
==== published ====
 
Represents the date that the Media was made available to the public. Reused from [[hatom]]
 
* The element is identified by the class name <code>published</code>.
* hMedia {{may}} include one or more <code>published</code> elements.
* The contents of the element {{should}} use the [[datetime-design-pattern]].
 
==== comment ====
 
A user or visitor submitted comment on the media, contents {{must}} contain a valid [[hcard]]
 
* The element is identified by the class name <code>comment</code>.
* hMedia {{may}} have one or more <code>comment</code> elements.
* The contents of a <code>comment</code> {{must}} contain a valid [[hcard]]
** hCard properties
*** '''fn''' The name of the person who authored a comment
*** '''url''' A <abbr title="Uniform Resource Identifier">URI</abbr> of the person who authored a comment.
*** '''note''' To specify a comment that is associated with the person who authored a comment. Contents can be text or Valid html mark up
*** '''rev''' Datetime of the revision of the entire coment. This element {{should}} use the [[datetime-design-pattern]].
*** '''uid''' A unique <abbr title="Uniform Resource Identifier">URI</abbr> identifier of a comment, typically a &quot;permalink&quot; to a comment
 
See also [[media-info-brainstorming#Media_Comments|Media Comments]]
 
==== alternate ====
 
Designates an alternate version for the document or Media typically an RSS, Atom or XML feed.
 
* The element is identified by a <abbr title="Uniform Resource Identifier">URI</abbr> using the [[rel-design-pattern]], the rel attribute {{should}} contain the value of <code>alternate</code>.
* hMedia {{may}} include one or more <code>alternate</code> <abbr title="Uniform Resource Identifier">URI</abbr>s.
* The type of the document {{should}} be specified by using the <code>type</code> specifier for a <abbr title="Uniform Resource Identifier">URI</abbr>.


==== category ====
An author-designated "category" or a keyword/subject of the Media. Reused from [[hcalendar]].
* The element is identified by the class name <code>category</code>.
* hMedia {{may}} include one or more <code>category</code> elements.
* <code>category</code> keywords {{may}} also be defined using [[rel-tag]]
==== item ====
A container element for another Media item. Reused from [[haudio]]
* The element is identified by the class name <code>item</code>.
* hMedia {{may}} have one or more items.
* <code>item</code> {{must}} be processed opaquely.
* The contents of <code>item</code> {{must}} be marked up using properties in hMedia.


=== XMDP Profile ===
=== XMDP Profile ===
Line 197: Line 142:
   <dd>
   <dd>
     A Contributor is any person or organization that takes part in the creation or distribution of the Media
     A Contributor is any person or organization that takes part in the creation or distribution of the Media
  </dd>
  <dt>description</dt>
  <dd>
    A full-text description of the Media.
   </dd>
   </dd>
   <dt>photo</dt>
   <dt>photo</dt>
Line 206: Line 147:
     An embedded Image or Photograph of the Media.
     An embedded Image or Photograph of the Media.
   </dd>
   </dd>
   <dt>video</dt>
   <dt>player</dt>
   <dd>
   <dd>
     An embedded video or movie of the Media.
     An embedded video or movie of the Media.
   </dd>
   </dd>
  </dl>
</dd>
<dt>rel</dt>
<dd>
  <dl>
   <dt>enclosure</dt>
   <dt>enclosure</dt>
   <dd>
   <dd>
     Indicates that the referred url is a download of the Media.
     Indicates that the referred url is a download of the Media.
  </dd>
  <dt>published</dt>
  <dd>
    Represents the date that the Media was made available to the public.
  </dd>
  <dt>comment</dt>
  <dd>
    A user or visitor submitted comment on the media.
  </dd>
  <dt>alternate</dt>
  <dd>
    Designates an alternate version for the document or Media typically an RSS, Atom or XML feed.
  </dd>
  <dt>category</dt>
  <dd>
    An author-designated "category" or a keyword or subject of the Media.
  </dd>
  <dt>category</dt>
  <dd>
    The genre or style used to classify the audio recording.
  </dd>
  <dt>item</dt>
  <dd>
    A container element for another Media item.
   </dd>
   </dd>
   </dl>
   </dl>
Line 242: Line 164:
</dl>
</dl>
</pre>
</pre>
Note (informative). See also an [http://purl.org/microformat/hmedia/ RDF Schema for the hMedia vocabulary].
== Modularity ==
Although media items are sometimes presented on their own they are often found in data structures that are supported by existing microformats. It should therefore be possible to use the hMedia microformat as a child (or in some cases a parent) of these microformats.
=== Media Distribution and Syndication ===
* [[hatom|hAtom]]
Podcast and <abbr title="Video Podcast">Vidcast</abbr> feeds reference a sequence of media items. hMedia can therefore be used as a child element of hAtom.
Please see: [[hmedia#hAtom_and_hMedia|hAtom+hMedia example]].
=== Media Events ===
* [[hcalendar|hCalendar]]
hMedia may used to describe a continuous media stream for example a TV channel. An event or a schedule of events on the channel can be signaled using [[hcalendar#Root_Class_Name|vevent]] as child elements. A combination of hMedia and hCalendar may provide what is necessary to capture a specific event, the media stream information and the timing information.
Please see: [[hmedia#hCalendar_and_hMedia|hCalendar and hMedia]].
=== Media Reviews ===
* [[hreview|hReview]]
A Review about Audio, Video or Images often occurs in media publishing, hMedia reviews can often be published using hReview, capturing the reviewer, the reviewed item, a rating, a description, and the Date of a media review. hMedia may therefore be published as a child element of a [[hreview#Schema|hReview item]]
Please see: [[hmedia#hReview_and_hMedia|hReview and hMedia]].


== Examples ==
== Examples ==
Using Real world Examples found on the [[media-info-examples]] page


=== Images ===
=== Images ===
<pre>
<div class="hmedia">
  <a rel="enclosure" type="image/jpeg" href="http://www.treeswing.net/index.php?showimage=355">
    <img class="photo" alt="Saturday Nights alright for fighting, by treeswing"
    src="http://cache1.photoblogs.org/thumbnail/?hash=9bece0678c5610bd4b631d9037286df7&amp;size=450"/>
  </a>
    <span class="fn">Saturday Night's Alright For Fighting</span>,
    <em>by <span class="contributor vcard">
      <a class="url fn" href="http://www.treeswing.net/">Treeswing</a>
      (<a class="url" href="http://www.photoblogs.org/profile/treeswing.net/">profile</a>)
    </span></em>
</div>
</pre>


=== Video ===
=== Video ===
<pre>
<div class="hmedia">
<span class="fn">Introduction to the Open Media Web</span>
<object class="player" type="application/x-shockwave-flash" data="http://www.viddler.com/player/1d6265f3/">
  <param name="movie" value="http://www.viddler.com/player/1d6265f3/"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="allowFullScreen" value="true"/>
</object>
<ul>
<li><a rel="enclosure" type="video/mp4" title="Download the original source file for this movie"
    href="/explore/factoryjoe/videos/2.m4v">Original</a></li>
</ul>
</div>
</pre>


=== Audio ===
=== Audio ===
<pre>
<span class="hmedia">
<a rel="enclosure" type="audio/mpeg" href="http://homepage.mac.com/mr.gilbert/.Music/earle_waydownhole.mp3">
    <span class="contributor vcard">
      <span class="fn">Steve Earle</span>
    </span> -
    <span class="fn">"Way Down in the Hole" (Tom Waits cover)</span>
</a>
</span>
</pre>


=== Combined ===
=== Combined ===
==== hAtom and hMedia ====
<pre><div id="example" class="hentry hmedia">
<h2 class="entry-title"><a class="fn" href="#example" rel="bookmark">Introduction to the Open Media Web</a></h2>
<p>by <cite class="author vcard"><span class="fn">Author</span></cite> on:
<abbr class="updated" title="2008-12-14T11:08:00+01:00">14th Dec, 2008</abbr></p>
<div class="entry-content"><p>The introductory video describing the Open Media Web project and where it's -- roughly -- going!</p></div>
<object class="player" width="545" height="451" type="application/x-shockwave-flash" data="http://www.viddler.com/player/1d6265f3/">
  <param name="movie" value="http://www.viddler.com/player/1d6265f3/"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="allowFullScreen" value="true"/>
</object>
<p>Download: <a rel="enclosure" type="video/mp4;length=18454938" href="http://www.viddler.com/explore/factoryjoe/videos/2.m4v">
  Original</a>
</p>
</div></pre>
==== hCalendar and hMedia ====
<pre><div class="hmedia">
<div id="bip-play-emp">
<object class="player" height="395" width="640"
  data="http://www.bbc.co.uk/emp/9player.swf?revision=7276&amp;embedPageUrl=
  http://www.bbc.co.uk/iplayer/episode/b00gd1mr/Doctor_Who_The_Next_Doctor/#anchor-info-dialog&amp;domId=bip-play-emp
  &amp;config=http://www.bbc.co.uk/emp/iplayer/config.xml
  &amp;playlist=http://www.bbc.co.uk/iplayer/playlist/b00gd1mr
  &amp;guidance=unset"
  name="bbc_emp_embed_bip-play-emp"
  id="bbc_emp_embed_bip-play-emp"
  type="application/x-shockwave-flash">
  <param name="movie" value="http://www.bbc.co.uk/emp/9player.swf?revision=7276&amp;embedPageUrl=
  http://www.bbc.co.uk/iplayer/episode/b00gd1mr/Doctor_Who_The_Next_Doctor/#anchor-info-dialog
  &amp;domId=bip-play-emp&amp;config=http://www.bbc.co.uk/emp/iplayer/config.xml
  &amp;playlist=http://www.bbc.co.uk/iplayer/playlist/b00gd1mr
  &amp;guidance=unset"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="allowFullScreen" value="true"/>
  <param name="wmode" value="default"/>
  <param name="quality" value="high"/>
</object>
</div>
<div class="vevent">
  <span class="summary">
  <a class="url fn" href="http://www.bbc.co.uk/iplayer/episode/b00gd1mr/Doctor_Who_The_Next_Doctor">
  Doctor Who: The Next Doctor
  </a>
  </span>,
  Broadcast on: <span class="location">BBC One</span>, 
  <abbr class="dtstart" title="2008-12-25T18:10:00+01:00">6:00pm Thursday 25th December</abbr>,
  Duration:
  <abbr class="duration" title="PT60M">60</abbr> minutes,
  Available until:
  <abbr class="dtend" title="2009-01-08T15:49:00+01:00">3:49pm Thursday 8th January</abbr>
</div>
</div></pre>
==== hReview and hMedia ====
<pre><div class="hreview">
Reviewed by: <span class="reviewer vcard">
  <span class="fn">anonymous</span>,
</span>
  On: <abbr class="dtreviewed" title="2009-01-03">January 3rd, 2009</abbr>.
<div class="item hmedia">
    <p><a class="url fn" rel="enclosure" href="http://mediaweb.musicradio.com/mp3/Mis-takes.mp3" type="audio/mpeg">Mis-takes</a>
      by: <span class="contributor vcard">
          <span class="fn">The Charlatans</span>
    </span></p>
</div>
<div>Rating: <abbr class="rating" title="4">****</abbr> out of 5 stars</div>
  <div class="description">
    <p>This is a great track from The Charlatans latest album You Cross My Path, well worth a listen.</p>
  </div>
</div></pre>
==Examples in the wild==
This section is '''informative'''.
The following sites have implemented [[hMedia]], and thus are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing etc. If your site is marked up with hMedia, feel free to add it to the '''top''' of this list. Once the list grows too big, we'll make a separate wiki page like [[hmedia-examples-in-wild]].
* [http://doola.li/ Doolali] Video pages are marked-up using hmedia, together with geo and hcard mark-up. e.g. [http://doola.li/video/4d2328b4bac7b0a4770f0000]
* [http://www.norfolkblackhistorymonth.org.uk/events/2009/film.html Norfolk Black Film Festival] marks up movie information with hMedia.  Example: the movie [http://www.norfolkblackhistorymonth.org.uk/events/2009/blacula.html Blacula].
* [http://rhizohm.net/music/ Rhizohm: some experiments / compositions] - music
* [http://thunderkick.us/index_hMedia.html Thunderkick] - photos
* The [http://weborganics.co.uk/hCast/ Hypermedia Podcast] uses [[hmedia|hMedia]] + [[hatom|hAtom]] to generate a [https://web.archive.org/web/20060719035010/http://search.yahoo.com/mrss MediaRSS] feed ([[hmedia#hAtom_and_hMedia|as demonstrated above]]) with the Transformr web-service hMedia implementation (documented below)
* [http://www.troya-garden.co.il/%D7%9E%D7%A8%D7%9B%D7%96/%D7%92%D7%A0%D7%99-%D7%90%D7%99%D7%A8%D7%95%D7%A2%D7%99%D7%9D-%D7%91%D7%AA%D7%9C-%D7%90%D7%91%D7%99%D7%91 Troya Garden in Israel] uses [[hmedia|hMedia]] to specify a photo within the page.
* [http://www.kalayaffa.co.il/%D7%A7%D7%98%D7%9C%D7%95%D7%92-2013 Kala Yaffa 2013 wedding dresses catalog] defining images with [[hmedia|hMedia]] in each catalog gallery within the website.
* ...
== Implementations ==
This section is '''informative'''.
The following implementations have been developed which either generate or parse [[hMedia]] content. If you have an hMedia implementation, feel free to add it to the '''top''' of this list. Once the list grows too big, we'll make a separate wiki page like [[hmedia-implementations]].
* [[Oomph]] supports parsing hMedia on pages and displaying a friendly media player interface to easily browse music, movies, and pictures on the page.
* [http://microform.at Microformat Transformr] parses [[hmedia|hMedia]] + [[hatom|hAtom]] and produces a [https://web.archive.org/web/20060719035010/http://search.yahoo.com/mrss MediaRSS] Podcast/Vidcast
* [[Google]] is parsing hMedia (since at least 2013-03-17, perhaps earlier) and displaying it in their webmaster tools dashboard, e.g.:
** [http://i.imgur.com/jZlxUwn.png screenshot by iSRAELi showing 4 hMedia items]
* ...
== Articles ==
This section is '''informative'''.
The following articles have been written which discuss [[hMedia]]. If you have an hMedia article or blog post, feel free to add it to the '''top''' of this list using [[hAtom]] markup. Once the list grows too big, we'll make a separate wiki page like [[hmedia-articles]].
* 2009-08-11 The [http://visitmix.com/Opinions/I-3-hMedia I &lt;3 hMedia] article by <span class="vcard"><span class="fn">Tim Aidlin</span></span> on Mix Online discusses viewing two examples with hMedia with [[oomph|Oomph]], music on [http://rhizohm.net/music Rhizohm] and photos on [http://thunderkick.us/index_hMedia.html Thunderkick].


== History ==
== History ==
* Dougal Campbell first talks about [http://microformats.org/discuss/mail/microformats-discuss/2005-July/000229.html microformats for various types of media?] on Jul 13th 2005
* Thu Sep 1st 2005, a discussion about a Playlist Microformat by Lucas Gonze, [http://microformats.org/discuss/mail/microformats-discuss/2005-September/000835.html hPlaylist]
* Tantek Çelik starts Initial exploration about a [http://microformats.org/discuss/mail/microformats-discuss/2005-September/000843.html media-info microformat] on Sep 3rd 2005
* Joshua Kinberg discusses a [http://microformats.org/discuss/mail/microformats-discuss/2005-September/000992.html media/enclosure microformat] on Sep 20th 2005
* On November 2nd 2005 Chris Messina discusses [http://microformats.org/discuss/mail/microformats-discuss/2005-November/001833.html a microformat for audio track metadata].
* On December 6th 2005 Charles Iliya Krempeaux discusses a [http://microformats.org/discuss/mail/microformats-discuss/2005-December/002292.html TV show microformat].
* On Jan 1st 2006 Tantek Çelik calls for a simple media microformat which describes the 80/20 of information about a particular piece of media and nothing more. see: [http://microformats.org/discuss/mail/microformats-discuss/2006-January/002551.html]
* March 24th 2006 Rod Begbie [http://microformats.org/discuss/mail/microformats-discuss/2006-March/003383.html Proposed a Music microformat].
* Enric discusses a [http://microformats.org/discuss/mail/microformats-discuss/2006-June/004419.html media file example of hAtom] on Jun 13th 2006
* Steve Williams (Digg) discusses [http://microformats.org/discuss/mail/microformats-discuss/2006-August/005139.html Media Metadata, Specifically Video Thumbnails] on Aug 16th 2006
* First [http://microformats.org/discuss/mail/microformats-discuss/2007-February/008626.html hMedia microformat] Propsal by Chris Newell on Feb 8th 2007
* More interest in a [http://microformats.org/discuss/mail/microformats-discuss/2007-February/008848.html music/media-info microformat] by Marian Steinbach on Feb 26th 2007 and later on [http://microformats.org/discuss/mail/microformats-new/2007-March/000028.html Microformats New]
* Martin McEvoy Renews interest in a [http://microformats.org/discuss/mail/microformats-new/2008-November/001861.html Media Microformat] on Nov 9th 2008
* hMedia 0.1 Draft Specification 2009-01-04


== References ==
== References ==
Line 261: Line 386:
* [[hcard]]
* [[hcard]]
* [[rel-design-pattern]]
* [[rel-design-pattern]]
* [[datetime-design-pattern]]
* [[rel-enclosure]]
* [[rel-enclosure]]
* [[rel-tag]]


=== Informative References ===
=== Informative References ===
Line 270: Line 393:
* [http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.3 HTML4 Object element]
* [http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.3 HTML4 Object element]
* [http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel HTML4 rel Definition]
* [http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel HTML4 rel Definition]
* [http://www.alistapart.com/articles/byebyeembed/ Article on why you should not use embed] from A List Apart.


== Similar Work ==
== Similar Work ==
Line 282: Line 406:
=== Brainstorming ===
=== Brainstorming ===


See: [[media-info-brainstorming]]  
Do you want to help develop the next version of [[hmedia|hMedia]]? Please add your thoughts and insight on the [[hmedia-brainstorming]] page.


=== Discussions ===
=== Discussions ===
Line 290: Line 414:
=== Issues ===
=== Issues ===


See: [[media-info-issues]]
Please see: [[hmedia-issues]]


==Related pages==
{{Template:hmedia-related-pages}}


* [[media-info-examples]]
[[Category:Draft Specifications]]
* [[media-info-formats]]
* [[media-info-brainstorming]]

Latest revision as of 16:27, 18 July 2020

This document represents a draft microformat specification. Although drafts are somewhat mature in the development process, the stability of this document cannot be guaranteed, and implementers should be prepared to keep abreast of future developments and changes. Watch this wiki page, or follow discussions on the #microformats IRC channel to stay up-to-date.

hMedia is a simple and open format for publishing Images Video and Audio. hMedia may be embedded in HTML or XHTML, Atom, RSS, and arbitrary XML. hMedia is one of several open microformat standards.

hMedia Draft Specification 2009-01-04

Editor/Author

Contributors

In historical order of contribution

Inspiration and Acknowledgements

Many thanks to Tantek Çelik, Kevin Marks, Mary Hodder, Chris Newell, Chris Messina, Charles Iliya Krempeaux and Manu Sporny for their valuable contributions to Media Info and Media Metadata in general.

Patents

This specification is subject to a royalty free patent policy, e.g. per the W3C Patent Policy, and IETF RFC3667 & RFC3668.

Semantic XHTML Design Principles

Note: the Semantic XHTML Design Principles were written primarily within the context of developing hCard and hCalendar, thus it may be easier to understand these principles in the context of the hCard design methodology (i.e. read that first). Tantek

XHTML is built on XML, and thus XHTML based formats can be used not only for convenient display presentation, but also for general purpose data exchange. In many ways, XHTML based formats exemplify the best of both HTML and XML worlds. However, when building XHTML based formats, it helps to have a guiding set of principles.

  1. Reuse the schema (names, objects, properties, values, types, hierarchies, constraints) as much as possible from pre-existing, established, well-supported standards by reference. Avoid restating constraints expressed in the source standard. Informative mentions are ok.
    1. For types with multiple components, use nested elements with class names equivalent to the names of the components.
    2. Plural components are made singular, and thus multiple nested elements are used to represent multiple text values that are comma-delimited.
  2. Use the most accurately precise semantic XHTML building block for each object etc.
  3. Otherwise use a generic structural element (e.g. <span> or <div>), or the appropriate contextual element (e.g. an <li> inside a <ul> or <ol>).
  4. Use class names based on names from the original schema, unless the semantic XHTML building block precisely represents that part of the original schema. If names in the source schema are case-insensitive, then use an all lowercase equivalent. Components names implicit in prose (rather than explicit in the defined schema) should also use lowercase equivalents for ease of use. Spaces in component names become dash '-' characters.
  5. Finally, if the format of the data according to the original schema is too long and/or not human-friendly, use <abbr> instead of a generic structural element, and place the literal data into the 'title' attribute (where abbr expansions go), and the more brief and human readable equivalent into the element itself. Further informative explanation of this use of <abbr>: Human vs. ISO8601 dates problem solved

Scope

Images, Video and Audio regularly share several common fields. hMedia has been based on a minimal common subset based on the analysis of 225 media related web pages. All fields discovered during analysis occur more than 80% of the time or more across each of the target domains listed on the Media Info Examples page. hMedia was developed using the Microformats Process and Design Principles.

Introduction

Mary Hodder - 22 Jan 2006

There are many ways to publish media by users, but as people try to access those remixing and aggregation become more and more prevalent, having consistent records becomes important. Audio, photos and video show up in each other's publishing spaces, even though they are unique media objects. A photo might be next to the link for an audio piece, as it's visual artwork. A video can be comprised of quotes of other videos, photos and audio. Still photos can be made from videos. All three types of objects can contain subsets of media that is tagged and described.

Format

Abstract

hMedia is a single media publishing format that relates to Images, Video and Audio with an Emphasis on Practical, Simple, and Minimal. Wherever possible field names have been chosen from those defined by the hCard standard.

Schema

See key.

  • hMedia hmedia{1}.
    • fn. {1}.
    • contributor *. Using text or hcard.
    • photo ?. Using the HTML IMG element.
    • player ?. Using use any appropriate html element such as OBJECT.
    • enclosure *. A URL using the rel-design-pattern

Key

Based on Perl's standard quantifiers:

bold {1} MUST be present exactly once
italic* OPTIONAL, and MAY occur more than once
+ MUST be present, and MAY occur more than once
? OPTIONAL, but MUST NOT occur more than once
[square brackets] list of common values
(parentheses) data format
# comment
! awaiting documentation

Schema Definition

The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.

hmedia

hMedia is used to describe information associated with Images, Videos and Audio.

fn

The name of a media.

  • The element is identified by the class name fn.
  • hMedia MUST include one fn element.

contributor

A Contributor is any person or organization that takes part in the creation or distribution of the Media

  • The element is identified by the class name contributor.
  • hMedia MAY include one or more contributors.
  • The contents of the element MAY include a valid hCard.

photo

An embedded Image or Photograph of the Media

  • The element is identified by the class name photo.
  • hMedia MAY include one photo element.
  • The element SHOULD use an <img> element.
  • The <img> element attributes height and width MAY be used to determine the dimensions of a photo

player

The contents are an embedded video or movie of the Media such as a Flash Movie.

  • The element is identified by the class name player.
  • hMedia MAY include one player element.
  • The element MAY use any appropriate html element such as <object>.
  • The <object> element attributes height and width MAY be used to determine the dimensions of a player

enclosure

Indicates that the referred url is a download of the Media.

  • The element is identified by a URL using the rel-design-pattern, the rel attribute SHOULD contain the value of enclosure..
  • hMedia MAY include one or more enclosure's.
  • The media type of the enclosure SHOULD be specified by using a type specifier for a url, the contents MAY be any iana assigned media type .
  • Multiple enclosure elements SHOULD be used for different representations of the same Audio, video or Image.


XMDP Profile

<dl class="profile">
 <dt>class</dt>
 <dd><p>
  <a rel="help" href="http://www.w3.org/TR/html401/struct/global.html#adef-class">
   HTML4 definition of the 'class' attribute.</a>
  This meta data profile defines some 'class' attribute values (class names) 
  and their meanings as suggested by a 
  <a href="http://www.w3.org/TR/WD-htmllink-970328#profile">
   draft of "Hypertext Links in HTML"</a>.</p>
  <dl>
   <dt>hmedia</dt>
   <dd>
    Used to describe semantic information associated with Images, Videos and Audio.
   </dd>
   <dt>fn</dt>
   <dd>
    The name of a media
   </dd>
   <dt>contributor</dt>
   <dd>
    A Contributor is any person or organization that takes part in the creation or distribution of the Media
   </dd>
   <dt>photo</dt>
   <dd>
    An embedded Image or Photograph of the Media.
   </dd>
   <dt>player</dt>
   <dd>
    An embedded video or movie of the Media.
   </dd>
  </dl>
 </dd>
 <dt>rel</dt>
 <dd>
  <dl>
   <dt>enclosure</dt>
   <dd>
     Indicates that the referred url is a download of the Media.
   </dd>
  </dl>
 </dd>
</dl>

Note (informative). See also an RDF Schema for the hMedia vocabulary.

Modularity

Although media items are sometimes presented on their own they are often found in data structures that are supported by existing microformats. It should therefore be possible to use the hMedia microformat as a child (or in some cases a parent) of these microformats.

Media Distribution and Syndication

Podcast and Vidcast feeds reference a sequence of media items. hMedia can therefore be used as a child element of hAtom.

Please see: hAtom+hMedia example.

Media Events

hMedia may used to describe a continuous media stream for example a TV channel. An event or a schedule of events on the channel can be signaled using vevent as child elements. A combination of hMedia and hCalendar may provide what is necessary to capture a specific event, the media stream information and the timing information.

Please see: hCalendar and hMedia.

Media Reviews

A Review about Audio, Video or Images often occurs in media publishing, hMedia reviews can often be published using hReview, capturing the reviewer, the reviewed item, a rating, a description, and the Date of a media review. hMedia may therefore be published as a child element of a hReview item

Please see: hReview and hMedia.

Examples

Using Real world Examples found on the media-info-examples page

Images

<div class="hmedia">
  <a rel="enclosure" type="image/jpeg" href="http://www.treeswing.net/index.php?showimage=355">
    <img class="photo" alt="Saturday Nights alright for fighting, by treeswing" 
     src="http://cache1.photoblogs.org/thumbnail/?hash=9bece0678c5610bd4b631d9037286df7&size=450"/>
  </a>
    <span class="fn">Saturday Night's Alright For Fighting</span>, 
    <em>by <span class="contributor vcard">
       <a class="url fn" href="http://www.treeswing.net/">Treeswing</a> 
      (<a class="url" href="http://www.photoblogs.org/profile/treeswing.net/">profile</a>)
    </span></em>
</div>

Video

<div class="hmedia">
<span class="fn">Introduction to the Open Media Web</span>
<object class="player" type="application/x-shockwave-flash" data="http://www.viddler.com/player/1d6265f3/">
  <param name="movie" value="http://www.viddler.com/player/1d6265f3/"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="allowFullScreen" value="true"/>
</object>
<ul>
 <li><a rel="enclosure" type="video/mp4" title="Download the original source file for this movie" 
    href="/explore/factoryjoe/videos/2.m4v">Original</a></li>
</ul>
</div>

Audio

<span class="hmedia">
<a rel="enclosure" type="audio/mpeg" href="http://homepage.mac.com/mr.gilbert/.Music/earle_waydownhole.mp3">
    <span class="contributor vcard">
      <span class="fn">Steve Earle</span>
    </span> - 
    <span class="fn">"Way Down in the Hole" (Tom Waits cover)</span>
</a>
</span>

Combined

hAtom and hMedia

<div id="example" class="hentry hmedia">
<h2 class="entry-title"><a class="fn" href="#example" rel="bookmark">Introduction to the Open Media Web</a></h2>
<p>by <cite class="author vcard"><span class="fn">Author</span></cite> on:
<abbr class="updated" title="2008-12-14T11:08:00+01:00">14th Dec, 2008</abbr></p>
<div class="entry-content"><p>The introductory video describing the Open Media Web project and where it's -- roughly -- going!</p></div>
<object class="player" width="545" height="451" type="application/x-shockwave-flash" data="http://www.viddler.com/player/1d6265f3/">
  <param name="movie" value="http://www.viddler.com/player/1d6265f3/"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="allowFullScreen" value="true"/>
</object>
 <p>Download: <a rel="enclosure" type="video/mp4;length=18454938" href="http://www.viddler.com/explore/factoryjoe/videos/2.m4v">
   Original</a>
 </p>
</div>

hCalendar and hMedia

<div class="hmedia">
<div id="bip-play-emp">
<object class="player" height="395" width="640" 
  data="http://www.bbc.co.uk/emp/9player.swf?revision=7276&embedPageUrl=
  http://www.bbc.co.uk/iplayer/episode/b00gd1mr/Doctor_Who_The_Next_Doctor/#anchor-info-dialog&domId=bip-play-emp
  &config=http://www.bbc.co.uk/emp/iplayer/config.xml
  &playlist=http://www.bbc.co.uk/iplayer/playlist/b00gd1mr
  &guidance=unset" 
  name="bbc_emp_embed_bip-play-emp" 
  id="bbc_emp_embed_bip-play-emp" 
  type="application/x-shockwave-flash">
  <param name="movie" value="http://www.bbc.co.uk/emp/9player.swf?revision=7276&embedPageUrl=
  http://www.bbc.co.uk/iplayer/episode/b00gd1mr/Doctor_Who_The_Next_Doctor/#anchor-info-dialog
  &domId=bip-play-emp&config=http://www.bbc.co.uk/emp/iplayer/config.xml
  &playlist=http://www.bbc.co.uk/iplayer/playlist/b00gd1mr
  &guidance=unset"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="allowFullScreen" value="true"/>
  <param name="wmode" value="default"/>
  <param name="quality" value="high"/>
</object>
</div>
<div class="vevent">
  <span class="summary">
  <a class="url fn" href="http://www.bbc.co.uk/iplayer/episode/b00gd1mr/Doctor_Who_The_Next_Doctor">
  Doctor Who: The Next Doctor
  </a>
  </span>,
   Broadcast on: <span class="location">BBC One</span>,  
  <abbr class="dtstart" title="2008-12-25T18:10:00+01:00">6:00pm Thursday 25th December</abbr>, 
   Duration: 
  <abbr class="duration" title="PT60M">60</abbr> minutes,
   Available until: 
  <abbr class="dtend" title="2009-01-08T15:49:00+01:00">3:49pm Thursday 8th January</abbr>
</div>
</div>

hReview and hMedia

<div class="hreview">
 Reviewed by: <span class="reviewer vcard">
  <span class="fn">anonymous</span>, 
 </span>
  On: <abbr class="dtreviewed" title="2009-01-03">January 3rd, 2009</abbr>.
 <div class="item hmedia">
    <p><a class="url fn" rel="enclosure" href="http://mediaweb.musicradio.com/mp3/Mis-takes.mp3" type="audio/mpeg">Mis-takes</a>
      by: <span class="contributor vcard">
          <span class="fn">The Charlatans</span>
     </span></p>
 </div>
 <div>Rating: <abbr class="rating" title="4">****</abbr> out of 5 stars</div>
  <div class="description">
    <p>This is a great track from The Charlatans latest album You Cross My Path, well worth a listen.</p> 
  </div>
 </div>

Examples in the wild

This section is informative.

The following sites have implemented hMedia, and thus are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing etc. If your site is marked up with hMedia, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page like hmedia-examples-in-wild.

Implementations

This section is informative.

The following implementations have been developed which either generate or parse hMedia content. If you have an hMedia implementation, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page like hmedia-implementations.

Articles

This section is informative.

The following articles have been written which discuss hMedia. If you have an hMedia article or blog post, feel free to add it to the top of this list using hAtom markup. Once the list grows too big, we'll make a separate wiki page like hmedia-articles.

History

  • Thu Sep 1st 2005, a discussion about a Playlist Microformat by Lucas Gonze, hPlaylist
  • On Jan 1st 2006 Tantek Çelik calls for a simple media microformat which describes the 80/20 of information about a particular piece of media and nothing more. see: [2]
  • hMedia 0.1 Draft Specification 2009-01-04

References

Normative References

Informative References

Similar Work

Work in progress

Brainstorming

Do you want to help develop the next version of hMedia? Please add your thoughts and insight on the hmedia-brainstorming page.

Discussions

Issues

Please see: hmedia-issues

Related Pages

  • A new proposal for h-media [3]
Retrieved from "http://microformats.org/wiki/index.php?title=hmedia&oldid=69869"