jump to navigation

And Now… Embedded Video November 7, 2009

Posted by flutebrarian in Web Design.
Tags: , ,
add a comment

The fun doesn’t stop with embedding audio players. There is also video to consider. I’ve often wondered about how this could be done – show the first frame of the video rather than just a link to the file – so that the video is more apparent to the user than making them figure out what’s going to happen.

As I was searching for a solution, I came upon the Embedded Media HTML Generator from UCSF (http://cit.ucsf.edu/embedmedia/step1.php)

Enter the type of file you have (Flash, Real, Quicktime, or Windows Media), enter the URL of the file, and voila – the code you need is automatically generated. Copy and paste it into your web page and the user has all the player controls and a one frame preview of what’s to come.

Of course, you can also upload your 10 minute flash video file to YouTube or Facebook. Both these sites will generate the code you need as well for your web page. The advantage here is that their servers take the burden of storage and playback, both things to consider when you are paying for bandwidth and storage.


Embedding Audio Players August 29, 2009

Posted by flutebrarian in Web Design.
Tags: , ,
add a comment

These days, I have a bit more time on my hands for experimenting with new web tools thanks to the State of Ohio. One of my long standing web site projects is Benjamusic.com a site for a conductor/composer friend of mine, Eric Benjamin, who has written some incredible works for orchestra, chorus, and other ensembles.

We want to make this a showplace for his works so that, hopefully, he will be able to sell or rent some of his compositions. Although I think the overall concept of the site is easy to navigate and use, it’s been two years and time for some new stuff.

We have a number of mp3 files of his compositions so the potential buyer can listen to them first. I had been using plain text links to the files, which then opened an mp3 audio player in a blank window. Useful, but the user lost touch with the description of the piece and had to use the back navigation button to return to the catalog.

I knew that it was possible to embed a player onto the page next to the description, but the HTML descriptions I had found for “object” were less than useful. After browsing several google results for “embed mp3 player” I came upon the solution.

There was an Audio Player WordPress Plugin from 1pixelout that seemed to be just what I wanted. www.1pixelout.net/code/audio-player-wordpress-plugin

A tutorial for the installation of this player on a non-Wordpress, or regular HTML website was also available. www.macloo.com/examples/audio_player

So it does take more than just the “object” element to make this thing work but fortunately, someone else had already written the javascript and created the shockwave flash file – two things at which I couldn’t even begin to figure out at this point.

Now on to changing the links to all the audio files on the site…