According to the vimeo js-api doc, the event finish - Fires when the video playback reaches the end.
For some reason, I can't get this to work, the finish event always calls immediately, am I doing something wrong?
I am trying to make an embedded video disappear when it is finished playing. I have followed this example by Drew Baker but simply cannot get the finish event to call properly.
I have made a very straightforward jsbin here to demonstrate the issue.
This behaviour seems to be occurring on Safari, Chrome and Firefox (on mac).
--
JS Code from JSBIN:
$(document).ready(function() {
$('iframe.vimeo').each(function(){
Froogaloop(this).addEvent('ready', ready);
});
function ready(playerID){
Froogaloop(playerID).addEvent('play', play(playerID));
Froogaloop(playerID).addEvent('seek', seek);
Froogaloop(playerID).addEvent('finish', onFinish(playerID));
Froogaloop(playerID).api('play');
}
function play(playerID){
alert(playerID + " is playing!!!");
}
function seek() {
alert('Seeking');
}
function onFinish(playerID) {
alert(playerID + " finished!!!");
$('#'+playerID).remove();
}
});
You are executing functions instead of passing the function reference to the addEvent method.
Froogaloop(playerID).addEvent('play', play);
Froogaloop(playerID).addEvent('seek', seek);
Froogaloop(playerID).addEvent('finish', onFinish);
Note that Froogaloop passes the playerID as an argument to the play callback function, I'm not certain that it passes the playerID as an argument to the finish callback function (although I'm guessing it probably does).
Related
Currently working on a page containing a video that has to be paused at certain points (like chapters). So I made a function that will stop the video when it hits the next "time marker" which looks like this:
function vidPause(nextMarker){
var timeMarker = nextMarker;
if(videoPlayer.currentTime >= timeMarker) {
videoPlayer.pause();
videoPlayer.removeEventListener('timeupdate', vidPause());
}
};
And I'm trying to fire it this way:
videoPlayer.addEventListener('timeupdate', vidPause(nextMarker));
But it only seems to fire when the video is loaded. Nothing happens when the video is playing (tested by using a console.log(videoPlayer.currentTime); inside the vidPause function).
Note: I need the function to be called that way so that I can remove the event listener when it hits the time marker, that way it won't stop when the user wants to play the video from that point on.
Thanks in advance for any suggestions!
The function is being called once in the addEventListener line, but that's not actually passing it as a callback.
Try this:
function videoUpdate(e) {
vidPause(nextMarker, videoPlayer.currentTime;); // Now call your function
}
function vidPause(nextMarker, timeStamp){
var timeMarker = nextMarker;
if (timeStamp >= timeMarker) {
videoPlayer.pause();
videoPlayer.removeEventListener('timeupdate', videoUpdate);
}
};
videoPlayer.addEventListener('timeupdate', videoUpdate); // Note no brackets, as it's passing a ref to the function rather than calling it
I don't know what the scope of nextMarker is, but you should be able to start console logging and find out.
I am using Wami Recorder
https://code.google.com/p/wami-recorder/
The problem is that the callback function don't execute when the playing of audio get finished.
Here is the code that I am using :
function startPlaying()
{
Wami.startPlaying(playBackUrl, startfn, finishedfn, failedfn );
}
function startfn()
{
alert('start');
}
function finishedfn()
{
alert('finish');
}
function failedfn ()
{
alert('failed');
}
Initially I am calling the startPlaying(), which starts to play the audio file.
Even when the audio get over the finishedfn does not get called. Is there a bug in Wami Recorder ?
I have even tried by changing the definition of function like.
var finishedfn = function ()
{
alert('finish');
}
But this has not helped me either.
There is hardly any help available for Wami on Google/Stackoverflow. :(
Wami includes the helper function Wami.nameCallback to allow you to pass callbacks. As Garland noted, the flash object actually takes strings. You can use the nameCallback function to convert your callbacks into strings. If you look at the included gui.js file you'll see this in action.
Here's sample usage:
Wami.startRecording('/myUrl', Wami.nameCallback(function () {
alert('started recording');
}));
I know this is a pretty late response, but I just came across the same problem and thought I should share, on the off chance you still need to know, and hopefully to save anyone else a bit of time.
The JS function Wami.startPlaying() calls the same function inside the Flash WAMI object, which takes the following parameters:
url:String,
startedCallback:String = null,
finishedCallback:String = null,
failedCallback:String = null
As you can see the 3 callback functions actually take strings (not raw functions), so to successfully get the callback you need to pass call
Wami.startPlaying(playBackUrl, "startfn()", "finishedfn()", "failedfn()");
In my app, I call the function init() upon loading a script file in index.html. The following code should verify whether cordova has succesfully loaded (for modern phones but specifically also for older BlackBerries) and subsequently call the onDeviceReady function.
I adapted the code from "20 Recipes for Programming PhoneGap" by Jamie Munro, but it didn't work properly (intervalID was only locally available). A later figured out that the onDeviceReady function was called multiple times... I tried several ways to prevent it, but even the below example doesn't do the trick when running in the ripple emulator.
What am I missing?
var count = 0
function init() {
// Add an event listener for deviceready
document.addEventListener("deviceready", onDeviceReady, false);
// Older versions of Blackberry < 5.0 don't support
// PhoneGap's custom events, so instead we need to perform
// an interval check every 500 milliseconds to see whether
// PhoneGap is ready. Once done, the interval will be
// cleared and normal processing can begin.
intervalID = window.setInterval(function() {
if (window.cordova) {
window.clearInterval(intervalID);
onDeviceReady();
}
}, 1000);
}
function onDeviceReady() {
if(count == 0) {
count += 1;
alert('The device is now ready');
}
}
Ripple seems to load the page once to capture the URL and then loads it again within an iframe to display it on the simulated phone. So two copies of everything get loaded but into different documents. Since I get two events for everything including button clicks, it seems that both copies of my code receive the same event. Or maybe Ripple duplicates it for the other one. But with the code being in different documents and different scopes, they don't seem to interfere with each other (at least they haven't for me YET). Perhaps someone else can give a better, more knowledgeable explanation of what I think I detect.
I built a player on top of videoJS and I'm having trouble accessing public functions inside videoJS .ready(). The thing is that my code appears to be working everywhere except IE (works in chrome, safari, ff, etc.):
var myPlayer = _V_('myvideojsId');
myPlayer.ready(function() {
var player = this;
player.myPublicFunction = function() {
alert("hey!");
}
});
myPlayer.myPublicFunction();
In IE I get
Object does not support this property or method
on the myPlayer.myPublicFunction() line. Are the other browsers letting me get away with bad code or is this IE's fault?
Any help would be great, thank you!
Chris
Referencing their documentation, it shows exactly what Jonathan has said:
https://github.com/zencoder/video-js/blob/master/docs/api.md#wait-until-the-player-is-ready
He's right about IE by the way. As much as we all love to hate it, it has found real issues for me many times.
Just for quicker reference, here's an alternative to your method to getting this done:
_V_("example_video_1").ready(function(){
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
This is likely a problem with timing:
myPlayer.ready(function() {});
myPlayer.myPublicFunction();
Your first line here hands off a function to myPlayer to call whenever the player is ready. This doesn't happen immediately in most cases, so there is most likely a delay. This means your public function isn't added to the myPlayer object immediately, but rather this task will be accomplished whenever the video player is ready.
All of this means that when JavaScript moves on to the second line, the appropriate response from a browser is that the method doesn't exist - because it doesn't. It won't exist until the video player is ready, which isn't until later.
You could use more of a feature-detection approach, and only call the method if it exists:
if (myPlayer.myPublicFunction) {
myPlayer.myPublicFunction();
}
You could also just add the method before-hand:
myPlayer.myPublicFunction = function () { alert("Foo"); };
myPlayer.ready(callback);
myPlayer.myPublicFunction(); // 'Foo'
In the end, I've found that Internet Explorer is not as forgiving (which is good) as some other browsers. If it's acting up today, it's likely because there's a problem in the code.
I am trying to call a method of a javascript from the actionscript using the ExternalInterface.
Here is the code in action script
private function onKickEvent(e:LogoutEvent):void{
ExternalInterface.call("LoginFound","message");
return;
}
And this is my javascript mwthod
function LoginFound(message){
alert(message);
anotherInstanceExists=true;
}
Everything is working fine, but the only thing is when act on the alert box which is shown in the javascript after some 20 secs, the exception is thrown from the flash player that a script has been running longer than expected time 15 sec.
How can i avoid this?
Best way to fix this issue is to add setTimeout inside your javascript on the alert line.
It should look like this:
setTimeout(function(){ alert(message) }, 1);
By doing it this way execution won't stop because of the alert.
When you call js function from the actionscript, that function have to work and return value not longer than in 15 sec. Javascript works in single thread,and when you call LoginFound function, alert stops farther executions on the thread.
function LoginFound(message){
alert('something');
//Nothing will be executed unless `alert` window will be closed
}
However you can handle such situation (the execution,which is longer than 15 sec) in Actionsript by using try/catch:
private function onKickEvent(e:LogoutEvent):void{
try{
ExternalInterface.call("LoginFound","message");
}catch(e:Error){
//Do something
}
}
I think your onKickEvent is called frequently
so that the javascript is called regularly. finally the browser timeout event
occurs. It always happen in recursive function.