The SPLOTting has not stopped here. I’m happy to have added a whole new avenue for support of services for SPLOTbox I previously thought impossible.
You can see it (and try it) in action right now at http://splot.ca/box. As proof of concept, you can add simply via URL, video from Kaltura media servers from BCcampus, Thompson Rivers University, and Kwantlen Polytechnic University, plus as just a test of how far we can range, audio that has been HufferDuffered.
How SPLOTbox Handler Media Embeds
A bit of explanation is necessary here, or so I think so. The ways one can add media to SPLOTbox includes primarily entering of a web address (but also allows for uploads of images and audio, plus direct recording of audio.
The media you see are embedded into the place of the featured image, as handled by the theme and Alan’s spaghetti style code. To do this for a media URL, what is required is:
- From the URL alone, a pattern needs to be string matched to identify the service (e.g. YouTube, SoundCloud, Giphy, Internet Archive)
- Embedding the media is easy for ones supported built into WordPress we can just get the embed code via
wp_oembed_get($url). SplotBox supports a subset that include Flickr photos, Giphy animated GIFs, Mixcloud audio, Slideshare presentations, Soundcloud audio, SpeakerDeck presentations, TED Talks video, Vimeo video, YouTube video. Why not all of them? Well, having them all creates a bit of tracking internally to test for available services and also to provide admin options to toggle them on and off. The theme developer aka me has made the editorial decision to support the most commonly used ones, but as we see below, my add-on plug lets you toggle on more.
- I’ve been able to add support for others such as Adobe Spark Pages, Adobe Spark Videos, Internet Archive audio or video, Loom screencasts, Vocaroo audio where it is possible to parse out a unique item identifier from the URL to a media and be able to construct an embed code.
As an example of this, Vocaroo audio was easy to add, it is identified first by a URL containing
https://vocaroo.com/1nE0WWUqhxlN All we need to do is parse what comes after the slash as the item’s ID- It’s embed code is easily built as:
<iframe width="100%" height="60"
I had developed some time ago a means to add support per site for lesser used services by crafting a SPLOTbox Extender plugin. It’s not a plugin that does anyting on its own, it requires writing code to add custom support for either the WordPress embeds I left off my list or other ones that could be made to work line vocaroo. This happened in response to a request by Chad Flinn to support transistor.fm (Hey Chad, what happened to the Open Pedagogy Playlist site?).
The main Splotbox theme checks if this plugin is activated, and if so, it calls specific functions to add services where needed in the main theme.
It’s not elegant, but it works. I have no evidence anyone else has used it, but I can make that happen if you ask.
The Challenge of Kaltura
Quite some time ago, Robin Leung from KPU asked about media support for content from Kaltura. I was pretty sure it was not possible. There is no unique pattern that identifies a Kaltura URL as Kaltura content. And there is nothing in a link to Kaltura hosted content that can be used to build it’s embed code. Kaltura seems designed to obfuscate much.
I was rather limited as I have no access to the admin interface of a Kaltura server to understand its options. I had noticed that it does provide an oEmbed URL, which I thought might make it possible to handle server specific instances using WordPress function wp_add_oembed_provider(). This essentially, if it worked, lets you automatically embed content as easily as YouTube, just by putting a URL on a blank line.
I did test for Robin a hard wired approach for KPU media but I did not get it to work. So I shrugged it off.
Then recently during the Reclaim Hosting Roadshow workshop, I heard a request again for Kaltura support for Jim Luke. I explained the problems outlined above. “Can’t do it Jim”
The next day Tom Woodward sent via DM a link to a plugin from University-Wisconsin Madison that added auto embed support in WordPress for media from their Kaltura media server. It was maybe 8 lines of code, simply adding via an init hook a call to a function that added their server’s URL via
wp_add_oembed_provider(). I saw right away that my previous experiment had the pattern match wrong or more likely, I did not set up the
init hook correctly.
Note: My memory is leaky as I am pretty sure that Clint Lalonde had shared a version of the UWM plugin he did for BCcampus.
It took maybe 30 minutes to get a proof of concept working. My first demo required use of the Kaltura provided oEmbed URL, so I had some ugly logic to add that as a note. But then I found some Kaltura documentation that pointed me to a way to code it so you can just use the Kaltura share link.
I’m not going to spell out all the steps here, but it’s documented now on the SPLOTbox Extender plugin, and you can also see a gist that has the plugin code currently running on splot.ca.
Kaltura! Kaltura! Kaltura!
I still know little about Kaltura, but a side advantage of adding it as an embed provider means that any WordPress content can use it to auto embed video hosted on a supported Kaltura server. It got me thinking that in my work fo the OpenETC Co-op that provides WordPress hosting for any BC educator (via multisite) we could possibly provide autoembed for the numerous media server sites in the province.
And since there is a network activated plugin, this could me readily made available on all hosted sites. Before my last day of support work there, we (meaning Troy Welch) got a test version working on the development server for the 3 Kaltura servers I had set up for SPLOTbox. This is the test code:
// add to the mix more oEmbed providers
add_action( 'init', 'splotboxplus_add_oembed_handlers');
// add/edit this statement as needed to match the oembed format of whatever service is added
// c.f. https://developer.wordpress.org/reference/functions/wp_oembed_add_provider/
// BC Campus Kaltura
wp_oembed_add_provider( 'https://video.bccampus.ca/media/*', 'https://video.bccampus.ca/oembed/', false );
// TRU Kaltura
wp_oembed_add_provider( 'https://media.tru.ca/media/*', 'https://media.tru.ca/oembed/', false );
// KPU Kaltura
wp_oembed_add_provider( 'https://media.kpu.ca/media/*', 'https://media.kpu.ca/oembed/', false );
To make it more broadly available they would just need to get a list of Kaltura servers that should be supported (note there is something funky about the TRU media servers, it seems to hardwire the height of the rendered player at an odd size).
This was a nice side discovery and potentially can be used by anyone wanting to add auto embed for a specific Kaltura Media server.
But Wait, There’s More to oEmbed
Just to be sure that I was not limiting myself to just adding oEmbed Providers for only Kaltura, I wanted to test it with another service. The oEmbed site includes a large list of providers, search patterns, and oEmbed addresses (everything needed to add to a WordPress site).
Just as a test, I added support via the SplotBox Extender plugin to audio content from HuffDuffer.com a site I know just from passing, but the idea is a service that lets you assemble audio from different sources into your own playlist that becomes it’s own podcast.
The code to add HuffDuffer as an oembed provider is:
wp_oembed_add_provider( 'https://huffduffer.com/*/*', 'https://huffduffer.com/oembed', false );
The only purpose here is to show that the number of services one could add support for in SPLOTbox just went through the roof.
If you can take on the code challenge!
I’m glad to find that the block to embedding Kaltura in WordPress is way easier. And that my idea of an extensible structure to SPLOTbox seems viable.
Is there a niche media service you’d like to see me take on? The comment line below is open.
The box is quite flexible.
More Features in the Box
I realized that there should be a way to have a widget and maybe menu links to the 3 categories od media SPLOYbox supports- images, audio, and video. These are identified in the parent Garfunkel theme using WordPress post formats.
So there should be a means to link to, say, all video content? I found my way there via a StackExchange post which led to an understanding that post formats are built in as a registered taxonomy, so every SPLOTbox then has archive links available in the format:
The newest version of the SPLOTbox theme has code to recognize and format these archive links.
But there’s more. Why not make use of a widget plugin like List Custom Taxonomy Widget plugin can produce something like:
The SPLOTbox theme even adds styles to make it look like other widgets. Check it out in action at http://splot.ca/box (down in the footer).
Get all these features in the most current version of SPLOTbox.
Featured Image: : The Original Juke Box Company flickr photo by sam.romilly shared under a Creative Commons (BY) license modified by me, cropped, and the Kaltura logo loaded onto the jukebox platter, and the buttons L, O, P, S, T are moved to a pressed position. Plus oEmbed added on the right.