We Keep Coding

Jwplayer Flashes "Error loading player: Could not load player configuration"

Jwplayer flashes "Error loading player: Could not load player configuration" for just a second before it correctly loads video. I just think this looks unprofessional and I've spent a lot of time looking for how I might suppress the error or hide it until the video is finished loading.
In browsers like Chrome or Safari, you often never even see the error because it's so fast, but in Firefox you see the error every time.
Here is a live demo of what I'm talking about:
https://jj.coursesaver.com/video/watch/2012-11-atomic-structure-atomic-mass-periodic-table/g1-atomic-and-nuclear-structure-1
Any suggestions of what I might try to make it so the user never sees this error?
Thanks!

This error is happening because of the way you have the JW flash object added directly to your HTML page - and without the proper configuration parameters. This is not the correct way to embed JW player:
<div id="videoplayer_wrapper" class="embed-responsive embed-responsive-16by9">
<object type="application/x-shockwave-flash" data="/jw6.12/jwplayer.flash.swf" bgcolor="#000000" id="video-object" name="video-object" class="embed-responsive-item jwswf swfPrev-beforeswfanchor0 swfNext-afterswfanchor0" tabindex="0">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="seamlesstabbing" value="true">
<param name="wmode" value="opaque">
</object>
</div>
Try replacing what you have with the following:
<div id="videoplayer_wrapper" class="embed-responsive embed-responsive-16by9">
<div id="video-object"></div>
</div>

You can use JW Player's onSetup and onError options to provide an image for these scenarios. Like this:
<div id="playerWrapper">
<div id="player"></div>
</div>
<script>
jwplayer('player').setup({
file:'file.mp4',
image:'placeholderImage.jpg',
abouttext: 'Welcome',
aboutlink: 'http://example.com',
width: '100%',
bufferlength: 3,
primary: 'html5',
stretching: 'uniform',
aspectratio: '16:9',
autostart: 'true',
events: {
onError: function () {
$('playerWrapper').html('<img src="error.jpg" style="width:100%;height:100%;" />');
},
onSetupError: function () {
$('playerWrapper').html('<img src="error.jpg" style="width:100%;height:100%;" />');
}
},
ga: {}
)};
</script>

How to stop video in ie8 when hiding a div?

I have written some JavaScript that will display a video when someone clicks on a picture and then they can click on the "x" to close the video but the video continues to play in ie8 when hidden but stops with FireFox and Chrome. If anyone can tell me how to fix this by having the video stop when the "xbutton" image is clicked I'd greatly appreciate it I have been fighting with this for hours. This is what I have so for JavaScript:
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';} }
function blanket_size(popUpDivVar) {
var blanket = document.getElementById('blanket');
blanket_height = document.body.parentNode.scrollHeight;
blanket.style.height = blanket_height + 'px';
}
function popup(windowname) {
blanket_size(windowname);
toggle('blanket');
toggle(windowname);
}
and this is the html I am using. I am just using dreamweaver to add a .flv video file from my computer.
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#popUpDiv" onclick="popup('popUpDiv')"><img
src="../New images/newxbtn-red.png" class ="xbutton" alt = "Close"/></a>
<p> Video Header</p>
<!--Dreamweaver video code starts here -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="622"
height="350" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="allowScriptAccess" value="always" />
<param name="FlashVars"
value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=video/bf-
eng&autoPlay=true&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download
the latest version of Flash Player. Delete it if you don’t want users to see the
prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf"
width="622" height="350">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="allowScriptAccess" value="always" />
<param name="FlashVars"
value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=video/bf-
eng&autoPlay=true&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash
Player
6.0 and older. -->'
<div>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<!-- Video Ends -->
</div>
<div class ="image">
<a href="#popUpDiv" onclick="popup('popUpDiv')">
<img src="img/farmers/Donahue_Beef.jpg" width="190" height="110" alt="Beef" />
<img src="../New images/playbtn.png" width="200" height="116" alt="Play" class =
"play"/></a>
</div>
Thanks again!

