Saturday, October 07, 2006

3 Google Players to Embed And Play Audio & Google Videos on Your Website or Blog

Google has 3 web-based flash players that let you embed, on your own website or Blog, any Google Videos and any MP3 audio file (such as podcasts) that you have a URL to.
  • 1) Google Video Player
  • 2) Google GMail Audio Player (primarily used for Voicemail)
  • 3) Google Reader Audio Player
  • (used for embed audio files in RSS feeds i.e. podcasts)
1) Google Video Player
All videos from Google Video are played back with Google's flash based Video Player as you can see with the example below.

(Sergey Brin Speaks with UC Berkeley Class)
The Google Video Player can be found at:
http://video.google.com/googleplayer.swf

Google provides the code for embedding every Google Video. There is no need to hand code anything for that.

2) Google GMail Audio Player
Google introduced the GMail Audio Player with their new feature of sending Voicemail with Google Talk. As far as I can tell there is no difference between the Google Video Player and the Gmail Audio Player. Everyone (Gmail, Yahoo Mail, & Hotmail users) who receives a Google Talk Voicemail, is able to playback their received voicemail messages with the GMail Audio Player as the screenshot below shows. (Notice how Google, in GMail, has cut of the Full Screen button and the Google Video button.)

The Google GMail Audio Player can be found at:
http://mail.google.com/mail/html/audio.swf


3) Google Reader Audio Player
With the introduction of Google Reader, Google also made a modified GMail Audio Player for it. The Google Reader Audio Player has two extra buttons that enables rewinding and forwarding, plus the volume control is longer. As opposed to the GMail Audio Player, Google this time completely removed the Full Screen and the Google Video button. And unlike the GMail Audio Player, the Google Reader Audio Player cannot playback any videos. Just see for your self below.

The Google Reader Audio Player can be found at:


Editing Options
(follow the color correspondence)


<embed style="width: 400px; height: 27px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/2806928869-audio-player.swf?audioURL=MP3_URL" quality="best" bgcolor="#ffffff" scale="noScale" salign="TL" flashvars="playerMode=embedded" align="middle"></embed>

width & hight - Just change the number values to fit your website or Blog space.

id="VideoPlayback" - Both the Google Video Player & the GMail Audio Player have this set as id="VideoPlayback" but the Google Reader Player has it as id="audio-player-container player". I interchanged them, even entered some bogus text and nothing had changed. There seems to be no functional difference.

type="application/x-shockwave-flash" - this lets the web page know that some flash component is being embedded

src="GooglePlayerType+?docId=/?audioURL=+MP3_URL" There are three components to defining the the source (src) of the audio or video to be embedded

(scr="1+2+3")

1) There is a choice between the Google Video Player (http://video.google.com/googleplayer.swf), the GMail Audio Player (http://mail.google.com/mail/html/audio.swf), or the Google Reader Audio Player (http://www.google.com/reader/ui/2806928869-audio-player.swf). I recommend to use the Google Reader Audio Player for any MP3 audio and obviously the Google Video Player for all Google Videos.

2) Add ?audioURL= for audio playback and add ?docId= for Google Videos.

3) For audio playback you enter the MP3's URL after
?audioURL= and for Google Videos you must enter the Id of the Video after ?docId=.

quality="best" - This refers to the Flash playback quality. Always leave this as it is. It will not affect the video quality but is meant for actual Flash animated content.

bgcolor="#ffffff" - (I am not sure what this does.) I would have assumed that this can change the background color of the video window by replacing #ffffff with some other color code. I tried it but visually nothing has changed.

scale="noScale" - (I am not sure what this does.)

salign="TL" - (I am not sure what this does.)

flashvars="playerMode=embedded" - This is another Flash embedding command that should always be left as it is.

align="middle" - This aligns the Video in the Google Player but this is only noticeable when the width and height of the Google Player don't match up the Video's aspect ratio. It can be changed to align="left" or align="right".

No comments: