SS3 // Using OEmbed for media insertion?

[Ingo Schommer]

Hello everybody,

One of the features we'd like to see in SS3 is better media insertion into page content (mainly video and audio from external source).

We haven't thought about this yet from a UI perspective, apart from Felipe's "Insert image" dialogs:

https://github.com/silverstripe/silverstripe-design/blob/master/Design/ss3-ui_content-add-image-from-computer.jpg

Sam has written an overview on the topic three  years ago (!): http://open.silverstripe.org/ticket/1572

Sig has mocked up a potential interface in http://open.silverstripe.org/ticket/3880

Now, since these proposals were written the web changed a bit:

Its much more common to use external services like Youtube instead of uploading a video file to a server.

While I think that serving self-hosted media in custom players from the actual SilverStripe assets/ is still a valid use case,

its also quite complicated to achieve in a user-friendly fashion: We're talking TinyMCE placeholders,

and custom add/edit forms for properties like width/height/autoplay etc..

These forms will need to convert attributes into a shortcode format, and load them

back into the edit form reliably, which can be quite tricky in the current implementation.

This is important for images, but less critical for video and audio.

I'd like to propose a focus on embedding external services before tackling self-hosted media,

using the OEmbed standard: http://www.oembed.com/. If you've ever pasted a Youtube link into

the Facebook status, and it magically creates a preview, then you've already used oEmbed.

In short, it will enable authors to simply copypaste a link to video or audio into the content area,

which gets automatically transformed into the HTML necessary for this embedded media type.

An optional [embed] shortcode will allow further configuration for advanced users,

but without any graphical placeholders.

Wordpress has implemented this really well, here's a couple of references:

http://codex.wordpress.org/Embeds

http://en.support.wordpress.com/audio/

http://en.support.wordpress.com/videos/youtube/

http://en.support.wordpress.com/tag/embed/

http://codex.wordpress.org/Function_Reference/wp_oembed_add_provider

http://www.viper007bond.com/2009/10/13/easy-embeds-for-wordpress-2-point-9/

So, first and foremost: Do you think its worth getting OEmbed working in core as a baseline

implementation before tackling the more complex graphical placeholders and edit forms of self-hosted media?

Then, who's willing to spec this out and help with the implementation?

 * Research oEmbed consumer libraries. I've found http://code.google.com/p/php-oembed/ to be quite hacky, and http://pear.php.net/package/Services_oEmbed quite alpha - but haven't looked in detail.

 * If we can't find a suitable consumer library, spec out 

 * API for registering new oEmbed providers (URL + oEmbed endpoint + regex)

 * Create a new [embed] shortcode which hooks into the existing ShortcodeParser class

 * Implement oEmbed parsing when outputting as HTML, but leave as shortcode/link when viewing in TinyMCE. 

   I assume this will need caching of the embed HTML to avoid calling external services when rendering page content.

 * Add global settings for standard width/height of embedded media

 * Add a global preference for disabling auto-embed parsing. Do we need this to be HTMLValue specific?

I'm bringing this up now because I think its an ideal feature for the community to take on

with a bit of guidance from the core team. Its unlikely to happen until at least beta otherwise.

Thoughts?

Ingo

---

Ingo Schommer | Senior Developer

SilverStripe

http://silverstripe.com

in...@silverstripe.com

Phone: +64 4 978 7330 x 42

Skype: chillu23

[Sigurd Magnusson]

Thanks for raising the topic. I also think it's worth considering embedding one other type of media: Slideshare / Prezi format presentations. 

In my experience doing content on silverstripe.org blog, inserting presentation slides are just as common as video files.

And yes, love to see someone help out with some of the steps Ingo outlined :)

Cheers

Sig

PS. Felipe might be mocking up an interface on the insert UI...

--
You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
To post to this group, send email to silverst...@googlegroups.com.
To unsubscribe from this group, send email to silverstripe-d...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/silverstripe-dev?hl=en.

[Ingo Schommer]

Slideshare supports oEmbed, so its just a matter of writing a small provider for it: http://www.slideshare.net/developers/oembed

Prezi doesn't yet, but seems to be an often requested feature: http://community.prezi.com/prezi/topics/support_for_oembed-1lj32?from_gsfn=true

