A Consuming Experience

This post explains how to effectively upload music MP3s and other audio files via Blogger so that people can play them from your blog post. This trick makes use of Blogger's new video uploading feature, currently still in beta.

As you may know, following the rollout of the now feature complete fancy New Blogger, formerly known as Blogger Beta, Blogger have decided to allow users to access experimental features via the new Blogger in Draft - for example, the ability to upload videos. Users of Blogger in Draft can upload video files, which are hosted for free on Google Video. Video uploading is the first test feature to be rolled out via Blogger in Draft (effectively a playground for users to try out and comment on planned new features which aren't quite ready for prime time yet - more on Blogger in Draft, and its video uploading and some screenshots of the video uploading process plus issues and bugs).

However, Blogger still don't allow users to upload audio files like MP3s. So, my suggested workaround to add audio files is this (sounds like a recipe doesn't it, though no scissors are involved!):

• take a picture or photo that goes with the MP3 you want to add to your blog - in fact any image file will do, you can even use more than one if you want to, but it's kinda nice to pick something that matches the mood of the MP3 you want to upload
  
• take the MP3 that you want to add to your blog post
• combine the image and the audio into a video file (movie), so that basically the audio "accompanies" the static photo i.e. the photo is the background for the audio you want to store via Google, and
  
• upload the resulting video file to Blogger in Draft.

Here's an example of a combined video I made earlier:

Apple Mac users?

I only have Windows XP, so these instructions are for XP only. However, Apple Mac users will be able to do what I've outlined above (in fact it's probably even easier for them) using something like iMovie.

How to convert MP3 plus picture to a video (Windows XP)

What you need

You need to have on your PC:

• at least one photograph or picture file, in a standard format like JPEG or GIF
• the MP3 file you want to upload - it's easiest if you store it in the same folder as the pic
  
