- About this script
- Installation
- Examples
- The Code
This script is designed to find all media links on a page and give them an inline (embedded) player.
This script requires no special code in the html, all you have to do is include a link to your video (or audio) file.
This script is designed to work even for videobloggers who dont know anything about DIV tags, IDs, classes, Javascript, or onClicks ... and who don't or can't worry about crafting specially coded links with onClicks in their posts. The script will do that for them.
Features:
- Major feature: You dont have to do ANYTHING special. Just link to media file in your post.
- It (so far) supports, QuickTime (MOV, MP4, M4V, M4A), Windows Media, AVIs, MP3s, WAVs, AU, OGG, M3U
- It will (optionally) size the media player based on the size of the still image used to represent it.
- You may choose if the file auto-starts or not.
- You may choose if the player(s) are created automatically or only after the user clicks the link/image.
- If you choose, it will only adjust links with 'rel=enclosure'. But by default it will check all links (recommended)
- There are a few variables you can set at the beginning of the script if you choose to do so to customize its effect:
- autoStart = true;
If you want your viewers to have to click the play button even after they clicked the media link/image set autoStart =false, otherwise set to true and let the movies autostart.
- buildPlayers = "onClick";
This lets you choose when the script should build out the players. You can set this variable to "onClick" or "onLoad". buildPlayers = "onClick" will build out a player when the user clicks a link/image to the media file. buildPlayers = "onLoad" will build out a player for each media link on the page as the page loads. (Note you should set autoStart = false if you use this option)
- requireRelEnclosure = false;
If you set requireRelEnclosure = true then only media links with rel=enclosure will have an inline player. (Otherwise all media links will have an inline player)
- useImageSize = true;
To size the player based on the size of the still image set useImageSize = true. Or, to always set players to a specific size set it to false.
- videoHeight = 240;
videoWidth = 320;
If useImageSize = flase, you can set the default size for your players manually with videoHeight, and videoWidth
- displayHelpText = true;
displayHelpText allows you to toggle the text message that appears beneath the media players; this is the text that says something like "The media file should begin automatically. If you are having problems playing the media file, you can download it here".
- debug = false;
If you set debug = true then some javascript alerts walk through the script. (this can be annoying, use only for troubleshooting)
I'm still working on ways to tweak/improve.
To use this script, just do the following (once):
- Include the following code in the <head> portion of your blog templage:
<script type="text/javascript" src="http://www.davidmeade.com/resources/media_player.js"></script>
That's it! Now your media links will have inline players.
- (optional) If you want to customize the script with the options defined above, you will need to add the following lines of code after the above line:
<script>
var autoStart = true;
var buildPlayers = "onClick"; // set to "onClick" or "onLoad"
var requireRelEnclosure = false;
var useImageSize = true;
var videoHeight = 240;
var videoWidth = 320;
var displayHelpText = true;
var debug = false;
</script>
(and then alter these lines as you desire)
- (note) If you have your own webspace, please feel free (and encouraged) to download the script, and host it on your own site.
Here is a MOV:
Here is a WMV:
Here is an MP3:
Travel.mp3
Here is an MP3 with an image:
Here is a odd sized mov:
Here is an MP3 with NO rel=enclosure:
Here is an M4A with NO rel=enclosure:
javascript source is here: media_player.js