Is there a way to detect end of Flash movie (OOTB, without using some sort of flash callback).
Alternatively, is there a way to know the length of the movie?
Update:
IsPlaying() looked promising (periodically checking it), but as it turns out, nobody is creating straight forward swfs any more; now, the content is embedded in main layer and while the content plays, the main movie is stopped and IsPlaying is always false...
var movie = window.document.movie
if(movie.TCurrentFrame("/") == movie.TotalFrames())
alert("Movie Finished");
or you could have:
if (!movie.IsPlaying())
alert("Movie Stopped");
but thats not really what you're after.
import fl.video.VideoEvent.COMPLETE
video.addEventListener(VideoEvent.COMPLETE, alertHTML);
function alertHTML(e:VideoEvent):void{
ExternalInterface.call("alert(\"Video has stopped\");");
}
Give that a shot. You can replace the alert(\"Video has stopped\"); with your client-side javascript function.
You can chceck for movie length with ffmpeg -i movie.flv 2>&1, but i doesnt' tell you:
how long it takes to load the video and start playing
whether the user has hit the "pause" button.
Right now, the only way is to attach some javascript handlers to Flash events as other posts suggest.
Related
I am making a chrome extension that needs to know if a YouTube video is being played, paused, had a duration change, and if it is on an ad. I figured out how to do everything except knowing if it is on an advertisement. I found this post which was of some help, however, if I were to put this in my content script it would only run once and I want it to constantly check if there is an ad (since ads can happen in the middle of a video.
I am fairly new to Javascript, but I do understand the concepts of listeners and I would use a listener in this case, however, I do not know how to do that in this case because the div does not emit an event, it either exists or is null. Are there any other ways of doing that?
+1 to looking at YouTube video API events. Here's that page [0].
I haven't tried this myself, but I would start with the onStateChange event, because I suspect that an ad is a separate video from the desired video content itself. So there could be two "video cued" or "5" values fired. But, again, I haven't tried it myself. Good luck!
[0] https://developers.google.com/youtube/iframe_api_reference#Events
You can also use setInterval to detect ads continuously. This is a way without having to looking for API.
// According to the post you provided
function detectAds() {
return !!document.querySelector("div.ad-showing");
}
let timer;
function listen() {
timer = setInterval(function () {
if (detectAds()) { /* do something */ }
}, 1000); // runs every second
}
function unlisten() {
if (timer) clearInterval(timer);
}
Actually this the first time I'm gonna use jplayer plugin, so all I need is to play a sound clip (2 sec) when I click on a div, and I don't know how to use jplayer!
I also need to load the sound clip file in cache as well as the page is loading, so when I click that div the sound clip plays immediately without loading it when clicking
btw, is it possible to do that without using jplayer, jquery maybe?!
If you want to stick with jPlayer, try setting warningAlerts and errorAlerts to true.
$(id).jPlayer( { warningAlerts: true, errorAlerts: true } );
This may solve your problem.
But as long as you only need sound (no video), SoundManager 2 might be a better fit for you. Its really robust and provides extensive debugging output.
soundManager.url = './swf/'; // directory where SM2 .SWFs live
var mySound;
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
mySound = soundManager.createSound({
id: 'someSound',
url: '/path/to/some.mp3'
});
});
//....
//if(xhr-stuff)
if(mySound)
mySound.play();
Use soundmanager2.js for testing and soundmanager2-nodebug-jsmin.js for production. If you have further questions, don't hesistate to ask.
-snip-
scratch that... there's an api
http://www.jplayer.org/latest/developer-guide/#jPlayer-play
Use
$("#jpId").jPlayer("play");
I'm making a HTML5 video player. I want it so that when the movie stops the play these executes
video.pause();
video.currentTime=0;
document.getElementById('message').innerHTML="Finished";
I tried this but it didn't work
function rewsi() {
var video = document.getElementsByTagName('video')[0];
if (video.currentTime==video.duration) {
video.pause();
video.currentTime=0;
document.getElementById('message').innerHTML="Finished";
}
}
Anyone got a solution for this problem?
Problem = My lack of knowledge in JavaScript
Looking at the following question and asnwer:
HTML5 <video> callbacks?
I would assign a callback to be executed when the video has actually ended like so:
var Media = document.getElementsByTagName('video')[0];
var Message = document.getElementById('message');
Media.bind('ended',function(){
Message.innerHTML = "The media file has completed";
});
You also stated that when the media 'stops' you want to pause the video, can you describe your motives for doing that ?
The next on the agenda is the video resetting as such, looks like you want to set the position of the media to the start if the media stops, you must first make sure that your determining that the video has not been paused, as you do not want to reset the position if the user has gone to make a cup of coffee.
If you only want to set the media position when the movie has actually ended then this would be pointless (unless you have a valid reason to do so), the reason it would be pointless is that when the user clicks play after it has ended, the default action html5 media player takes is to set the position to 0.
The above solution should work out exactly right for you.
i will recommend using Kaltura HTML5 Video Library to help you manage the media player.
First, you can check if the video has ended by simply putting a condition on video.ended. Then you can set the time with this.currentTime(0);
I want to seek a flowplayer at the page load.
I have tried:
$(document).ready(function() {
$f(0).seek(5);
});
and
$(document).ready(function() {
while(!$f(0).isLoaded()) {
$f(0).seek(5);
}
});
and
$(document).ready(function() {
$f(0).onLoad(function() {
$f(0).seek(5);
});
});
and this one gave result, for a while
$f(0).onLoad(function() {
$f(0).seek(5);
});
The last one moved the pointer to 5 seconds, and back to the start right after.
I want it to stand there.
Any suggestions?
official answer:
http://flowplayer.org/forum/3/101287#post-101528
looks like I was downvoted for just putting a link, and that is understandable as flowplayer has changed their forum URLS!
https://web.archive.org/web/20120629142246/http://flowplayer.org/forum/3/101287
Here is the OP
Found this old question on stack overflow...
http://stackoverflow.com/questions/5034858/seek-in-flowplayer-on-page-load
Wondering what the official answer is? How do you seek on load?
and the response
The onLoad event (of the player) is to early an event to seek a clip.
So you cannot seek onLoad.
You can seek once a clip is loaded and in play or pause state.
Move the seek in the onStart event of the clip - always assuming that you deploy via a streaming server.
I think in some cases it would help to pause the player, jump to the prefered position and the start again. When you have Flowplayer configured to auto buffer it will start playing and pause at the first frame. That could maybe explain the behavior you are seeing (seek to 5, jump to 0 and jump to 5 again. But I think your fix using the load event pretty well solves it, I've used a similar trick to wait for duration to become available.
Solved it!
Used
$f(0).onLoad(function() {
$f(0).seek(5);
setTimeout('$f(0).seek(5)',1000);
}
Then it seeked to 5, jumped back to zero for some reason, and seeked to 5 again.
[EDIT: Sorry to those who already answered -- in my sleep-deprived state, I forgot that this particular situation is a YouTube movie, not the JW FLV player. I can see that there is more extensive documentation on interacting with YouTube movies, so I will pursue that, but any more information is also welcome]
I am using embedded YouTube videos in a collection of divs that are being rotated by using the jQuery cycle plugin (http://malsup.com/jquery/cycle/).
I would like the cycle to stop when I click on one of the movies to start it playing, but I can't figure out how to attach a jQuery event handler to the player object.
Here's what my current code looks like (you can't directly select an object tag with jQuery, so I select the parent div and then get the object element as the first child):
$("div.feature-player").children(":first").click(function(event) {
$('#features').cycle('stop');
});
But that doesn't do the trick. I'm not a Flash author, so I'm not really familiar with ActionScript, and I've never set up an interaction between JavaScript and a Flash movie before.
The YouTube player API is pretty straight-forward. You just have to listen to the onStateChange event and control the cycle plugin depending on the state:
Here's a working demo: http://jsbin.com/izolo (Editable via http://jsbin.com/izolo/edit)
And the pertinent code:
function handlePlayerStateChange (state) {
switch (state) {
case 1:
case 3:
// Video has begun playing/buffering
videoContainer.cycle('pause');
break;
case 2:
case 0:
// Video has been paused/ended
videoContainer.cycle('resume');
break;
}
}
function onYouTubePlayerReady(id){
var player = $('#' + id)[0];
if (player.addEventListener) {
player.addEventListener('onStateChange', 'handlePlayerStateChange');
}
else {
player.attachEvent('onStateChange', 'handlePlayerStateChange');
}
}
Flash movies are pretty much black boxes as far as javascript is concerned. If the SWF you're using wasn't written to interact with javascript then you're probably out of luck.
You'll either need to figure out what javascript methods the movie you're using exposes (hopefully it has documentation), find another one that does provide javascript interaction, or write your own SWF to handle it.
What you're looking for is the flash ExternalInterface class, which is used for communication from flash to javascript and from javascript to flash.
If you're embedding the player using swfobject you're going to want to use swfobject.getObjectById to get a reference to the movie. Read the docs to see why you need to do this.
Also you'll need to set {wmode:"transparent"} for the player in order for it to bubble up click events to JavaScript.