• Microsoft Windows Movie Maker (if you haven't already got it with Windows you can get a free download here, but it only works on Windows XP Service Pack 2, not SP1, and there are other system requirements)
  

Step by step howto

Here's a step by step. Later in this post I've included a video which goes through the steps to illustrate them in practice.

1. Install and launch Windows Movie Maker (WMM).
2. Go to menu File, Import into Collections.
3. Browse to your photo or picture and click Import. You can select more than one image file, if you want to use several, by holding down Ctrl and clicking each one, before you hit Import. If your MP3 is in the same folder, you can select it here too.
   
4. You should see a thumbnail (smaller sized version) of the pic in the middle of the WMM window with the name of the file under it. That's the Collections area.
   
5. If your MP3 is in a different folder, in WMM again go to menu File, Import into Collections.
6. Browse to the MP3 file that you want to upload and click Import.
   
7. An icon representing that file (pic of musical note) will appear in the middle of the WMM window, with the name of the file under it.
8. From the Collections area, drag and drop the pic that you want to appear at the start of the video to the bottom of the WMM window, so it's at the start of the grey horizontal bar that's labelled Video. (The bottom section is called the Timeline; if you can't see it, click the Show Timeline icon.) Then drag down and drop the next pic you want to show in the video so that it's after (on the right of) the first pic. And so on for all the pics you want to use.
9. Next, drag and drop the MP3 file from the Collections area to the bottom of the WMM window, to the start of the grey horizontal bar labelled Audio/Music.
10. (Optional) You can match the video display duration with the audio. Each pic you add to the timeline will by default show for just 5 seconds (you can change that default in Tools, Option, Advanced, Picture duration). If your audio recording is more than 5 seconds long, after the first few seconds anyone who plays the video will still hear the audio, but then their screen will go blank after 5 seconds. If you don't mind that, it's fine, you don't have to do anything more. But if you want your image to be visible to accompany the audio until the audio finishes playing completely, it's easy to do that.
    • Click on a pic in the timeline to select it.
    • Move the cursor to the right of the pic and it becomes a double headed red arrow.
    • Just drag the right edge of the pic towards the right to lengthen how long that pic is shown for in the video.
    • You can fiddle round with all the different pics in this way and change their durations.
    • Obviously you should move the edge of the final pic so that it matches up with the end of the MP3 file in the Audio bit of the timeline.
11. (Optional) You can add a title to the video if you want. Go to Tools, Titles and Credits. The options are self-explanatory, you can have a 2-line (or rather 2-part) title, change the way the title is animated etc - I won't go into them further here.
12. When done, convert the package into a video (called a "movie" in WMM).
13. To do this go to the menu File, Save Movie File.
    
14. Choose My Computer then Next. Give it a filename (with no spaces, as it won't work on Blogger in Draft at the moment if there are spaces in it) and decide where to save it on your hard drive, it doesn't matter where as long as you can find it again for uploading via Blogger! And click Next.
15. For the Movie Setting, pick the second option: Best fit to file size. For the filesize, as Blogger allow you a max file size of 100 MB but so far nothing above 5MB seems to work, click the up and down arrows until it says e.g. 4 MB (basically so that it's less than 100 MB), or go for a smaller number, maybe it's best to make that as small as it will let you, though obviously the smaller the file the worse the sound quality - it's a trade off. And hit Next.
16. Now go have a cuppa tea and leave it to do its thang. It'll save the MP3 and pics to a .WMV video file.
17. When it's done, just upload your WMV file to Blogger by logging in using your usual Blogger login details via Blogger in Draft, creating a new post and using the new video upload icon in the toolbar (for more on video uploading using Blogger in Draft see this post and this post).
18. Be warned - it can take absolutely ages to upload.
    

Instructional video

And here's a video showing how to make the video I've posted above, just to be meta / recursive. Ironically the under 5 MB version I made of it still wouldn't upload to Blogger in Draft (see my previous post about the bugs), so I gave up and put it on YouTube:

Points to note

A few things to be aware of:

• MP3 isn't the only option, it can work with other formats too, as long as you can combine them into a video with your video making program, e.g. WMA with Windows Movie Maker.
  
• Copyright - you can only combine or upload music or audio files where you own the copyright or have the permission of the owner to do that, e.g. some Creative Commons licensed files - for links to collections of CC-licensed music, see the Creative Commons audio page. When you upload a video to Blogger you have to tick a box confirming your agreement to the conditions. Though I think it's somewhat ironic that it says you can't upload anything "infringing or obscene", when the Google Video top 10 videos list looks like this...!:
  

Tags: Blogger.com, New Blogger, Blogger in Draft, videos, MP3, MP3s, audio, audio files, Windows Movie Maker, Windows XP, WMV, Windows Media, Improbulus, Consuming Experience, A Consuming Experience

Labels: Blogger, MP3, tips, video

As you may know, not long after finalising the now feature complete fancy New Blogger, formerly known as Blogger Beta, Blogger introduced a way to enable users to access experimental features via the new Blogger in Draft (effectively a playground for users to try out and comment on planned new features which aren't quite ready for prime time yet - more on Blogger in Draft, and its video uploading).

Users of Blogger in Draft can upload videos, and the video files are hosted for free on Google Video. Video uploading is the first test feature to be available via Blogger in Draft.

I summarised some initial points and included some screenshots in my previous post.

I've been experimenting with video uploading, and here are some more issues and possibly bugs I've noticed.

The Blogger in Draft video uploading process, with screenshots

After you login to Blogger in Draft, create a new post and click the new video upload icon in the toolbar of the post editor:


you'll get the video upload popup:


It's mostly self-explanatory. I haven't figured out what the "Video Title" box does yet as I can't see a title associated with the uploaded video in a published post, for instance.

Then an Uploading video.. placeholder image appears in your post. If you have text or images there already it goes after them, i.e. it's placed at the end of your post (whereas uploaded images appear at the start):


You'll see the video isn't centered in the middle of the post (I think it should be, by default).

If you go to the Edit HTML view you can see the code for the placeholder, which looks like this:

<object id="BLOG_video-UPLOADING" class="BLOG_video_class" contentid="UPLOADING" height="280" width="320"></object>

And at the bottom of the Create Post page, you can see a status message showing that it's Uploading Video...:


It's good to know that we can keep editing the post while the video file uploads, and even save edits.

Now if you keep an eye on the browser status bar, you'll see a succession of messages, while Firefox (if you use Firefox) has its "Loading" message and icon whirling away:
Sending request to draft.blogger.com
Waiting for data from draft.blogger.com
Transferring data from draft.blogger.com
Done
(and it all repeats again)

When it's finished, there seems to be a long wait on "Transferring data from draft.blogger.com", then the placeholder pic momentarily changes to this:

And then the pic changes to the opening shot of the video. The code also changes - "UPLOADING" becomes a unique number, in both places where it occurs. Unique to that uploaded video, of course.

You can see a test example here (that's an WMV file which isn't a "real" video with moving pictures, as such).

What are the bugs and issues?

Several points I've noticed so far.

Uploading doesn't work - file size limit?

As mentioned in my previous post, and as you can see from the screenshot above, you can upload videos in the standard file formats of AVI, MPEG, QuickTime (.mov), Real (.rv) or Windows Media (.wmv I imagine), with a maximum file size of 100 MB.

I've not tried uploading in anything other than WMV format, so far. (Did try WMA just to see, well it's Windows Media innit even if it's not video, but not surprisingly I just got an error message.)

The first issue is that uploading videos takes too long, and sometimes doesn't happen at all - probably the filesize? It's supposed to be 100 MB max, but from my tests, I have only been able to upload files of up to about 5MB. A 5MB file took about 15-20 mins to upload on my broadband connection, so it's still a bit slow. Bigger files of I'd say around 20MB wouldn't upload, period (I've not tried 10 MB.)

When I tried to upload a WMV file of some 25 MB, which is well under the supposed 100MB limit, it just wouldn't do it. If 5MB takes about 20 mins then 25 MB shouldn't take more than a couple of hours. But I left it overnight, it didn't work. I cancelled and tried again, left it for 5 or 6 hours, no go. Finally tried one more time in a new post, gave up after leaving it for a few hours. Also tried it in Internet Explorer instead of my usual browser Firefox, same thing. Just had it stuck on the Uploading messages. Sometimes the "Loading" message or hourglass on my browser disappeared but the video wasn't shown, other times it just stayed whirling away forever. The progress bar showed solid almost all the way to the end, but just stayed there without quite getting to the end.

So that's one major bug they need to fix - and it has to be a bug, if it's supposed to handle 100MB. I've tried it with different WMV files, same thing.

Occasionally even with smaller files there are problems, e.g. an error message with a 2 MB file:


Though when I tried again, it did finally upload OK.

Maybe Blogger could also introduce a clearer more accurate progress bar showing how far through the uploading is?

Editing draft posts - problem, and solution

Now if you successfully upload a video but don't publish it immediately, it doesn't behave when you later go back to the draft post via Edit Posts, at least in Firefox.

At the bottom of the draft post it says "Processing", then it errors and the code for the video vanishes from the post! If you try to go back to Edit Posts it claims there are unsaved changes.

The workaround, I found, is to go quickly back to Edit Posts if that happens (it has with every draft post so far which has uploaded video code in it). Then click to Edit the same post again and, quick as a flash before the code disappears, go to Edit HTML view and copy the code for the video (with its unique ID). If you then paste that code back into the post, in either Edit HTML or Compose view, and then publish, it works.

The gotcha is to make sure you've copied the code before it autosaves the post without the code, as the code gets wiped out within seconds of your trying to edit the post. Good exercise for the fingers!

This has to be a bug. I've not tried to see if it's the same in Internet Explorer.

Managing uploaded videos

Pictures and photographs uploaded to Blogger can be managed via Picasa Web. But what about uploaded videos? I did try logging in to Google Video using my Google Account (which we now have to use to sign in to Blogger), but on my Uploaded Videos page nothing could be seen.

Presumably this feature is on its way, but it's imperative for users that we should be able to manage our uploaded videos. For example witness the many failed uploads I've tried - if they've uploaded but just didn't appear in my post, I don't want them taking up space on "my" video account unnecessarily so I'd want to be able to delete them. In fact it would be nice if I could just check whether they did upload to Google Video but just weren't displaying in the post.

Also it would be good to know what if anything is the total maximum limit on uploaded videos which each Blogger member can use up. Again, so we can manage our account storage sensibly.

Published posts with videos

Two immediate points here. On Internet Explorer 7 at least, when you visit a post or home page with an uploaded video, the video starts playing immediately, automatically. That's as annoying as an audio file autoplaying when you go to a webpage. It doesn't do that in Firefox or Opera. Team Blogger, please make it stooooooop!

Second point - on sharability, which seems particularly apt given Jyri Engeström's 5 principles for Web 2.0 success - where is the button on the displayed video that enables viewers to share the video, embed it in their own blogs, etc? I think there should be one.

Known issues blog?

As with Blogger in Beta, I wonder if Blogger might start listing known issues for Blogger in Draft, e.g. on the Known Issues blog maybe tagged Draft and Video? It would be helpful for users to search through.

All in all though, it's very positive that we can now upload videos to Blogger. I do hope the uploading issue with bigger files is fixed, soon, most of all.

Labels: Blogger, video

Blogger have introduced Blogger in Draft, a laboratory or sandbox where keen folk can try out new Blogger features which aren't quite ready for general release, and give Blogger feedback via comments - see Eric's post on Buzz. So clearly they've not rested on their laurels after rolling out the now feature complete fancy New Blogger, formerly known as Blogger Beta. I bet the JSON feed and widget making types will be happy. I'm not a real techie, but I'm still squealing with excitement. Really.

So how can you test out these whizzy new offerings? Just go to the Blogger in Draft site and login with your usual Blogger / Google Account details. The usual Blogger site still works, use that instead to get back the normal non-experimental version of Blogger.

There's also a Blogger blog dedicated to Blogger in Draft, appropriately called "Blogger in draft", which oddly enough isn't linked to in the Buzz post (but Kirk provided the link). That's where they'll announce new Blogger in Draft features and you can comment on them.

See also the Blogger in Draft FAQ.

Blogger - uploading videos

The first experimental feature you can test on Blogger in Draft is the ability to upload videos on Blogger and have them hosted on Google's servers (Google Video rather than YouTube, a seemingly odd choice given the greater popularity of YouTube but maybe it's a branding issue). Kirk saw this coming a while back.

Here's a screenshot of the Create post page (if you wonder why my post editor box spans the whole width of the page and you'd like yours to, see this post and this). As you can see, apart from a fancy new crosshatch background at the top, there's a new video upload button - outlined in red below:



And the video upload popup:



As you can see, you can upload videos in the standard file formats of AVI, MPEG, QuickTime (.mov), Real (.rv) or Windows Media (.wmv I imagine), with a maximum file size of 100 MB. I sure hope there's no time limit as well as file size limit like the 10 minute one on YouTube, which for me anyway involved the hassle of having to time things carefully to make sure I didn't exceed it.

While video sharing is all well and good, you'll notice you have to make sure you're not uploading anything that's "obscene" or in breach of someone else's copyright, and you have to tick a box to agree to the Google Video terms and conditions. Standard stuff, though what's on the right side of the obscenity or copyright fair dealing / fair use line isn't always easy to figure out.

See also the Blogger video upload FAQ.

I've not had time to try uploading a video myself yet, but there's a short one up at the Blogger in Draft post if you want to see it (cute doggie, all together now awwwwwwwwww).

Maybe it's just me but just plain image uploading seems a lot quicker now, I wonder if they've beefed things up generally on Blogger in anticipation of lots of video uploads?

And now, give her an inch I know I know, but I really do hope that Blogger will also introduce audio uploading and file hosting for MP3 podcasts (e.g. like the recordings I did of the Drupal event presentations, the attempts at uploading them to Ourmedia were fun and a half, not).

Labels: Blogger, video