Hi all,
Just wanted to confirm whether there is any way of passing a js array as a playlist to the Image Rotator. I know you can do this with the FLV Player using sendEvent('load'), but the Image Rotator api doesn't support this as of yet. Server-side scripts for dynamic generation of the xml file isn't an option. Is there any way of doing this in javascript alone?
Thanks SMack!
Only trouble now is, I can't seem to get a DOM reference to the player to work with any of the api events. Tried to pull the script down to a very basic example such as the one below (I'll be using swfobject2.2 usually), but the browser gives me an "object doesn't support this method or property" error.
HTML CODE
<div id="container">
<embed name="rotator" id="rotator" src="imagerotator_url" width="470" height="160" allowscriptaccess="always" allowfullscreen="true" flashvars="enablejs=true&file=imagefile_url"/>
</div>
JS CODE
function toggleplay(){
document.getElementById('rotator').sendEvent('playpause');
}
I'm running the script/associated files on server, not locally, so I presume enablejs is working. Is there anything obvious I'm missing here?
You can't use an embed element to embed your Flash content if you want to use the JavaScriipt API. It's either swfobject or the double-object method.
(I don't understand why you would post an embed element if you are going to use swfobject???)
Ah, right... I was just trying to get it to work with a simple example before working it into my code. With a bit more playing I've figured out what I was doing wrong - I am dynamically generating the player and didn't give it enough time to initialise before trying loadFile. Is there an initialisation-check function for the Image Rotator like there is for the flv player? If not, I'll just have to stick with my js timing script.
Even though I've got loadFile to work, I can't get it to build a playlist with multiple files from an array. Is there any way to do something similar to:
rotator.loadFile({file:file1_url},{file:file2_url});
I tried adding files one-at-a-time using the addItem() function, but it does not correctly add each file into the image rotator's playlist.
Thanks ever so much for the help. Much appreciated!
With the v3 API, you have to build the playlist one track object at a time. There is no way to get the entire playlist object with one call and there is no way to load the playlist object with one call.
So for multiple tracks, you have to loop through your playlist object and then use addItem() to add one track at a time. It's slow.
This was the common way to shuffle a playlist with the v3 API.
I'll see if I can find some old code showing how to retrieve the playlist, shuffle it, and re-load it. The re-load part will be useful to you.
The Image Rotator has a full API, basically similar to the v3 player's API.
The big difference being the differences between an Image Rotator and a Media Player. So for instance, seeking in a video doesn't make any sense in the Image Rotator.
But you can load a playlist object consisting of track objects with loadFile, same as the v3 Media Player.
function loadFile(file){
rotator.loadFile({file:file});
};
I see the API documentation no longer has many of the supported functions, but you can find them in this old document.
JW FLV Media Player JavaScript API======================================
last Update: 05-12-08
function getUpdate(typ, pr1, pr2, pid)
======================================
typ: item pr1: index
typ: load pr1: % loaded
typ: size pr1: width, pr2: height
typ: state pr1: 0=ready/paused, 1=buffering, 2=playing, 3=completed
typ: time pr1: elapsed, pr2: remaining
typ: volume pr1: % volume
pid: javascriptid of the player calling the function
getUpdate() is called by the player on state changes and whenever there is new position data (once per second).
function sendEvent(typ, prm)
============================
typ: complete force completion of the media file
typ: audio toggle auxiliary audio track (same as "A" button)
typ: captions toggle captions button (same as "T" button)
typ: fullscreen toggle fullscreen button (same as fullscreen button)
typ: getlink prm: index
typ: next change to next track
typ: playitem prm: index
typ: playpause toggle play/pause
typ: prev change to previous track
typ: scrub prm: seconds (000.00)
typ: stop stop the player
typ: volume prm: percent
function loadFile(obj)
function addItem(obj, idx)
==========================
obj: duration: number - length of the media file in seconds
obj: start: number - seconds into the media file to start playing
obj: description: text - descriptive text that can be used to describe/explain the media file
obj: link: url - url for link
obj: id: text - unique id of the media file
obj: category: text - advertising category (commercial)
obj: audio url - media player secondary audio track; image rotator primary audio track (commentary or background)
obj: captions: url - url for captions file
obj: image: url - url for image file
obj: type: text - media type (mp3, flv, rtmp, jpg, png, gif, swf, rbs, 3gp, mp4, mv4)
obj: file: url - single media file, stream, or playlist (can be playlist generator script or redirect)
obj: title: text - title of the media file
obj: author: text - author's name
obj: fallback: url - url for the FLV video file to fallback to if the user can't play mp4
idx: number - position in playlist array (integer starting with 0)
function removeItem(idx)
========================
idx: integer starting with 0 or nothing for last item (position in playlist array)
function itemData(idx)
=========================
idx: 0=>duration (number-seconds.tenths) <duration>
idx: 1=>start (number-seconds.tenths) <start>
idx: 2=>description (text) <annotation>
idx: 3=>midroll (url) <meta rel='midroll'> ...doesn't work
idx: 4=>link (url) <info>
idx: 5=>id (text) <identifier>
idx: 6=>category (text) <album>
idx: 7=>audio (url) <meta rel='audio'>
idx: 8=>captions (url) <meta rel='captions'>
idx: 9=>image (url) <image>
idx: 10=>type (text) flv, jpg, etc. <meta rel='type'>
idx: 11=>file (url) <location>
idx: 12=>title (text) <title>
idx: 13=>author (text) <creator>
idx: nn=>fallback (url) <meta rel='fallback'>
**<meta rel='other flashvars'>
<end> (not available yet)
function thisMovie(movieName)
=============================
thisMovie() is called by other functions to get the movie name (javascriptid) of the player
which is then used to communicate with the correct player.
function getLength(pid)
=======================
pid: javascriptid of the player calling the function
returns the number of tracks in the playlist
function function getBandwidth(bw)
==================================
getBandwidth() is called by the player after the bandwidth check is completed.
( Display with: document.getElementById('rbw').innerHTML = bw; )
XML parser tags - JavaScript flashvars
======================================
<meta rel="audio"> audio
<creator> author
<meta rel="captions"> captions
<album> category
<city> city
<date> date
<annotation> description
<meta rel="duration"> duration
<meta rel="fallback"> fallback
<location> file
<identifier> id
<image> image
<latitude> latitude
<info> link
<longitude> longitude
<meta rel="midroll"> midroll
<meta rel="start"> start
<meta rel="end"> end (not available yet)
<title> title
<meta rel="type"> type (or last three characters of location element data)
All known flashvars (listed alphabetically) defaults in CAPS
============================================================
audio* (url) You can set this flashvar to the location of an external mp3 file that should serve as an additional audiotrack. Use this for accessibility commentary, director's comments or, with the imagerotator, background music.
author (string) Set this flashvar to the artist's or creator's name. Corresponds to the creator element ot the XSPF playlist.
autoscroll (true,FALSE) By default, the playlist area of the players will have a scrollbar if the number of items is too long. If you set this flashvar to "true", the scrollbar wil disappear and the playlist will scroll automatically, depending upon the mouse position.
autostart* (true,FALSE,muted) Set this to "true" to make the player automatically start playing when the page loads. If set to "muted", the player will autostart with the volume set to 0 and an unmute icon in the display.
backcolor* (color) Backgroundcolor of the player/rotator. In the "extras" folder of this download there's a colorpicker script with which you can pick a color value. The default for the players is 0xFFFFFF (white) and for the rotator 0x000000 (black).
bufferlength (number) This sets the number of seconds an FLV should be buffered ahead before the player starts it. Set this smaller for fast connections or short videos. Set this bigger for slow connections. The default is 3 seconds.
bwfile (url) Image to use for bandwidth checking; used in conjunction with bwstreams. Assign a simple image to this flashvar, or the rtmp location of the serverside bwcheck script.
bwstreams (comma-separated list of bitrates) The different streams to use for bandwidth checking; used in conjunction with bwfile. If, for example, you want to play the video video.flv and set this to 100,250,500,1000 and the player detects a bandwidth of 349kbps, the file video_250.flv will be played. Note that bandwidth checking is ignored for audio and images!
callback (url) Set this flashvar to the location of a serverside script (PHP/ASP) that can process callbacks. The players will send a callback every time an item starts/stops, so you can save statistics with the serverside script. Set this to "analytics" to send the callbacks automatically to Google Analytics.
captions (url) You can set this flashvar to the location of an external textfile with captions. The players support SMIL's TimedText format and the SRT format used with ripped DVD's. Set this flashvar to "captionate" if your FLV file has Captionate captions embedded. If you use multitrack Captionate captions, you can set this flashvar to "captionate0", "captionate3" etc. to display a certain track. You can also assign captions for every item in a playlist.
category (string) Set this flashvar to "commercial" to designate advertising tracks. Corresponds with the album element of the XSPF playlist. The category item serves only one purpose: if you assign it the value commercial, the player will treat this playlistitem as a commercial. The item cannot be skipped then, and it will not appear in the playlist.
city (string) Currently unused. Corresponds to the city element of the XSPF playlist.
clip ()
config (url) If you have lots of flashvars and you don't want to mess up your HTML pages, you can also aggregate your flashvars in a single XML file. Next, assign this xml file to the config flashvar of your player. That way, all vars inside the config will be parsed with one line of code. Any additional flashvars you do set in your HTML will override the ones that are in the config XML.
date (string) Currently unused. Corresponds to the date element of the XSPF playlist.
description (string) Set this flashvar to some descriptive text. Corresponds to the annotation element of the XSPF playlist.
displayheight (number of pixels) This flashvar is used by the players and sets the height of the display. It defaults to the height of the SWF object minus the controlbar (20px), but if you set it to a smaller height, the playlist will show up. If you set it to the height of the player itself (or larger), the controlbar will auto-hide over the video.
displaywidth (number of pixels) Instead of the "displayheight", you can set "displaywidth" to a size smaller that the SWF width to make the playlist appear at the right side of the display.
duration (number) Set this flashvar to the length of the media file in hours:minutes:seconds (00:00:45).
enablejs* (true,FALSE) Set this to true to enable javascript interaction. This'll only work online! Javascript interaction includes playback control, asynchroneous loading of media files and return of track information to javascript.
end (number) Set this flashvar to...
fallback (url) Only for the mediaplayer. If you play an MP4 file, set here the location of an FLV fallback. It'll automatically be picked by older flash players.
file* (url) The location of the file to play. It can be a single file (MP3/FLV/RTMP/JPG/SWF/PNG/GIF) or a playlist for the players. The rotator only accepts playlists.
frontcolor* (color) Text/button color of the player/rotator. The default for the players is 0x000000 (black) and for the rotator 0xFFFFFF (white).
fsbuttonlink (url) The players automatically show a fullscreen button if a user has installed a capable flashplayer (from 9.0.28). With this flashvar, you can link to an alternative page to display a sort-of fullscreen version of the player. Use serverside variables or the getQueryParamValue() function of SWF Object to send the "file" and any other flashvars to that fullscreen-substitute page.
height* (number) As with the width of the player/rotator, this variable is already set with a default embed code. However, sometimes (notably on IE), this won't get through (so you get a messed-up display). Then use this flashvar to tell the player/rotator how many pixels high it should be.
id (string) The unique identifier of the file to play. It will be sent to serverside callbacks(see below here, and is also used when using RTMP streams. In the latter case, the "file" flashvar points to the rtmp:// stream, and this "id" flashvar to the precise file to play. You can also assign an identifier for every item in a playlist.
image (url) If you play MP3 or FLV files, you can use this flashvar to show a preview image or album cover. It can be a JPG/SWF/PNG/GIF file. You can also assign an image for every item in a playlist.
javascriptid* (string) If you control multiple players/rotators with javascript, you can use this flashvar to give each of them a unique ID. It will be returned with every call to the getUpdate() event.
kenburns* (true,FALSE) Set this to true to apply the Ken Burns effect to images in the rotator. Note that this works best when using large images from the same server on a fast computer. Small images from different servers and slow computers produce blurry results and choppy motion. Works also best in combination with the "slowfade" transition.
largecontrols (true,FALSE) Set this to true to make the controlbar twice as large. This is useful to visually impaired users.
latitude (number) Currently unused. Corresponds to the latitude element of the XSPF playlist.
lightcolor* (color) Rollover/active color of the player/rotator. The default for the players is 0x000000 (black) and for the rotator 0xCC0000 (red).
link (url) Set a link to an external URL, downloadeable version of the file, or a force-download script that you can use for downloading the file. You can assign link-clicks to the display, the downloadbutton and every item in a playlist. Corresponds to the <info> element of the XSPF playlist.
linkfromdisplay* (true,FALSE) You can set this flashvar to "true" to make a click on the image/video display to result in a jump to the "link" webpage. By default, a click on the display will play/pause the movie.
linktarget* (frame) The targetframe a link (from the display or playlist buttons) will open into. The default is "_self". Set it to "_blank" to open links in a new window. Also "_top" or "_parent" or a frame that you have named.
logo* (url) Set this flashvar to put a watermark logo in the top right corner of the display. All image formats are supported, but transparent PNG files give the best results.
longitude (number) Currently unused. Corresponds to the longitude element of the XSPF playlist.
midroll (url) URL to an XML...
overstretch* (true,FALSE,fit,none) Defines how to stretch images/movies to make them fit the display. "true" will stretch them proportionally to fill the display with cropping, "false" will stretch them to fit with letter/pillar-boxing. "fit" will stretch them disproportionally to fit both height and width. "none" will show all items in their original dimensions. Defaults to "fit" for the players and "false" for the rotator.
recommendations* (url) URL to an XML with movies you want to recommend. The thumbs will show up when the current movie stops playing, just like YouTube.
repeat* (true,FALSE,list) By default, the players will stop playback after every item to preserve bandwidth (repeat=false). You can set this to "list" to playback all items in a playlist once, or to "true" to continously playback your song/movie/playlist.
rotatetime* (number) Use this flashvar to set the number of seconds you want an image to display. The default is "10" for the mediaplayer and "5" for the rotator.
screencolor* (color) Color of the display background screen. The default is 0x000000 (black). With the rotator, change this to make images of different sizes blend nicely with your page. With the player, instead of choosing another color, you can of course also set a background image.
searchbar (FALSE, true) Set this to true to show the searchbar below the display. You can set the search destination with the searchlink flashvar.
searchlink (http://search.longtail.tv/?q=) Only for the mediaplayer. Sets the destination of the searchbar. The default is the LongTail search page (which you can brand with your logo, colors and XML), but you can set other destinations (e.g. http://yoube.com/results?search_query=).
showdigits (TRUE,false,total) Set this to false if you don't want the elapsed/remaining time to display in the controlbar of the players. Quite handy to save some space. Set it to "total" to show the total time instead of the remaining time.
showdownload (true,FALSE) Set this to true to show a downloadbutton in the controlbar. The downloadbutton links to the link flashvar.
showeq (TRUE,false) Set to true to show a fake equalizer in the display. It adds a nice graphical touch when you are playing MP3 files.
showicons* (TRUE,false) Show or hide the play and activity icons in the middle of the display. Defaults to true for the players and false for the rotator. If set to false, the overlaid controlbar will also hide with the players.
shownavigation* (TRUE,false) Use this flashvar to enable/disable the control/navigation bar
showstop (true,FALSE) Set this flashvar to true to show a stop button in the control bar.
shuffle* (TRUE,false) If you use a playlist, the players and rotator will automatically shuffle the entries to prevent boredom. Set this flashvar to "false" to play all items sequentially.
smoothing (TRUE,false) If set to "false", video will not smooth, resulting in a more pixelated, but better performing display. Deblocking is set to 1 if smmmthing is set to false. Use this for large screen / slow computer combinations.
start* (second) If you use RTMP or HTTP streaming (not for regular FLV or MP3 files); use this flashvar to specify an offset start position. You can also use this flashvar in XSPF playlists, so you can make a chapter index of a single file.
streamscript (url) This flashvar is the URL of an optional script to use for 'fake streaming' FLV or MP4 files, eg. through PHP, ASP or LigHTTPD. The parameters 'file' and 'pos' are sent to the script. An example file, "stream.php", can be found in the "extras" folder of the downloads. If you use the LigHTTPD FLV module, set this to the value "lighttpd" (works for FLV and MP4). Note that all FLV and MP4 files you want to fake-stream should have an array with keyframe-positions in their metadata!
thumbsinplaylist (TRUE,false) If you have a playlist that also includes preview images with the image element, you can set this flashvar to "true" to show them in the playlist.
title (string) Set this flashvar to the title of the media file. Corresponds to the title element of the XSPF playlist.
transition* (bgfade,blocks,bubbles,circles,fade,flash,fluids,lines,random,slowfade) This flashvar is only used by the rotator. It sets the transition to use between images. "random" will show all transitions randomly. The default is "fade".
type (AUTO,video,stream,audio,image,youtube) The players determine the type of file to play based upon the last three characters of the "file" flashvar. This method doesn't work if you use database id's or mod_rewrite to retrieve the files. Therefore you can set this flashvar to tell the players of which filetype the file you want to play is. The type is also assigned to every item in a playlist. If no match is found, the player assumes it loads a playlist.
useaudio (true,FALSE) Set this to false to force the additional audiotrack to mute by default.
usecaptions (true,FALSE) Set this to false to force the captions to hide by default.
usefullscreen (TRUE,false) Set this flashvar to false if you don't want to use the Flash9 fullscreen functionality. If you added a "fsbuttonlink" flashvar as well, this link will become the default action for the fullscreen page.
usekeys (TRUE,false) Set this to false to disable keyboard input (SPACE,UP,DOWN,LEFT,RIGHT) for the players.
usemute (true,FALSE)
volume* (number) The default volume for playback of sounds/movies is 80, but you can set another startup value with this flashvar.
width* (number) As with the height of the player/rotator, this variable is already set with a default embed code. However, sometimes (notably on IE), this won't get through (so you get a messed-up display). Then use this flashvar to tell the player/rotator how many pixels wide it should be.
*These flashvars are also used by the Image Rotator.
04-18-08 ******************************************************************************************************************
clip:undefined,
height:260,
width:320,
controlbar:20,
displayheight:undefined,
displaywidth:undefined,
searchbar:'false',
file:undefined,
fallback:undefined,
image:undefined,
link:undefined,
id:undefined,
type:undefined,
captions:undefined,
audio:undefined,
category:undefined,
frontcolor:0x000000,
backcolor:0xffffff,
lightcolor:0x000000,
screencolor:0x000000,
autoscroll:"false",
largecontrols:"false",
logo:undefined,
showdigits:'true',
showdownload:'false',
showeq:'false',
showicons:'true',
shownavigation:'true',
showstop:'false',
thumbsinplaylist:'true',
usefullscreen:'true',
fsbuttonlink:undefined,
autostart:'false',
bufferlength:3,
overstretch:'false',
repeat:'list',
rotatetime:5,
shuffle:'false',
smoothing:'true',
volume:80,
bwfile:"100k.jpg",
bwstreams:undefined,
callback:undefined,
enablejs:'false',
javascriptid:'',
linkfromdisplay:'false',
linktarget:'_blank',
midroll:undefined,
prefix:'',
recommendations:undefined,
searchlink:'http://search.longtail.tv/?q=',
streamscript:undefined,
useaudio:'true',
usecaptions:'true',
usemute:'false',
usekeys:'true',
abouttxt:'JW Player 3.16',
aboutlnk:'http://www.jeroenwijering.com/?about=JW_FLV_Media_Player'
04-18-08 ******************************************************************************************************************
Quote from Jeroen about the references to media files and XML files:
====================================================================
"...the way the different Flash APIs reference to FLV or XML.
XML is referenced relative from the HTML page and FLV files relative from the SWF file.
It's confusing, I know, but I tried to unify this in the 3.0/3.1 version of the mediaplayer
and people were even more confused.
Therefore, try to use absolute (http://...) or site-absolute (/...) URLs to avoid confusion."
Flashvar XSPF Tag RSS Tag ASX Tag
==================================================================================
file <location> <media:content> <ref>
image <image> <media:thumbnail> <param name="image">
id <identifier> <guid> <param name="id">
link <info> <link> <moreinfo>
type <meta rel="type"> <media:content> <param name="type">
captions <meta rel="captions"> - <param name="captions">
audio <meta rel="audio"> - <param name="audio">
title <title> <title> <title>
author <creator> <author> <author>
category <album> <category> <param name="category">