[Sigurd Magnusson]

Cool! We can do slideshare to begin with, and perhaps prezi will support OEmbed closer to the time SS3 stable emerges :)

Does anyone else have suggestions besides what's been discussed so far (youtube, vimeo, slideshare, prezi), as useful objects to embed into pages?

- Sig

[Richard Ward]

Is there a case for having all media inserted this way, i.e. including locally hosted photos? I find nothing more annoying than having photos in the editor as this allows the user to try and align them all over the place, when usually I have css set to put all img's in a specific place (currently i have to override core functionality to disable the drop down that lets you align left / right etc, and change the markup that gets inserted to be much simpler). I'd also make the editor more consistent by not having some objects inserted visually and some textually.

[Sigurd Magnusson]

Sounds like it would be useful to be able to enable/disable media insertion (or options) through the use of a PHP line here or there...

.. (but shall we pick that topic up when we've got takers to carry the first steps forward? :)

[Jeremy Shipman]

Since sapphire is becoming more of a application framework, perhaps it
would be good to allow any app to become a provider itself. Not
crucial right now, but perhaps something to think about?

[Sam Minnée]

I would see this as something for a module, not for the core framework.

[Ingo Schommer]

Just to clarify Sam's comment, he was referring to "acting as an oEmbed provider" to be functionality for a module.

"Provider" in this context was understood to be the endpoint that exposes content, so e.g. Flickr.com is a provider, and http://www.flickr.com/services/oembed/ its API endpoint.

I've talked to Sam, we agree that bringing oEmbed consumers into core is a good idea,

and we'll have a decent list of built-in consumers like Flickr and Youtube.

Core should further provide an API to hook in additional consumers, either through modules

or through project-specific code (we expect this to be a very simple definition that might not warrant its own module).

[Sigurd Magnusson]

cool, thx for the clarification :)

[Simon J Welsh]

Yay for bringing up old threads!

I've implemented an oEmbed consumer. Source code's at http://svn.rentbox.co.nz/public/oembed/trunk/, examples at http://simon.geek.nz/oembed-examples/. I'm assuming the module will be at http://www.silverstripe.org/oembed-module/ when it gets approved :)

There's a simple array of regex -> provider endpoints with values for some of the major providers and it is easy to add to. If the provider is exactly true, then it uses the autodetect mechanism. It's also possible for all URLs to fallback to autodetect if no provider matches. The fallback is disabled by default.

Uses the [embed] shortcode, and displays the URL as a link if no provider is found.

Still got to add things like showing the resulting HTML in an iframe on another domain, only allowing http/s URLs in the HTML and providing text for the fallback link.
---
Simon Welsh
Admin of http://simon.geek.nz/

[Ingo Schommer]

One word: LEGEND! :)

Haven't had the chance to look through it in detail, but pleasantly surprised on how little code was necessary to get it going!

Probably less character than my initial post about it, aye? ;)

Probably the biggest addition we'd need to have this in core is some form of caching the oembed responses

that works on publication rather than page request - RestfulService has some basic time-based caches,

but thats not good enough. And for anything but the smallest sites you really don't want to make

your page rendering dependent on the responsiveness and reliability of third parties.

On the ss.org module page, I've debugged this for half an hour now, turns out the 500 error

is somehow related to Sphinx indexing. I won't be able to fix and publish the module until next week most likely. Sorry about that!

Ingo

[Nicolaas Thiemen Francken - Sunny Side Up]

Hey Simon

Can you describe in a few words what your modules is supposed to do or send us a demo link - just because I am very curious how it works [sounds like you have invented something legendary ;-)]

Am I right in thinking that it basically allows content editors to add vids from vimeo, youtube, etc...?

Sounds great.

Nicolaas

[Nivanka Fonseka]

hey sig, 

sometimes you can think of Soundcloud too 

nivanka

--

You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
To post to this group, send email to silverst...@googlegroups.com.
To unsubscribe from this group, send email to silverstripe-d...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/silverstripe-dev?hl=en.

--
Nivanka Fonseka
Senior Software Engineer

Skype: nivanka.fonseka
Twitter: @nivankafonseka