Forum user: pomonacollege

Hello,

At the following url http://cascadestage.pomona.edu/admissions/discover-more/pomona-live.aspx) I have a playlist implementation that is almost exactly like the examples on flowplayer.org

Please help! The only difference is that I am enclosing the js in a window.onload since I don't load my jQuery till before the closing body tag. Any help would be GREATLY appreciated...thanks a bunch.

<div class="internal-fp">
<!-- player container and a splash image (play button) --> 
    <a style="display: block;" id="flowPlayer" class="player"> 
        <img src="/render/file.act?path=/images/internal/home/explorations-splash.jpg" alt="flowplayer" /> 
    </a>
<div class="fPClips"><a href="${url}"><img src="${tn}" alt="thumbnail" />
<span class="vid-title">${title}, ${time}</span>
</a></div>
<script type="text/javascript"> window.onload = function() {

         $f("flowPlayer", "/flash/flowplayer.3.1.5.swf", { 

	// clip properties common to all playlist entries 
	clip: {
            // baseUrl: "/admissions/discover-more/videos", 
	    scaling: "fit" 
	    }, 

	// our playlist 
	playlist: [ 
	    { 
	        url: "/admissions/discover-more/videos/campus-tour.flv", 
		title: "Walking Backwards: Tour Pomona College",
                time: "00",
                tn: "/test.jpg"
	    },
            {
                url: "/admissions/discover-more/videos/organic-farm.flv",
                title: "Organic Farm: Student's Green Project",
                time: "00",
                tn: "/test.jpg"
            },
            { 
	        url: "/admissions/discover-more/videos/ski-beach.flv", 
		title: "Ski-beach Day: Only in Southern California", 
                time: "00",
                tn: "/test.jpg"
            },     
	    { 
		url: "/admissions/discover-more/videos/snack.flv", 
		title: "Snack: Pomona's Late Night Nosh",
                time: "00",
                tn: "/test.jpg"
	    },
            { 
	        url: "/admissions/discover-more/videos/volleyball.flv", 
		title: "Beach Volleyball: Right Outside Your Dormroom",
                time: "00",
                tn: "/test.jpg"
	    }
	]
	
   });					

    $f("flowPlayer").playlist("div.fPClips:first", {loop:true});

};

</script>

hi there,

