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>
Related
I'm trying to play in Full Screen an SWF Flash file created in Flash Pro CS6. It plays fine in full screen. I'm still working on the details but the fact is that it doesn't loop and I need it to loop. On Flash the settings for the SWF was set to Loop but even inside Flash doesn't loop at all and I added to the timeline: stop(); so it will stop and loop at the end.
In Flash I imported my FLV file into the stage to load the external file instead of adding it to the time line because is a 35Mb video. The publishing settings for HTML has the loop option active and even on the code the Param value loop = true.
I'm really frustrated with this if you have any thoughts will be very appreciated.
Thanks in advance.
This is my code on HTML that will have my index page.
<div id="bg">
<script type="text/javascript">
var flashvars = {
myFile: "AuroraBoreal.swf",
myFileType: "flash",
loadEffect: "PixelDissolve" \\ kind of not working effect
};
var params = {
id: "bg",
name: "bg",
wmode: "transparent",
menu: "false"
};
var attributes = {
id: "bg",
name: "bg",
wmode: "transparent",
menu: "false"
};
swfobject.embedSWF("AuroraBoreal.swf", "bg", "100%", "100%", "10.0.45.2","expressInstall.swf", flashvars, params, attributes);
</script>
</div>
Try to embed it like this. See if something changes.
<div id="bg">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="100%">
<PARAM NAME="movie" VALUE="AuroraBoreal.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM name="wmode" value="transparent">
<PARAM NAME="loop" VALUE="true">
<EMBED src="AuroraBoreal.swf" wmode="transparent" loop="true" quality="high" WIDTH="100%" HEIGHT="100%" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
</div>
flowplayer doensn't work with safari, that is the code... what's the problem?! :S
thanx for help!
<div class="pictureLayer">
<a id="player" style="display:block;width:636px;height:407px" href="upload/4/video/video.flv"><object width="100%" height="100%" type="application/x-shockwave-flash" data="flowplayer-3.1.5.swf" id="player_api"><param value="true" name="allowfullscreen"><param value="always" name="allowscriptaccess"><param value="high" name="quality"><param value="false" name="cachebusting"><param value="#000000" name="bgcolor"><param value="config={"clip":{"autoPlay":true,"url":"upload/4/video/video.flv"},"playerId":"player","playlist":[{"autoPlay":true,"url":"upload/4/video/video.flv"}]}" name="flashvars"></object></a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "flowplayer-3.1.5.swf", {
clip : {
autoPlay: true
}
}
);
</script>
</div>
I have a site that has YouTube's embedded video in it, my problem is, these videos don't obey the z-index rules. All the YouTube videos are displayed on top of all other elements. I tried
$('iframe','.video_container').attr('wmode','opaque');
$('iframe','.video_container').attr('z-index','1');
I found that the wmmode has to be changed to opaque, but isn't this for the old embedded videos??
How do i achieve this for both old embedded style videos and the new iframes??
Edit:
Even this didn't work on old embedded videos
$('object','.video_container').append('<param name="wmode" value="opaque"></param>').find("embed").attr('wmode', 'opaque');
this works on iframe videos
var src=$('iframe','.video_container').attr('src');
if(src.indexOf('?')==-1)
{
src=src+'?wmode=transparent';
}
else
{
src=src+'&wmode=transparent';
}
$('iframe','.video_container').attr('src',src);
but i still haven't found a way for old embed videos
This is the resultant code after manipulating using js that doesn't work
<object width="320" height="240">
<param name="movie" value="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed src="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"/>
<param name="wmode" value="opaque"/>
</object>
just alter your iframe src like this
http://www.youtube.com/embed/UUeRCDyVspR2M?wmode=transparent
so the flashplayer served by google will render like you told em with that parameter :)
you simply have to add ?wmode=transparent to the params or do it like this
http://www.youtube.com/embed/UUeRCDyVspR2M?param1=bla¶m2=foo&and_so_on=more&wmode=transparent
so you simply have to append
&wmode=transparent
to the end of the url
<script type="text/javascript">
var googleFooYou_tube = function(){
var objs = document.getElementsByTagName('object');
var length = objs.length;
for(var i=0; i<length; i++){
if(objs[i].className == 'video_container'){
var param = document.createElement('param');
param.name='wmode';
param.value='transparent';
var origEmbed = objs[i].getElementsByTagName('embed')[0];
var newEmbed = '<embed wmode="transparent" src="'+origEmbed.src+'" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true">';
objs[i].appendChild(param);
objs[i].removeChild(origEmbed);
objs[i].innerHTML=objs[i].innerHTML+newEmbed;
}
}
}
</script>
and your html code so far
<object width="425" height="349" class="video_container">
<embed src="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
<param name="movie" value="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</embed>
</object>
<script>googleFooYou_tube();</script> // added this at the bottom of your page
It's not usuable as it is... I mean the function... but you can alter it for your needs... and make it look more appealing if you want. It is just a quick and dirty approach and it works flawlessly.
You should add a param for wmode in the flash element which will be an object tag in your markup. Try to find the object element and try this
$('object','.video_container').append(
$("<param/>").attr({
'name': 'wmode',
'value': 'opaque'
})
).find("embed").attr('wmode', 'opaque');
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.
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 + "' />....");
});