[RESOLVED] Flash/Firefox issue

[ryno502]

Building a website for a client (http://www.airecs.com/index.php). I just installed a videobox script, but for some reason, the FLV videos are choppy in Firefox, but look fine in Chrome and IE. Click the "Video 1", "Video 2", etc links to show the videos.

Anyone have any idea why?

Here is the flash/javascript code the videos are using.

var Videobox = {

init: function (options) {
// init default options
this.options = Object.extend({
resizeDuration: 400, // Duration of height and width resizing (ms)
initialWidth: 250, // Initial width of the box (px)
initialHeight: 250, // Initial height of the box (px)
defaultWidth: 425, // Default width of the box (px)
defaultHeight: 350, // Default height of the box (px)
animateCaption: true, // Enable/Disable caption animation
flvplayer: 'http://www.airecs.com/flash/flvplayer.swf'
}, options || {});

this.anchors = [];
$A($$('a')).each(function(el){
if(el.rel && el.href && el.rel.test('^vidbox', 'i')) {
el.addEvent('click', function (e) {
e = new Event(e);
e.stop();
this.click(el);
}.bind(this));
this.anchors.push(el);
}
}, this);

this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);

this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
new Element('div').setStyle('clear', 'both').injectInside(this.bottom);

var nextEffect = this.nextEffect.bind(this);
this.fx = {
overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}),
bottom: this.bottom.effect('margin-top', {duration: 400})
};

},

click: function(link) {

return this.open (link.href, link.title, link.rel);

},
open: function(sLinkHref, sLinkTitle, sLinkRel) {
this.href = sLinkHref;
this.title = sLinkTitle;
this.rel = sLinkRel;
this.position();
this.setup();
this.video(this.href);
this.top = Window.getScrollTop() + (Window.getHeight() / 15);
this.center.setStyles({top: this.top+'px', display: ''});
this.fx.overlay.start(0.8);
this.step = 1;
this.center.setStyle('background','#fff url(loading.gif) no-repeat center');
this.caption.innerHTML = this.title;
this.fx.center.start({'height': [this.options.contentsHeight]});
},

setup: function(){
var aDim = this.rel.match(/[0-9]+/g);
this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth;
this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight;

},

position: function(){
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
},

video: function(sLinkHref){
if (sLinkHref.match(/youtube\.com\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('=');
this.videoID = videoId[1];
this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/metacafe\.com\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('/');
this.videoID = videoId[4];
this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/google\.com\/videoplay/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('=');
this.videoID = videoId[1];
this.so = new SWFObject("http://video.google.com/googleplayer.swf?docId="+this.videoID+"&hl=en", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/ifilm\.com\/video/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('video/');
this.videoID = videoId[1];
this.so = new SWFObject("http://www.ifilm.com/efp", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
this.so.addVariable("flvbaseclip", this.videoID+"&");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/\.mov/i)) {
this.flash = false;
if (navigator.plugins && navigator.plugins.length) {
this.other ='<object id="qtboxMovie" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="'+sLinkHref+'" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
} else {
this.other = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'" id="qtboxMovie"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
}
}
else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) {
this.flash = false;
this.other = '<object NAME="Player" WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param NAME="URL" VALUE="'+sLinkHref+'"><param><param NAME="AUTOSTART" VALUE="false"></param><param name="showControls" value="true"></param><embed WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" SRC="'+sLinkHref+'" TYPE="application/x-oleobject" AUTOSTART="false"></embed></object>'
}
else if (sLinkHref.match(/\.flv/i)) {
this.flash = true;
this.so = new SWFObject(this.options.flvplayer+"?file="+sLinkHref, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
}
else {
this.flash = true;
this.videoID = sLinkHref;
this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
}
},

nextEffect: function(){
switch (this.step++){
case 1:
this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]});
break;
this.step++;
case 2:
this.center.setStyle('background','#fff');
this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ;
this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''});
if (this.options.animateCaption){
this.fx.bottom.set(-this.bottom.offsetHeight);
this.bottomContainer.style.height = '';
this.fx.bottom.start(0);
break;
}
this.bottomContainer.style.height = '';
this.step++;
}
},

