We have just released a new version of Synote Media Fragment Player (smfplayer) v1.0. Compared with the v1.0-alpha, we fixed a few bugs and did more tests on different platforms. In this blog, I am trying to explain how to use smfplayer in Tumblr, and make it possible to share and highlight media fragments in your Tumblr blog.
The problems of sharing media fragments on social networks
See the following twitter message I have sent last year. I only shared a media fragment in the tweet.
That is the reason we designed Synote Media Fragment Player (smfplayer). In the previous blog, I explained how to use smfplayer in Blogger.com. Theoretically, this method could be extend to other blogging or CMS systems such as WordPress, where you have a fully control of the web-page template and the rendering of the template.
Well, I have to admit that smfplayer doesn't work on Twitter and Facebook as the user doesn't have any control of how Twitter and Facebook rendering the embedded video code at all. However, Tumblr is a kind of exception.
Some words about Tumblr
For anyone who doesn't know Tumblr very well, Tumblr is a new microblogging and social network platform. It's sort of like Twitter+Facebook, where you can easily share multimedia posts (images, audio and video) around your followers. You have a blog page, where all your blogs can be viewed, and you can get updates about other users' new sharings on the Dashborad. The blogs on Tumblr are usually short (one sentence, one image, etc) compared with Blogger.
Video sharing is very straight forward on Tumblr. You can embed video code or upload a video yourself. The challenge for me is that is it possible to use smfplayer in Tumblr?
How To?
It's not difficult, but you need to know some programming skills. Firstly, you need to customize your theme and add the smfplayer css and javascript files into the header:
<link href="http://smfplayer.synote.org/smfplayer/build/mediaelementplayer.min.css" rel="stylesheet" type="text/css"></link> <link href="http://smfplayer.synote.org/smfplayer/build/smfplayer.css" rel="stylesheet" type="text/css"></link> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="http://smfplayer.synote.org/smfplayer/build/mediaelement-and-player.min.js" type="text/javascript"></script> <script src="http://smfplayer.synote.org/smfplayer/build/smfplayer.min.js" type="text/javascript"></script>
Then the next question will be how can I initialise smfplayer, in the template. This is the tricky part! If you look at the html code of the template, you will see that all the posts, such as text, image, audio, chat and audio, they are placed in {block:something} tag. For example, this is the code for Photo block:
{block:Photo}
<div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}</div>
{block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
{/block:Photo}
The code is similar to Video block. So one straight forward thinking will be that we create a video/photo post first, and then replace the div media with smfplayer. But how can we locate the correct div with media class for the video as there might be many such divs? And how can we pass the media fragment URI to initialise smfplayer? To solve these two problems, we need to make full use of the div class="copy" and the HTML editor provided by Tumblr.
Whenever you publish a photo or video post, you can add "caption" for the post and you are allowed to embed HTML into the caption. So I can create a post like this:
The div class="smf-placehoder" specifies that the media embedded in this post needs to be replaced by smfplayer. We also use HTML5 data api to define the actual "mfuri" that will be used to replace the media div. This is because embedding video in Tumblr from YouTube or other resources will result in an iframe, which will depend on the video providers. So it's difficult to traverse the DOM node and find the exact URI of the video. Then, we can add the following code into the html head:
$(document).ready(function(){
var placeholders = $(".smf-placeholder");
if(placeholders.size() >0)
{
$.each(placeholders,function(index,placeholder){
var smf_div = $(placeholder).closest(".copy").prev(".media");
var mfuri = $(placeholder).data("mfuri");
if(mfuri!==undefined){
smf_div.empty();
var player = smf_div.smfplayer({
mfURI:mfuri,
autoStart:false,
width:480,
height:320
});
}
});
}
});
The code will find the nearest div media and initialise the smfplayer. The following image is a screenshot of the blogpost on tumblr. You can also goto example1 and example2 to see it yourself.
Known Issue
One serious problem of this solution is that Tumblr actually depends much on "Dashboard", which has nothing to do with the template. So your followers won't be able to see any video playing on your blogpost from their Dashboard. What they can see are only captions :( As a temporary solution, we can upload a thumbnail image as a photo post and add a link "View Media Fragment" to lead users to open the actual blog page. This will also be a problem for users on tablets and mobile phones.
The template of Tumblr may vary from users to users. So the code that is working for my template doesn't necessarily work in your template. However, the basic idea is that you use caption and html data api to save the media fragment uri and initialise smfplayer from javascript.
Conclusions
In this blog, I introduced a way to share media fragments on Tumblr. This solution is still a hack, but should work well as a demo to explore new ways of sharing videos. Again, a more sophisticated solution is that the social network platforms can support the sharing of media fragments natively following the W3C Media Fragment specification.
No comments:
Post a Comment