I am trying to migrate from jw5 to jw6.
In jw5, I was able to dynamically load a video:
myplayer.load({file: 'myfile.mov', image: 'mysplash.jpg'});
This does not work in jw6. I have spent a lot of time looking through the online documentation, and have not found any references to .load. I am beginning to fear this is no longer supported. The document 'migrating from jw5 to jw6' has this cryptic comment:
The jwplayer().setup() call is now the only valid method to embed media
Does this mean it is no longer possible to dynamically load the player with a new file, for example in response to a click event, using the javascript api? Must all files be specified in a playlist, during the initial player setup?
Thank you.
I got this problem too and I found what is the issue.
Instead of JWP5, JWP6 does not work with the load() function if no media is specified upon setup.
If I used this code:
jwplayer("container").setup({
width: 640,
height: 480
});
after that, the load() function is not working.
The workaround is to specify initial some existing dummy media file:
jwplayer("container").setup({
width: 640,
height: 480,
file: '/some/summy/file.mp4'
});
after that JavaScript function load() can load new media.
This is the BUG !!!
You should still be able to use the load() call in JW6. http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
load(playlist)
Loads a new playlist into the player. The playlist parameter is required and can be either an array with playlist items or a string that points to the location of an RSS feed.
If you are having issues getting load() to work in JW6, please provide an example for debugging, thanks.
This is an old post however i would like to give an example of what i would do (JWplayer6)
var playerInstance = undefined;
button.onclick = function(newData){
if (playerInstance === undefined){
playerInstance = jwplayer("myElement");
playerInstance.setup({
width: 640,
height: 480,
file: newData
});
} else {
playerInstance.load(newData);
}
};
Dummy content loads the player with data the user may not want, and the bonus of pre-loading the player on the page offers only a slight advantage to loading on a request. (waiting for the player js to execute)
Related
late night here and at the end of my tether:
Incorporating Creative SDK to edit photos that were uploaded to the server via the previous page in the workflow -
I have tried every one of the parameters on the SDK documentation to find where is the fault in keeping the loaded image active for previewing edits, but in sequence,
Plugin Initialises (onLoad -> Ok)
Image loads (onReady -> Ok)
The Wait icon spins, then
The image disappears from the edit window
onError() does not pick this up.
Edits are functioning, onSave() fires and I can copy the image
(sending the adobe URL via AJaX) to a specified location (file output) on my
webspace, BUT, no live preview. Also the image does not update the original as is hard-coded in my script, and it gives an error as though unsaved on closing (isDirty).
My webspace is covered with an SSL certificate, but tried loading the image with relative and absoulte URLs, via http and https - nada.
I am calling version 3 as per the documentation, but people have said try version 4.3.1.29..?
I would like to presevere with this editor for live image editing, but only need it for cropping, adjusting brightness, contrast, rotation etc. and at the moment it is working, but 'blind' - anyone come across this? And how do I fix it...? :)
This is the source, pretty much as specified in the documentation, but with a working AJaX call while 'onSave()':
<script type="text/javascript" src="http://feather.aviary.com/imaging/v3/editor.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: 'my-key',
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',
displayImageSize: 'true',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById("image1");
img.src = newURL;
var ph = document.getElementById("new_image_placeholder_div");
ph.innerHTML = '<img src="'+img.src+'" height="100">';
var xmlhttp_c;
if (window.XMLHttpRequest){xmlhttp_c=new XMLHttpRequest();} else {
xmlhttp_c=new ActiveXObject("Microsoft.XMLHTTP");}
alert("Passing the URL "+newURL+" to the PHP page...");
xmlhttp_c.open("GET", "feather_save_handler.php?newURL="+encodeURI(newURL), true);
xmlhttp_c.onreadystatechange=function() { if (xmlhttp_c.readyState==4 && xmlhttp_c.status==200) {
alert(xmlhttp_c.responseText);
alert("Saved!");
} else {
}
}
xmlhttp_c.send();
// end save AJaX call..
},
onError: function(errorObj) {
alert(errorObj.args);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
The function is kicked off from a form button:
<form name="feather_editor" onSubmit="no_submit();">
<input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'http://mywebsitename.com/image_name.jpg');" >
</form>
It turns out that this is an issue in your CSS, and should be a fairly simple fix.
The issue
In daFooz_main.css, you have a canvas selector that includes:
z-index: -1;
That's causing the image in the Image Editor to effectively disappear from view since it is a canvas element.
The fix
The fix could be as simple as removing the line above from your CSS.
If you need that line for other areas of your site, try finding a way to be more specific with your selector, perhaps by using classes to target canvas elements that you do want to alter the z-index of.
The site in question is www.topcatsmusic.com
At the bottom ive coded a player which utilizes js. Beneath the player Ive included a dynamic slider to display .jpg files or album covers. As it is now, Ive been using a simple href tag to send to external soundcloud source.
However, the plugin allows you to make API calls to en-queue the song within the player instead of sending to new window, outside source.
Sample API usage:
ToneDen.player.getInstanceByDom("#player").getTrack("https://soundcloud.com/top-cats/treee-city-fzpz-pines?in=top-cats/sets/releases");
Custom JS file in use "Clickfunction.js"
$('.ult-item-wrap a').click(function(e) {
var sound = $(this).attr('href');
ToneDen.player.getInstanceByDom("#player").addTracks(sound);
ToneDen.player.getInstanceByDom("#player").removeTracks(0, 1);
ToneDen.player.getInstanceByDom("#player").addTracks(sound);
alert(ToneDen.player.getInstanceByDom("#player").getAllTracks());
return false;
});
So, if I load the JS file using the
<script> </script>
within my header - what do I need to do to customize this code so I can identify which song to load based on the custom class assigned to each image?
Try to modify your code a little and see if that works:
jQuery( document ).on('click', '.ult-item-wrap a', function(e) {
e.preventDefault();
var sound = jQuery(this).attr('href');
ToneDen.player.getInstanceByDom("#player").addTracks(sound);
ToneDen.player.getInstanceByDom("#player").removeTracks(0, 1);
ToneDen.player.getInstanceByDom("#player").addTracks(sound);
alert(ToneDen.player.getInstanceByDom("#player").getAllTracks());
return false;
});
Woo hoo! Got it to work. Thanks for the help from everyone. Here is the code I ended up adding to my images to en-queue. Hopefully this method proves to be helpful for any other bands / blogs / musicians wanting to use this cool toneden player.
<span data-href="https://soundcloud.com/top-cats/autumn-keys-long-shadows?in=top-cats/sets/releases" class="toneden_song"><img src="YOUR DIRECTORY HERE/long-shadow-cover-150x150.jpg"></span>
I'm trying to embed a YouTube playlist on a site and have it autoplay with the sound muted. I found this code to do that:
<script src="http://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<script type="text/javascript">
google.load("swfobject", "2.1");
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();
ytplayer.mute();
}
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/mOLp4doE51Q&list=PL86C090F73345FED6&feature=plpp_play_all?enablejsapi=1&playerapiid=ytplayer&allowFullScreen=true&version=3&loop=1&autohide=1",
"ytapiplayer", "100%", "380", "8", null, null, params, atts)
</script>
It is a WordPress site and when I entered that code it just automatically deleted all of the widgets on the sidebar and header that were iFrames/ads. I put the code in the widget that normally has the video code in it and didn't touch the other widgets but when I reloaded it there were all gone and I had to rebuild them all (luckily from a backup).
On top of it, the videos didn't even load.
I'm assuming this code is somehow targeting iFrames and then running some code on them? Can somebody help me decipher this problem before I give it another go? I'm not great with Javascript and am trying to find some answers. Thanks!
I figured it out, the above codes works just fine. The copy and paste from the website I was looking at had parentheses from a foreign keyboard that weren't recognized when I pasted them.
I'm still at a loss of why it would break all the iframes and automatically delete them but the solution is from changing out the parentheses.
I am using jwplayer to play embedded video,
the javascript api tells me
jwplayer("mediaplayer").getPosition()
will get the current position, but my result is undefined
Can anyone help me get the correct resilts
Works fine for me just how the documentation specifies :
<div id="container"></div>
jwplayer("container").setup({
file: "http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",
flashplayer: "http://player.longtailvideo.com/player.swf",
image: "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
height: 270,
width: 480
});
var state = jwplayer("container").getState();
var elapsed = jwplayer("container").getPosition();
How does your HTML and JavaScript look? Without seeing these, I can only assume the following.
According to the API documentation on the website this can be achieved without specifying a container, like so...
jwplayer().getPosition()
I need to background load some WAV files for an HTML page using AJAX. I use AJAX to get the details of the WAV files, then use the embed tag, and I can confirm that the files have loaded successfully because when I set autostart to true, the files play. However, I need the files to play only when the user clicks on a button (or an event is fired). The following is my code to preload these files:
function preloadMedia() {
for(var i = 0; i < testQuestions.length; i++) {
var soundEmbed = document.createElement("embed");
soundEmbed.setAttribute("src", "/media/sounds/" + testQuestions[i].mediaFile);
soundEmbed.setAttribute("hidden", true);
soundEmbed.setAttribute("id", testQuestions[i].id);
soundEmbed.setAttribute("autostart", false);
soundEmbed.setAttribute("width", 0);
soundEmbed.setAttribute("height", 0);
soundEmbed.setAttribute("enablejavascript", true);
document.body.appendChild((soundEmbed));
}
}
I use the following code to play the file (based on what sound file that user wants to play)
function soundPlay(which) {
var sounder = document.getElementById(which);
sounder.Play();
}
Something is wrong here, as none of the browsers I have tested on play the files using the code above. There are no errors, and the code just returns.
I would have left it at that (that is - I would have convinced the client to convert all WAV's to MP3 and use MooTools). But I realized that I could play the sound files, which were not dynamically embeded.
Thus, the same soundPlay function would work for a file embeded in the following manner:
<embed src="/media/sounds/hug_sw1.wav" id="sound2" width="0" heigh="0" autostart="false" enablejavascript="true"/>
anywhere within the HTML.
And it plays well in all the browsers.
Anyone have a clue on this? Is this some sort of undocumented security restriction in all the browsers? (Please remember that the files do get preloaded dynamically, as I can confirm by setting the autostart property to true - They all play).
Any help appreciated.
Hmm.. perhaps, you need to wait for the embed object to load its "src" after calling preloadMedia() ?
Are you sure that the media file is loaded when you call soundPlay() ?
i know your question got a bit old by now, but in case you still wonder...
soundEmbed.setAttribute("id", testQuestions[i].id);
you used the same id twice, yet getElementById returns only one element, or false if it doesn't find exactly one matching element.
you could try something like this:
soundEmbed.setAttribute("id", "soundEmbed_"+testQuestions[i].id);
always keep in mind that an id must be unique
Just a tip for more compatibility:
I read here that width and height need to be > 0 for Firefox on MacOS.