my playlist implementation is not working correctly...when a link is clicked that should start that video playing in the player, it just goes to a black screen... below is my code...any ideas? The only difference between what I am doing below and the example is that I am using window.onload instead of $(function() {... which was returning errors for me. thanks...implemented here:http://cascadestage.pomona.edu/admissions/discover-more/pomona-live.aspx

<div class="internal-fp">
<!-- configure entries inside playlist using standard HTML -->
<ul class="fp-clips">
<!-- single playlist entry -->
<li><a class="first" href="campus-tour.flv"> 
        Walking Backwards: Tour Pomona College <i>0:20 min</i> 
        </a></li>
<li><a href="organic-farm.flv"> 
        Organic Farm: Student's Green Project <i>0:20 min</i> 
        </a></li>
<li><a href="ski-beach.flv"> 
        Ski-beach Day: Only in Southern California <i>0:20 min</i> 
        </a></li>
<li><a href="snack.flv"> 
        Snack: Pomona's Late Night Nosh <i>0:20 min</i> 
        </a></li>
<li><a href="volleyball.flv"> 
        Beach Volleyball: Right Outside Your Dormroom <i>0:20 min</i> 
        </a></li>
</ul>
<!-- player container and a splash image (play button) --> 
    <a class="player" id="flowPlayer" style="display: block;"> 
        <img src="http://www.fcphp.usf.edu/fcphp_images/Silver-Play-Button.jpg" /> 
    </a>
<script type="text/javascript"> window.onload = function() { 
     
        // setup player without "internal" playlists 
        $f("flowPlayer", "/flash/flowplayer.3.1.5.swf", { 
            clip: {baseUrl: '/admissions/discover-more/videos'}  
         
            // use playlist plugin. again loop is true 
            }).playlist("ul.fp-clips", {loop:true}); 
     
        };
    </script>
<div class="br"></div>
</div>

Hmmm, still can't figure out what is going on here...any ideas? Thanks!!!

Anyone have any ideas why this isn't working? :)

Hello,

I have a working example where I am injecting flowplayer into the page via jQuery/JSON. My test example works just fine in IE, where the player is hardcoded into the html http://pomona.edu/dev/home/video-test-2.asp).

When I set the same exact code to be injected into the page from a JSON file however, it no longer works in IE (the link just prompts the user to download the file.) Here is the full example that doesn't work in IE:http://pomona.edu/dev/home/index-10.asp

Any ideas as to what is going on? Thanks,

Hello, my scaling preference of "fit" in my BuilInConfig.as file is not doing what it should. Here it is below...any ideas? Thanks. Example viewable athttp://pomona.edu/dev/home/video-test-2.asp

package {
//    import org.flowplayer.controls.Controls;
//    import org.flowplayer.content.Content;
//    import org.flowplayer.akamai.AkamaiConnectionProvider;
//    import org.flowplayer.rtmp.RTMPStreamProvider;
//    import org.flowplayer.pseudostreaming.PseudoStreamProvider;
//    import org.flowplayer.audio.AudioProvider;
//    import org.flowplayer.captions.Caption;
//    import org.flowplayer.securestreaming.SecureStreaming;
//    import org.flowplayer.smil.SmilResolver;
//    import org.flowplayer.bwcheck.BwProvider;
//    import org.flowplayer.cluster.ClusterConnectionProvider;

    public class BuiltInConfig {
//        private var rtmp:org.flowplayer.rtmp.RTMPStreamProvider;
//        private var controls:org.flowplayer.controls.Controls;
//        private var content:org.flowplayer.content.Content;
//        private var akamai:org.flowplayer.akamai.AkamaiConnectionProvider;
//        private var rtmp:org.flowplayer.rtmp.RTMPStreamProvider;
//        private var pseudostreaming:org.flowplayer.pseudostreaming.PseudoStreamProvider;
//        private var audio:org.flowplayer.audio.AudioProvider;
//        private var captions:org.flowplayer.captions.Caption;
//        private var securestreaming:org.flowplayer.securestreaming.SecureStreaming;
//        private var smil:org.flowplayer.smil.SmilResolver;
//        private var bwcheck:org.flowplayer.bwcheck.BwProvider;
//        private var cluster:org.flowplayer.cluster.ClusterConnectionProvider;

        public static const config:Object = {
			// add in key to remove logo
			"key": '******************',
			
			"clip": { 
				"scaling": "fit"
			},
			
			"screen": { 
			    "top": 0, 
			    "left": 0,
			    "width": '100%', 
			    "height": '100%',
			    "background": '#000000'
			 },	
			
			
            "plugins":{
            	"controls": {
					"url":"flowplayer.controls-pomona.swf",
					"autoHide": "always",
					"hideDelay": 1500,
					"opacity": .7,
					"mute": false,
					"background": "#7f7f7e",
				
					// position	
					"width": "100%",
				
					// tooltips (since 3.1) 
					"tooltips": { 
						"buttons": true, 
				    	"fullscreen": "Enter fullscreen" 
					}
				}
			}
				
//                content: { url: "org.flowplayer.content.Content" },
//                akamai: { url: "org.flowplayer.akamai.AkamaiConnectionProvider" },
//                rtmp: { url: "org.flowplayer.rtmp.RTMPStreamProvider" },
//                pseudostreaming: { url: "org.flowplayer.pseudostreaming.PseudoStreamProvider" },
//                audio: { url: "org.flowplayer.audio.AudioProvider" },
//                captions: { url: "org.flowplayer.captions.Caption", captionTarget: 'content' }
//                securestreaming: { url: "org.flowplayer.securestreaming.SecureStreaming" },
//                smil: { url: "org.flowplayer.smil.SmilResolver" }
//                cluster: { url: "org.flowplayer.cluster.ClusterConnectionProvider" }
//                bwcheck: { url: "org.flowplayer.bwcheck.BwProvider" }
                }
            }
        }
    //}

thanks...those worked like a charm!

Thanks, I will look into this.

Btw, if anyone knows which particular .as file to manipulate to change the order the elements in the controlbar appear that would be great! I have glanced over everything briefly and cannot locate anything promising, especially since I am not that experience in actionscript.

Thanks...I guess I will see what I can do about the ordering of the buttons. Any ideas on how to get rid of the border around the time background box though?

Thanks, I figured out through some trial and error how to get the buttons spaced correctly, for the most part. Here are some remaining issues that I would like to resolve, that the documentation either doesn't address directly, or that I cannot find anything on in the forum. Thanks for the help... working demo of below issues athttp://pomona.edu/dev/home/video-test.asp

1. I would like to switch placement of volume slider and time display
2. I would like to get rid of border around time display
3. I would like to get rid of scrubber playhead/dragger (perhaps just make this element have 0 opacity in flash file?)
4. Another post, but I want the entire controlbar to be 100% width with 8 pixels on left, right, and bottom margin.

Another issue which I find confusing: I had the playhead and volume progress bars set at the same exact height, yet the volume displayed so tiny that it was hardly clickable as compared to the payhead progressbar. I had to set different numbers to get them the same ratio...is there a reason for this?)

Here is SkinDefaults.as:

package {
    import flash.display.DisplayObject;

    public class SkinDefaults {

        public static function get values():Object {
            return {
                bottom: "8px", left: 8, right: 0, height: 32, width: "auto", zIndex: 2,
                backgroundColor: "#7f7f7e",
                backgroundGradient: "none",
                border: 0, borderRadius: "4px",
				
				// highlighted time text
                timeColor: "#c4e970",
                durationColor: "#000000",

                // scrubber slider background color
                // sliderColor: "#252524",
				sliderColor: "#3d3d3c",
                // gradient used in the scrubber slider background
                sliderGradient: "none",

                // volume slider background color
                volumeSliderColor: '#313130',

                // volume slider background gradient
                volumeSliderGradient: "none",

                buttonColor: "#313130",
                buttonOverColor: "#f0f3e8",
				
				// area already covered
                progressColor: "#c4e970",
                progressGradient: "none",
				
				// loaded and ready to be played
                bufferColor: "#313130",
                bufferGradient: "none",
                tooltipColor: "#f0f3e8",
                tooltipTextColor: "#474846",
                // border radius of the time display. 0 means square corners, larger values mean more rounded corners.
                timeBorderRadius: 4,
                timeBgColor: '#4a4b4c',

                // border radius of the scrubber bar
                scrubberBorderRadius: 2,

                // border radius of the volume bar
                volumeBorderRadius: 2,

                // how much the scrubber handle should take of the controlbar total height
                scrubberHeightRatio: .10,
                // how much the scrubber horizontal bar should take of the scrubber total height
                scrubberBarHeightRatio: 1,

                // how much the volume slider handle should take of the controlbar total height
                volumeSliderHeightRatio: .15,
                // how much the horizontal volume bar should take of the volume slider total height
                volumeBarHeightRatio: 1,

                // how much the time view colored box is of the total controlbar height
                timeBgHeightRatio: 0.5

            }
        }

        /** 
    * Use this to tweak how much space there is after a widget. The space is left between 
    * widgets when thay are stacked horizontally to the controlbar. You wan use widget.name 
    * to identify what widget is in question. The names of the different widgets are: 
    * "play", "stop", "next", "prev", "scrubber", "volume", "mute", and "fullscreen". 
    */ 
  	public static function getSpaceAfterWidget( 
             widget:DisplayObject, 
             widgetIsOnRightEdge:Boolean):Number { 
 
        // add some space after the time display 
        if (widget.name == "time") return 0; 
 
        	return widgetIsOnRightEdge ? 0 : 16; 
  		}	
		

        public static function getScrubberRightEdgeWidth(nextWidgetToRight:DisplayObject):Number {
            if (nextWidgetToRight && nextWidgetToRight.name == "time") return 0;
            return 0;
        }
		
		
        public static function get margins():Array {
            return [0, 8, 0, 8];
        }
    }
}

I am having a real hard time figuring out how to configure the size/placement of the buttons on the control bar. Do I need to do something to the elements in the .fla file, or is it a setting in the js, or actionscript?

I want my controlbar to be positioned at the bottom of the video screen, full width, with 8px margin on each side? How can I accomplish this without setting a specific width? If I set a specific width, then the controlbar won't resize on fullscreen. Here is the AS code, which from a css centric viewpoint should work. Currently, the controlbar sits at the very bottom pushed to the left by 8px:

Visible athttp://pomona.edu/dev/home/video-test.asp

package {
    import flash.display.DisplayObject;

    public class SkinDefaults {

        public static function get values():Object {
            return {
                bottom: "8px", left: "8px", right: "8px", height: 32, width: "auto", zIndex: 2,
                backgroundColor: "#7f7f7e",
                backgroundGradient: "none",
                border: "0px", borderRadius: "4px",
                timeColor: "#B1E0FC",
                durationColor: "#ffffff",
...

Hello,

After tweaking the layout of the controllbar through the css, I noticed that my progress bar and playhead aren't functioning. I think this might have to do with the face that I changed some of those elements position (i.e. changing from left: number, to right: number)?

Here is a live example (please ignore the rest of the page, as well as the temporary links to other videos)http://pomona.edu/dev/home/index-8.asp

Could anyone point me in a direction that would get these working again? Here is the html and script content. Thanks.

<a href="md.f4v" style="display:block;width:622px;height:350px;padding:0;margin:0;" id="fPlayer">
<img src="/dev/images/internal/home/spock.jpg" alt="Splash image for player" />
</a>

<div id="fCContainer" style="display:none;" class="fc"></div>

<div class="fPClips explorations">
<a href="/" class="first">first video</a>
<a href="/">second video</a>
<a href="/">third video</a></div>

<script>window.onload = function() { $f("fPlayer", "flowplayer.commercial-3.1.5.swf", { key: '#$8ac3e001c7b14853256' , plugins: {controls: null}, clip: {scaling: "fit"} }).controls("fCContainer", {duration: 25}).playlist("div.fPClips", {loop:true}); }; $('#fPlayer').parent().hover( function() { $('#fCContainer').fadeIn(200); }, function() { $('#fCContainer').fadeOut(200); });
</script>

As well as my CSS:

/* -------- flash controls -------- */
/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.fc {
	position:relative;
	height:32px;
	margin: -42px 10px 0 10px;
	/* black background with a gradient */
	width:602px;
	-moz-border-radius: 5px;
	z-index: 150;}

/* play/pause button */
div.fc a.play, div.fc a.pause { 
	position:absolute;
	width: 32px;
	height: 32px;
	display:block;
	text-indent:-9999em;
	background:url(fp-bg.png) no-repeat 0 0;
	cursor:pointer;
	margin-right: 1px; 
	z-index: 100;}

div.fc a.play:hover {
	background-position: -32px 0;	
}

/* pause state */
div.fc a.pause { 
	background-position: -64px 0;
}

div.fc a.pause:hover {
	background-position: -96px 0;	
}

/* the timeline (or "scrubber")  */
div.fc div.track {  
	left:32px;
	position:absolute;
	cursor:pointer;
	background: #7f7f7e;
	filter: alpha(opacity=70);
	opacity:0.7;
	right: 134px;
	margin-left:1px;
	height:32px;	
	}

/* the draggable playhead */
div.fc div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#4ff;
	opacity:0.3;
	filter: alpha(opacity=30);	
	width:3px;
	height:32px;
	border-right:1px solid #444;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.fc div.progress, div.fc div.buffer {	
	position:absolute;
	background-color:red;
	filter: alpha(opacity=10);
	opacity:0.1;
	width:0px;
	height:32px;
}

div.fc div.buffer {
	background-color:#fff;
	opacity:0.1;
	filter: alpha(opacity=10);
}

/* time display */
div.fc div.time {
	position:absolute;		
	width:100px;
	right:33px;
	height: 32px;
	line-height: 32px;
	text-align:center;
	background: url(fp-bg.png) -128px 0;
	/* font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial; */	
	font-size: 75%;
	color:#d9dbd9; 
}

/* total duration in time display */
div.fc div.time strong {
	font-weight:normal;
	color:#303030;
}

/* mute / unmute buttons */
div.fc a.mute, div.fc a.unmute {
	position:absolute;
	right:0;
	width:32px;
	height:32px;
	text-align:center;
	line-height: 32px;
	cursor:pointer;
	text-indent:-9999em;
	background: green;
}

div.fc a.mute:hover {
	background-position:5px -367px;	
}

/* unmute state */
div.fc a.unmute {
	background-position:5px -235px;	
}

div.fc a.unmute:hover {
	background-position:5px -279px;	
}

Does anyone have examples of how to implement a full-screen button as well as a volume slider with the javascript controllbar plugin? Thanks,

The following error code came up in Safari: "Flowplayer cannot access element: player"

This is the code I am injecting (noticed I should have wrapped it for the html):

<a href="test.swf" style="display:block;width:760px;height:350px" id="player">
<img src="/dev/images/internal/home/spock.jpg" alt="Splash image for player" />
</a>
<div id="fc" class="fc"></div>

<script>$f("player", "flowplayer.commercial-3.1.5.swf", { key: '#$8ac3e001c7b14853256' , plugins: {controls: null}, clip: {scaling: "fit"} }).controls("fc", {duration: 25});</script>