Create a gist now

Instantly share code, notes, and snippets.

h-media

h-media

An h-media card describes a single media stream or multiple media streams.

<p>Conceptually, <span class="h-media">Mylo Xyloto</span> is a concept album, and a thematic rock opera.
<p>Conceptually, <a class="h-media" href="//wikipedia.org/wiki/Mylo_Xyloto">Mylo Xyloto</a> is a concept album, and a thematic rock opera.
<section class="h-media">
    <p>Conceptually, <a class="p-name" href="//wikipedia.org/wiki/Mylo_Xyloto">Mylo Xyloto</a> is a concept album, and a thematic rock opera.

    <table>
        <tr>
            <th>No.
            <th>Title
            <th>Length
        <tr class="h-media">
            <td class="p-track">1.
            <td class="p-name">Mylo Xyloto
            <td class="p-duration">0:43
        <tr class="h-media">
            <td class="p-track">2.
            <td class="p-name">Hurts Like Heaven
            <td class="p-duration">4:02
        <tr class="h-media">
            <td class="p-track">3.
            <td class="p-name">Paradise
            <td class="p-duration">4:37
        <tr class="h-media">
            <td class="p-track">4.
            <td class="p-name">Charlie Brown
            <td class="p-duration">4:45
        <tr class="h-media">
            <td class="p-track">5.
            <td class="p-name">Us Against the World
            <td class="p-duration">3:59
        <tr class="h-media">
            <td class="p-track">6.
            <td class="p-name">M.M.I.X.
            <td class="p-duration">0:49
        <tr class="h-media">
            <td class="p-track">7.
            <td class="p-name">Every Teardrop Is a Waterfall
            <td class="p-duration">4:00
        <tr class="h-media">
            <td class="p-track">8.
            <td class="p-name">Major Minus
            <td class="p-duration">3:30
        <tr class="h-media">
            <td class="p-track">9.
            <td class="p-name">U.F.O.
            <td class="p-duration">2:17
        <tr class="h-media">
            <td class="p-track">10.
            <td class="p-name">Princess of China (featuring Rihanna)
            <td class="p-duration">3:59
        <tr class="h-media">
            <td class="p-track">11.
            <td class="p-name">Up in Flames
            <td class="p-duration">3:13
        <tr class="h-media">
            <td class="p-track">12.
            <td class="p-name">A Hopeful Transmission
            <td class="p-duration">0:33
        <tr class="h-media">
            <td class="p-track">13.
            <td class="p-name">Don't Let It Break Your Heart
            <td class="p-duration">3:54
        <tr class="h-media">
            <td class="p-track">14.
            <td class="p-name">Up with the Birds
            <td class="p-duration">3:45
    </table>
</section>

properties of h-media

property type description example data (MP3)
album string album, collection "yayQuery"
artist string, array artist(s) / performer(s) "Jonathan Neal"
bitrate number bitrate per second 192000
bpm number beats per minute 140
channel number channel(s) 2
channel-mode string channel mode "joint stereo"
codec string encoding method or tool "LAME"
compilation boolean part of a compilation "false"
copyright string copyright "Copyright 2012 Jonathan Neal"
date string release date "2012"
depth number depth in pixels null
duration number duration, duration in milliseconds "4:04", 244000
genre string genre "pop"
height number height in pixels null
language string ISO 639-1 primary language "en-us"
lossless number losslessness false
name string name or title "Bye Bye Hacker"
note string additional information "In memory of Hackers (1995)"
photo string image "cover.jpg"
sample-rate number sample rate 44100
size number size 8.3 MB
src string path "song.mp3"
total number number of tracks 15
track number chapter, index, track 13
transcript string contents / lyrics / subtitles "You're a hacker..."
type number format or type "MP3"
width number width in pixels null
@ericelliott

This is much better than the current wiki proposal for h-media. Thanks for taking the time to do this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment