ITauthor

This is a gotcha to watch out for if you post videos on a website.

The problem

I created a video in Camtasia and output it as a Flash file to put on a website. I chose FLV format in Camtasia, but the file that runs initially is a .swf file. This displays a little animation and shows the first frame with a big play button on top. It all worked fine locally on my PC but when I uploaded it to the website it just displayed as a black box with no initial animation. This suggested a problem with the .swf file and, sure enough, when I tried loading the .swf file directly in the browser all I got was a grey page (that's gray for anyone Googling for that spelling).

The debugging

The strange thing was that I'd previously added another video elsewhere on the site and it worked fine. It wasn't anything to do with the size of the .flv file because the working video had a larger .flv file, and anyway I was convinced the problem was the .swf file.

My immediate thought was that it was a permissions problem. So I blew the permissions wide open but it wasn't that. I then thought it could be a security issue but telling the browser to trust the website didn't help either.

I'd actually added this within the help authoring tool Madcap Flare, and this took me down all sorts of wrong paths. And, eventually, paths were the problem. I fell back to more Googling and eventually came across a Techsmith forum post by "Showland" that had the solution.

The solution

Showland's forum comment said:

Hi. I had this problem as well, where the compiled file would play locally but not over the Web. I discovered that it didn't like a super long path to the files. Once I stored them with a shorter path, the screencast played fine over the Web. Hope this helps!

Eureka!

The URL for my .swf file was something like this:

http://www.my.website.xyz/documentation/authoringDocs/videos/Flare-adding-glossary-popups-FLV/adding-glossary-popups_controller.swf

So I moved the file up the hierarchy and gave it a simple name:

http://www.my.website.xyz/documentation/authoringDocs/videos/test.swf

and, hey presto, it worked just fine.

I don't know what the character limit is, but it's worth bearing this in mind if you work with videos on websites.

One of these days browsers will be able to play audio files natively. You'll just be able to write an audio element in the HTML, point it at either an audio file, or a list of audio files, or an RSS feed containing audio files, and it'll display a smart looking audio player in the Web page.

This got a little bit nearer with HTML5, but Firefox 3.6 doesn't support MP3 files (which most people still use for audio files on the Web), just Ogg Vorbis. IE9, on the other hand, supports MP3 but not Ogg.

There is a jQuery plugin called jPlayer which goes part of the way to providing a cross-browser solution, but it's a very techie solution and not easy to configure.

So, until all of this gets sorted out finally, most of us just follow the path of least resistance and use a Flash-based audio player and accept that, because Steve Jobs is on a crusade to kill off Flash, no one browsing your pages on an iPhone or an iPad is going to see the player.

As I write this, in June 2010, the podcast pages I produce to accompany my podcasts use a Flash player that comes as part of the Blubrry PowerPress plugin for WordPress. And at the top of the sidebar on each page I use the Easylistener player. Here's a screenshot, just to remember it by, as it's only a matter of time before I have to remove it:

I periodically scour the internet for small, nice-looking audio players that can be pointed at an RSS feed, and Easylistener is the only one I've found that I really like.

William White describes the origins of Easylistener:

Easylistener was developed in the Yahoo! Media Innovation Group by William White and Joseph Magnani. It was inspired by the work of Fabricio Zuardi, Lucas Gonze and many other amazing and talented engineers working for Yahoo! Music in San Diego and Santa Monica, who were developing the Yahoo! Media Player.

Easylistener feeds off XSPF, a venerable XML format for playlists. The little chunk of code that places the player on your Web page includes a reference to a Web site that will take the URL of a Web page and will go and read that page, extract details of any audio files it finds and build them into XSPF that it then feeds back to the Easylistener Flash application.

The trouble is all of this was developed by Yahoo! and they provided the "playthispage" service that produced the XSPF for the player. But Yahoo! lost interest in (or never really noticed) Easylistener, so it was left to rot. Back in July of last year I blogged that the URL for the "playthispage" service no longer worked, which resulted in no content appearing in the player. After a while they seemed to have moved it to another server and I got the player working again. However, it recently stopped again, and this time I was sure it was dead for good.

I emailed William White, who had commented on my original blog post, and I asked if he could help. He got back to me to say he'd set up a PHP script that provided the same XSPF generation service. As a result, for the time being, the player is working again.

To get it working again I added:

playthispage_url =http://musiclibre.org/playthispage/?url=

So my embed element now looks like this (note: the flashVars value should be one long string, I've broken it into lines here just for good looks):

<p style="margin-left:-10px; margin-top:0">     
    <embed src='http://l.yimg.com/us.yimg.com/i/mig/playlistbadge/25.swf?referer='   
       width='170'     
       height='200'     
       wmode='transparent'     
       flashVars='playlist_url=http://www.itauthor.com/category/podcasts/feed&   
          playthispage_url=http://musiclibre.org/playthispage/?url=&   
          rounded_corner=1&skin_color_1=0,-100,-29,18&skin_color_2=0,-100,-27,20'   
       type='application/x-shockwave-flash'     
       pluginspage='http://www.adobe.com/go/getflashplayer'     
   />                                                                              
</p>  

However, if you  want to use Easylistener to your own Web pages, the easy way to get it is to go to:
http://www.musiclibre.org/easylistener/

There's a nice little Web application there for setting the page that gets scraped for content and choosing the way you want the player to look. You then just copy the embed code and change "http://webjay.org/flash/xspf_player" to either "http://musiclibre.org/xspf_player" or "http://musiclibre.org/dark_player".

For example, here's one I just went and grabbed.

And if you don't see anything (or the player is empty), it means it's broken again.

Such a shame Yahoo! didn't continue supporting this because it's still way better than anything else out there that tries to do the same thing.

Tom Johnson has rejigged the Writer River site again to use a service called Publish2. This site is really just another link aggregation site but it has some features that make it really useful. The great thing about it is the bookmarklet that adds a sidebar to whatever Web page you’re reading. From this sidebar you can add an item to your personal list of page links, stored by Publish2.

The other things you can do with the sidebar are:

• Add the link to any of the newsgroups you belong to.
  Tom has set up a “Technical Communication” newsgroup and it’s the links that get added to this newsgroup that appear on Writer River. This is great because it means you can have your own personal list and then, from that, choose who you share particular links with.
• Send a tweet about the page.
  Rather than going to your twitter client and tweeting about this separately – just write your tweet in the sidebar.
• Publish the link to your blog or to delicious.
  The sidebar has WordPress and delicious integration. In my case, I want to have my own “What I’m Reading” list in my WordPress blog. So I have a “What I’m Reading” category already set up and I have Publish2 set to select this as the default category. The good thing about this is that if Publish2 disappeared tomorrow I wouldn’t lose all my “What I’m Reading” links they way I would if I was just adding details dynamically to my site by pulling in information from the RSS feed for my list at Publish2. There is a Publish2 JavaScript widget that you can add to any Web page to pull information down from Publish2 if you want to do it that way. But by actually posting to my blog from the sidebar it means that data is saved to my WordPress database as well as to Publish2’s database.
  

So here’s how I add things to my “What I’m Reading” list. Note: the way I used to populate this list is described in this post – but it was massively complicated compared to this method.

1. When I've read a page I think other tech writers might be interested in I just go to my Bookmarks list, click the Publish2 link and fill out the sidebar form that's displayed.
2. I type in a description of what I like about the page in the Public Comments box.
3. I select the check box for the Technical Communication newsgroup.
4. The check box for twitter is selected by default - I just add some tweet text.
5. In the Also add this link to section I select the check box for ITauthor.com.  My What I'm Reading category is already selected - I just have to copy some text from the Public Comments box and that becomes a link to the article in the resulting blog post.
6. I click Save and I'm done.
   
   My blog's updated with a new post, Writer River also gets a new link entry and a tweet gets sent out to my twitter followers.
   
   Quick, easy and kills three birds with one stone. Brilliant!

If you're toggling something between two states in PHP or Perl it's often handy to use an if/then/else one liner.

In pseudocode this goes like this:

<if this evaluates to TRUE> then <parse this> else <parse this>

All you need to do is replace the "then" with a question mark and the "else" with a colon:

<if this evaluates to TRUE> ? <parse this> : <parse this>

For example:

print  $trueOrFalse ? "you're telling the truth" : "you're lying";

Ignore the print command, it's not part of the if/then/else statement, it's just here to do something with the outcome of that statement.

The expression immediately to the left of the question mark is evaluated. The expression between the question mark and the colon is parsed if the expression evaluates to TRUE, otherwise the expression immediately to the right of the colon is parsed. So in the above example, either "you're telling the truth" or "you're lying" is printed, depending on whether $trueOrFalse is ... you guessed it ... TRUE or FALSE.

But perhaps a more common situation is toggling the value assigned to a variable. For example, toggling between TRUE and FALSE:

$trueOrFalse = $trueOrFalse ? FALSE : TRUE;

Here's a practical example of the use of if/then/else one liners. There's two in this chunk of PHP. The scroll box list below the code is the kind of thing this PHP produces.

<div style="overflow:auto; height:100px; width:300px; border:3px groove #DDD; padding:0">
<?php
    $alternateLine = FALSE;
    while($presidentsArray) {
        print "<div style=\"background-color:";
        print $alternateLine ? "#F5F8F9" : "white";
        print "; padding-bottom: 1px\"> &nbsp; &nbsp; <a href=\"someURL\" title=\"This link goes nowhere\">" .
          $presidentsArray['name'] . "</a></div>";
        $alternateLine = $alternateLine ? FALSE : TRUE;
    }
?>
</div>

Right now, as I write, there is an ugly gap at the top right of all ITauthor.com pages. It used to be filled by an audio player called EasyListener, provided by Yahoo, that I just embedded in my side panel. It was the best thing of its kind because it was neat enough to fit in a slim side panel and it was simple. It read from an RSS feed, pulled out the MP3 files and listed them in the player. You just clicked on the item you wanted and it played the audio.

But Yahoo quietly choked it and hoped that nobody noticed. I’m not sure why they would do this. I’m sure they could handle the bandwidth of people pulling down the Shockwave file off some server that had been left to serve up the old webjay.org pages. Maybe someone at Yahoo just pulled the plug on that server and not enough people have complained. I wish I’d gone and grabbed the files while they were still there. I looked at archive.org but the URL was never spidered.

So I’m going to have to find another solution, but it won’t be for a while because I know there’s nothing quite like it out there, so I’ll have to do some switching around and PHP-ing to sort it out.

It’s symptomatic of the Web though: it seems like a solid, reliable structure, but it’s really entirely transitory and kept in working order by a lot of people and a lot of effort. It’s a bit like a car: as soon as you fix one thing, something else breaks.