close: function(){
this.fx.overlay.start(0);
this.center.style.display = this.bottomContainer.style.display = 'none';
this.center.innerHTML = '';
return false;
}

};


window.addEvent('domready', Videobox.init.bind(Videobox));



Here is the CSS



@charset "utf-8";
/* CSS Document */

body {
margin: 0;
}
/*
#lbOverlay {
position: fixed;
vertical-align: top;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
*/
#lbCenter, #lbBottomContainer {
position: absolute;
left: 50%;
overflow: hidden;
vertical-align: top;
background-color: #fff;
text-align: center;
padding: 5px;
z-index: 100 !important;
}
.lbLoading {
background: #fff url(/images/loading.gif) no-repeat center;
}
#lbImage {
border: 10px solid #fff;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(prevlabel.gif) no-repeat 0% 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 5px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(/images/closelabel.gif) no-repeat center;
margin: 5px 0;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}

[KDLA]

Does this happen consistently across machines, or are you testing on just one?

It could be browser set-up problem, rather than your page.

[ryno502]

Thanks for the response.

Tested it on 2 different computers using Firefox, same issue occurs.

[KDLA]

This might have something to do with it: http://news.cnet.com/8301-17939_109-10027752-2.html

It looks like the pause is at the two-second mark.

[ryno502]

It doesn't really pause. The play button and the most of the top half of the video "flicker". You can also briefly see the images below the video. It seems like a layering issue or something. I just can't pinpoint whats causing the problem.

[KDLA]

Oh - I thought you were referring to the banner video. It actually pauses for a second when I view it.

[ryno502]

The flash banner will be redone, that one is is just temporary. I am referring to the videobox script. If you click the "video 1", "video 2", etc links a box will popup with a flash video embedded. In Firefox, it flickers for some reason.

[KDLA]

Try this fix: https://realmac.macdock.com/realmacsoftware/2007/support/viewtopic.php?id=32685

[ryno502]

I am not having any issues with the theme, just the flickering issue.

[Eye for Video]

Same issues occured when I tested in Safari so I don't think it's the FF bug thing.
It looks to me like your script is not correctly interpeting the metadata embedded in the video. In other words FF can't tell when the buffer is full. I think that's why the "buffering" rotating wheel flashes wildly and the play button doesn't disappear completely.
I tested the videos by themselves and they play just fine. Couple things I noticed, bitrate very high, great quality but some users will be doing a lot of waiting as file buffers.
Second is that Moyea FLV Lib is listed as metadatacreator.
Since I think the problem may have to do with the metadata, using that software may be the problem. It's not real Flash but a Flash knock-off, which may not be 100% compatable with every Flash broser plug-in.
To test, get some other video that was not affected by that program and test the script. If that video works... well, I think you've found the problem.
Best wishes,
Eye for Video
www.cidigitalmedia.com

[ryno502]

I just replaced the video with a YouTube video and it works fine. I actually didn't create these videos personally. What do you suggest I do to fix this issue? I don't know much about video.

[Eye for Video]

Well I'd say the problem is because of the use of that Moyea product.
So option one, go back to original video producer and have it done over without using that software.
Second, you might try to remove, delete, or strip out the metadata and then use a more reputable software to inject metadata back in. Google for "inject, remove flv metadata". But I can't say wheather or not that would work, that's not the best way to do it.
Best bet is to go back and have original redone.
Good luck on this one,
EfV

Update:
Another option is to use a different script to play the video. It's the buffering wheel and stuff that causing the problem. That's really not a part of the video but the video contains metadata that I think is affecting the display of the buffering wheel.
EfV

[ryno502]

Problem resolved. Please delete thread.

[Eye for Video]

After my time investment in this issue, I'd like to know how you resolved the problem.
EfV

[ryno502]

Sure.

I was going to add a completely new script to play the videos, but left the old one on there as well just in case. I installed the new script on the server, and called the script in the head tags. Turns out something in the new script, in combination with the old script, fixed the issue. Like I said, I know very little about video, so I have yet to figure what code fixed it.

I attached the new script if you are interested.

[Eye for Video]

Hey thanks for the reply.
I guess sometimes we just get lucky... and never reallt know why.
Best wishes,
EfV

[ryno502]

No problem. Thanks for your help.

Thread can be deleted now.