embed-brainstorming

(Difference between revisions)

Jump to: navigation, search
(Add editor credit)
m (User:BenWard/drafts/embed-brainstorming moved to embed-brainstorming: Move out of user space.)

Revision as of 19:07, 15 September 2009

Editor
Ben Ward

Contents

Synopsis

Embedding content across different publishers — such as showing YouTube videos in blog posts, Flickr photographs in Pownce, preview images next to bookmarked links.

Sites such as YouTube, Flickr, Vimeo and others publish ‘embed code’ to aid users in copy+pasting content into their own repostings. This is especially useful for embedding of complex content such as Shockwave Flash movies, where the HTML code is not intuitive. Sites like Flickr use copy+paste code examples to encourage and enforce link-back policies and publication of author, publisher and copyright information.

Goal

Produce a microformat to describe the embedding patterns for content and the author/publisher information connected to the content, such that a user or tool could extract the ‘embed’ from any supporting site in a common manner. That could be in the authoring stage of tools such as blogging platforms, or at the publication stage, such as Pownce showing embedded content for URLs that are posted to the service.

Use Cases

Existing Sytems

The creators of Pownce have created an XML standard called oEmbed. This is a standalone XML representation of embeddable content, similar to a feed entry, but including additional fields for the host site (the publisher), and the exact code needed to include the content object in pages.

oEmbed uses an XRDS endpoint, linked to from the content page, to provide the oEmbed representation of a resource.

Examples

Publishers

Publisher examples record both the content of the provided embed code, and also the whether that same information is present in the mark-up of the page.

YouTube

In Page

— http://uk.youtube.com/watch?v=zP4zaMvV__4

Embed Code
<object width="425" height="344">
    <param name="movie" value="http://www.youtube.com/v/zP4zaMvV__4&hl=en&fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/zP4zaMvV__4&hl=en&fs=1" 
           type="application/x-shockwave-flash"
           allowscriptaccess="always"
           allowfullscreen="true"
           width="425"
           height="344"></embed>
</object>

YouTube does not include any information about the video, author, licensing or source site in HTML. That content is all presented within the Flash object itselt.

Flickr

Flickr has two relevant pages; the photo page itself (which contains no explicit embed code) and the ‘All Photos’ page, which contains links to multiple sizes and example embed code.

Photo Page Schema

— http://www.flickr.com/photos/benward/3189768143/

‘All Sizes’ (embed page) schema

— http://www.flickr.com/photos/benward/3189768143/sizes/l/

Embed Code
<a href="http://www.flickr.com/photos/benward/3189768143/" title="Fresh Baked by Ben Ward, on Flickr">
    <img src="http://farm4.static.flickr.com/3398/3189768143_2ca7da4544_b.jpg" width="1024" height="683" alt="Fresh Baked" />
</a>

Vimeo

=In Page

Embed Code

<object width="400" height="225">
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2755105&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=FF0E0F&amp;fullscreen=1" />
    <embed src="http://vimeo.com/moogaloop.swf?clip_id=2755105&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=FF0E0F&amp;fullscreen=1" 
           type="application/x-shockwave-flash"
           allowfullscreen="true"
            allowscriptaccess="always"
            width="400"
            height="225">
    </embed>
</object>
<br />
<a href="http://vimeo.com/">The Remnants</a>
from <a href="http://vimeo.com/johnaugust">John August</a>
on <a href="http://vimeo.com">Vimeo</a>.

Skitch

Photobucket

Consumers

Consumption of embedable content is spread throughout a number of different use cases:

Microblogging

Pownce

Pownce is the original pioneer of the oembed standard. It takes a URL input for an external resource, and where supported embedable content is found, the embed is included with the link post.

Pownce notes are already marked up with hAtom, and include embedded content within a class of attachment.

In addition to the fields of hAtom, the embedded content includes:

<li id="note4390327" class="public-note hentry">
    <div class="note-contents"> 
        <a href="/ariel/"> 
            <img src="/profile_photos/a/r/i/ariel/304_medium.jpg" width="48" height="48" title="Ariel Waldman" class="user" /> 
        	<em class="pro-2">Pro!</em> 
        </a> 
 
        <p class="entry-content">
            <em class="note-type entry-title">
                <a href="/ariel/notes/4390327/" rel="bookmark">Public</a>
            </em> 
            My favorite Pownce post from !<a href="/leahculver/">leahculver</a>.
        </p> 
 
        <div class="attachment">                
            <div> 
                <a href="http://flickr.com/photos/arielwaldman/3078507970/in/photostream/"> 
                    <img src="http://farm4.static.flickr.com/3210/3078507970_5811e41585_m.jpg" alt="Pownce" /><br /> 
                </a> 
            </div> 
 
            <div class="by-caption">
                <span>photo by</span>
                <a href="http://www.flickr.com/photos/arielwaldman/" >arielwaldman</a>
            </div> 
 
            <a href="http://flickr.com/photos/arielwaldman/3078507970/in/photostream/" class="note-url"> 
                flickr.com/photos/arielwaldman/30...
            </a> 
            <div class="note-count"> 
                <span id="click-count-4390327">(14 views)</span>     
            </div> 
        </div> 
 
        <div class="note-location fireeagle"> 
            <span class="locator"><a href="/settings/fireeagle/">Fire Eagle</a>:
            <span class="locality">San Francisco, CA</span> 
            <span class="country-name">US</span>
        </div> 
 
        <h4> 
            <abbr class="published" title="1 day ago">1 day ago</abbr> 
            <span class="vcard author"> 
                <a href="/ariel/" class="sender url"> 
                    <span class="fn"> 
                        Ariel Waldman					
                    </span> 
                 </a> 				
            </span> 
 
            <a href="/ariel/notes/4390327/" class="reply">2  Replies </a> 
            <a href="/ariel/notes/4390327/forward/" class="forward">Forward</a> 
        </h4> 
    </div>
</li>

— Source of a full note, embedding a Flickr photograph, from http://pownce.com/benward

<div class="attachment">     
    <div> 
        <span>                     
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
             codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
             width="300" height="247" id="jxT0ELP7az0" align="middle"> 
            <param name="movie" value="http://www.youtube.com/v/jxT0ELP7az0" /> 
            <embed src="http://www.youtube.com/v/jxT0ELP7az0" quality="high"
             width="300" height="247" name="jxT0ELP7az0"
             align="middle" allowScriptAccess="sameDomain"
             type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
            </object> 
        </span> 
    </div> 
 
    <a href="http://www.youtube.com/watch?v=jxT0ELP7az0" class="note-url">
        www.youtube.com/watch?v=jxT0ELP7a...
    </a> 
    <div class="note-count"> 
        <span id="click-count-3949474">(4 views)</span> 
    </div> 
</div>

— Source snippet of a video note, showing the YouTube video attachment, from [1]

Tumblr

Tumblr is the defacto tumblelog application, encouraging users to post small snippet posts of text, as well as reposting images, audio, video, text quotes and URLs. The output of Tumblr varies depending on the theme the user uses, and can be customised. As such, the following documents the inputs used to publish content.

All post types include adding tags, setting the publication date, visibility (public/private), and the permalink slug.

Tumblr provides a quite strictly structured input mechanism, but the video type is most relevant, as this accepts the code provided by any site. This microformat could allow it to accept any URL, beyond just YouTube and Vimeo for which it has implemented proprietary support.

More to Document
embed-brainstorming was last modified: Wednesday, December 31st, 1969

Views