There may be a very easy way using jQuery. In my case I generated a flash embed div with object in it. With jQuery you can easily define a close button with the empty() function on click. This clears the content of the div and the video is no longer in the DOM.
$("#video a.close").click(function(){
$("#flashlayer").empty();
}

First, you'll have to listen for the click event on your xbutton element (which I recommend adding an ID to):
function listen(event, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else if (elem.attachEvent) {
elem.attachEvent(event, func);
}
}
listen('load', window, function() {
var xbutton = document.getElementById('xbutton');
var player = document.getElementById('FLVPlayer');
listen('click', xbutton, function(e) {
player.Stop();
e.preventDefault();
});
});
You can use the JavaScript method Stop() to stop your Flash video.

Resizing SWFs with JavaScript

My client wants a silly intro page where, onClick, doors to a warehouse open into the warehouse itself (redirect into the website). I created a 1920 x 1174 SWF that does just so. It can be seen here. As you will notice, the backdrop of the warehouse and sky are included in the SWF. Just a minor question: is there a better way to do that? One thought was to crop the sky out of the SWF and make the animation smaller so it could be centered with CSS on the intro page. Then make the background-image the sky.
My big problem is the resizing. My (possibly ignorant) assumption is that if I make the SWF really large, it can be scaled down for different resolutions and the aspect ratio kept.
I have tried both of the suggestions at www aleosoft com/flashtutorial_autofit.html and they wildly distort my SWF (which can be seen here). Is this because of my publishing settings?
I turned to JavaScript for somewhat of an answer. Right now I am resizing the swf onload to the screen width and height because window inner height and inner width also distort the aspect ratio. I would like for it to work like www aleosoft com/flashtutorial_autofitexample.html
var w = screen.width, h=screen.height;
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="'+w+'" height="'+h+'">');
document.write('<param name="movie" value="movie.swf">');
document.write('<param name="scale" VALUE="exactfit">');
document.write('<embed src="movie.swf" width="'+w+'" height="'+h+'"></embed>');
document.write('</object>');
I am open to using the object/embed parameters as a solution or JavaScript. I'd rather not use jQuery but I will if necessary.

To achieve best quality you should use stage.fullScreenHeight and stage.fullScreenWidth to determine window size and also handle window resizing event.
Image and the picture of the building should be a separate movie clip.
There is some AS3 code to do that (should be put at the first frame of movie):
import flash.events.Event;
import flash.events.MouseEvent;
import flash.media.Sound;
import fl.transitions.Tween;
import fl.transitions.easing.*;
var t:Tween;
var u:Tween;
var i:Tween;
if(stage) init(null);
else addEventListener(Event.ADDED_TO_STAGE, init);
function init(e:Event){
stage.scaleMode = StageScaleMode.NO_SCALE; //You don't want to scale anything
stage.align = StageAlign.TOP_LEFT;
resizeHandler(null);
stage.addEventListener(Event.RESIZE, resizeHandler); //function that will be executed at every window size change.
/* some animations.
new Tween(object, "property", EasingType, begin, end, duration, useSeconds);
property - This is the name of the property which will be animated, it must be specified as a string (between quotation marks). Example: "alpha", "scaleX", "scaleY", "x", "y". so you can calculate this vaules depending on the current window size
*/
logo_mc.logo1_mc.visible = false;
logo_mc.logo2_mc.visible = true;
t=new Tween(bg_top_mc, "height", Strong.easeOut, bg_top_mc.height, 341, 2, true);
u=new Tween(diamonds_mc, "y", Strong.easeOut, diamonds_mc.y, 208, 2, true);
i=new Tween(gradients_mc, "y", Strong.easeOut, gradients_mc.y, 221, 2, true);
}
function resizeHandler(e:Event):void {
var sw = stage.stageWidth;
var sh = stage.stageHeight;
//put a footer at the bottom of window
footer_bg_mc.width = sw;
footer_bg_mc.y = sh - footer_bg_mc.height;
//specify ALL elements positions depending on the window size, it is called liquid layout
copyright_mc.y = stage.stageHeight - copyright_mc.height - 8;
//center
logo_mc.x = stage.stageWidth - logo_mc.width - 40;
//you can also scale text size
var format:TextFormat = new TextFormat();
format.size = Math.round(stage.stageWidth/20);
myTextField.setTextFormat(format);
gradients_mc.width = stage.stageWidth;
bg_top_mc.width = stage.stageWidth;
bg_site_mc.width = sw;
bg_site_mc.height = sh;
content_mc.x = 0;
content_mc.y = 0;
}
In your xhtml you can have:
...
<head>
<style type="text/css" media="screen">
html, body { height:100%; background-color: #27262e;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
...
<body>
<div id="flashContent">
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="index" align="middle">
<param name="allowFullScreen" value="true" />
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#e7e7e7" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%">
<param name="allowFullScreen" value="true" />
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#e7e7e7" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object> ...
This liquid layout is not probably the greatest solution for you, but you can use this to make text fit to the window. You can try to "make this building float" both sides can be filled with background. This is not true that if you make everything big that would make downscaled image better looking, that depends on a algorithm.
You can achieve better effect sticking to CSS and JavaScript. the doors can stay in SWF.

The following code (no javascript needed) doesn't distort (tested on Firefox 10, Ubuntu; Firefox 4.0, Windows XP; IE 6 and 8, Windows Xp) :
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Platinum Buyer's Club</title>
<style type="text/css">
html, body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<object width="100%" height="100%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="movie" value="http://www.example.com/example.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="SCALE" value="default">
<embed width="100%" height="100%" src="http://www.example.com/example.swf"
quality="high" type="application/x-shockwave-flash" wmode="transparent" scale="default"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
</body>
</html>
However it seems still not working on MacOS browser (not sure whether it's a Flash plugin or browser issue)

JS + HTML, get src using javascript

lets say I have an image being displayed using the code:
<img src="image.png"/>
I would like to define the src using javascript, how would you do something like
<script>
function getImage ()
{
return "image.png";
}
</script>
<img src="Javascript:getImage()"/>
UPDATE:
I need it to work with the divx player, getting the video url paramater via javascript
<object classid="clsid:*************" width="320" height="260" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="custommode" value="none" />
<param name="autoPlay" value="true" />
<param name="src" value="Javascript:GetURL()" />
<embed type="video/divx" src="Javascript:GetURL()" custommode="none" width="850" height="400" autoPlay="true" pluginspage="http://go.divx.com/plugin/download/">
</embed>
</object>
anyone have any ideas for this?

You should give your tags individual IDs, then do
src = 'image.png';
document.getElementById('param1').setAttribute('value', src);
document.getElementById('embed1').setAttribute('src', src);
<param id="param1" name="src" value="Javascript:GetURL()" />
<embed id="embed1" type="video/divx" src="Javascript:GetURL()" custommode="none" width="850" height="400" autoPlay="true" pluginspage="http://go.divx.com/plugin/download/">

You have to assign the image an ID, then use this:
document.getElementById('img_id').src="new_image.jpg";

You can dynamically write in the embed code with the video URL with document.write(), but you should only do this when the page loads.

jquery to change swf

I want to be able to change the swf file showing on a page using the code below (with the comment turned into real code)
Is this possible??
jquery:
$("div.360container > p").click( function() {
// show different swf by changing the value of the first param and src of the embed
});
html:
<div class="mycontainer" style='padding:2px;'>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="650" height="350">
<param name="movie" value="/mySwf.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="/mySwf.swf" quality="high" wmode="opaque" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="650" height="350"></embed>
</object>
<p>click to change...</p>
</div>

Most reliable way to do that would be to set innerHTML of the element to your HTML. So, using jquery:
$("div.360container > p").click( function() {
// show different swf by changing the value of the first param and src of the embed
$(".mycontainer").html("<object ....><param name='movie' value='" + movieUrl + "' />....");
});