Develop Reference

Cordova currentTime in HTML5 video

I'm developing a Cordova app for Android and I need to put a video with some cue points controlled by buttons.
In the HTML, I have the code to load the mp4 file and the buttons. With JS I'm trying to add the cue points on a click event, but any number I put in the currentTime property, always starts from the beginning of the video. Instead of start from the point I have put.
The code I have is:
document.getElementById("video").load();
document.getElementById("video").addEventListener('loadedmetadata', function() {
document.getElementById("video").play();
document.getElementById("video").currentTime = seconds;
}, false);
I tried to change the order of the lines, because I read something over there but no results.
EDIT:
Still no results, now I'm with this:
document.getElementById("video").currentTime = seconds;
document.getElementById("video").play();
But does the same as the others.
Anyone can help?
Thanks.

It was because of the frame rate.
The video I was trying initially had 30 and I tried with one of 24 and it worked.

How to distinguish between two "onpause" events - caused by clicking “pause” button, and caused by reaching the end of a media fragment?

If the user wants to stop the HTML5 media, for example by clicking “pause” native control button, we get "onpause" event.
At the same time, if media element reaches the end of the specified fragment, it triggers the same "onpause" event automatically. Is it possible to separate one from another? In JQuery style,
<video id="video1" src="url/video.webm#t=10,20" controls></video>
<script type="text/javascript">
$(window).load(function () {
$('#video1').on("manualpause", function () {
alert("you paused this media manually!");
});
$('#video1').on("fragmentend", function () {
alert("you've reached the end of the fragment! your media is now paused automatically!");
});
});
</script>
I tried to make use of "ontimeupdate" event, but refused: I want to react exactly when an automatic pause (caused by reaching the end of a fragment) takes place.

An ended event will only be issued when the complete track has finished. When you play a fragment it will only pause the track at the end of the fragment as the track itself has not ended (unless the end time for the fragment happened to be the end as well).
A media element is said to have paused for user interaction when its
paused attribute is false, the readyState attribute is either
HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a
point in the media resource where the user has to make a selection for
the resource to continue.
The ended event will only occur if:
A media element is said to have ended playback when:
The element's readyState attribute is HAVE_METADATA or greater, and
Either:
The current playback position is the end of the media resource, and
The direction of playback is forwards, and
Either the media element does not have a loop attribute specified, or the media element has a current media controller.
Or:
The current playback position is the earliest possible position, and
The direction of playback is backwards.
Source
To detect if the pause event was triggered due to end of fragment you can compare the currentTime with the fragment end-time (and yes, there is a theoretical chance that you could hit the pause button at exactly this time as well, but this will be as close as you get with the audio element unless the event itself has a secret property revealing the source of pause, of which I am unaware of).
Since we're dealing with floating point values you need to compare the time using an epsilon. Assuming you parse or other wise have a way to get the end-time for the fragment, you can do:
function onPauseHandler(e) {
var fragmentEndTime = ...; // get/parse end-fragment into this var
if (isEqual(this.currentTime, fragmentEndTime)) {
// likely that fragment ended
}
else {
// a manual pause
}
}
function isEqual(n1, n2) {
return Math.abs(n1 - n2) < 0.00001
}

This came up for me today when searching for "why does onpause also fire when onended occurs". I wanted to separate the logic between an onpause event and on onended event.
This was my take on it:
videoRef.onpause = (e) => {
if (e.target.currentTime != e.target.duration) {
// handleOnPause();
}
}
I have both onpause and onended handlers registered, with onpause running code when it's not at the end of the video.

Flash CC Canvas HTML5 Element adding interactivity in Timeline

I've been trying to solve this for several time, but I'm now pointless with this situation. I'm creating a HTML5 canvas project in Flash CC, I'm kinda new in JS (not difficult BTW), the point is, I have around 10 keyframes inside my main timeline, and some classic buttons, all I need to do is to navigate inside every frame when a button is pressed (pretty easy uh!) the trouble is, the first frame works perfectly, but from 2 to the others, I can't be able to use buttons, interactivity is being programmed as follows:
var self = this;
this.stop();
this.btn4.addEventListener("click", clickUno);
function clickUno() {
self.gotoAndPlay(1);
}
Any help will be really appreciated, I just don't know why 1st frame works great, but others doesn't!

I had similar issues with canvas with flash.
I needed to created completed new buttons on every instance you need a button to get code to work. (ODD I know.)
Button code.
this.getinsideIt.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_9.bind(this));
function fl_ClickToGoToAndPlayFromFrame_9()
{
this.Mygreatmovie.gotoAndPlay(350);
}

As I understand, you need a button, clicking on which proceeds your animation 1 frame at a time. Correct?
You should make use of the currentFrame and totalFrames properties of the main stage for this. Query the current frame and move on to next!
var self = this;
this.stop();
if(!this.btn4.hasEventListener("click", clickUno))
this.btn4.addEventListener("click", clickUno);
function clickUno(e) {
var curr = self.currentFrame;
var total = self.totalFrames;
self.gotoAndStop((curr + 1)%total);
}

Setting GIF loop count and publishing stop event using JavaScript

Is it possible to set the loop count of a GIF image using JavaScript and then publish an event when it stops playing?
For example something like:
//html code
<img src="myImage.gif" id="img1"/>
//Javascript code
var image = document.getElementById('img1');
//Image must stop playing after 3 loops
image.setLoopCount = 3;

here is how i would suggest doing it:
extract frames form gif file (you can do it online using for instace -> http://imgops.com/)
use javascript to change pictures, simulating animation (that way you can keep track of how many loops you have done)
Here is a jsFiddle link http://jsfiddle.net/qustosh/n5zWH/9/
I used jQuery. I did three loops and i threw a callback function at the end.

For a design side solution, you can set the GIF image to only loop a certain number of times with Photoshop. Then just use window.setTimeout(callback, milliseconds) to trigger your custom event.
You can calculate the time out from the interval used to display each frame of the animation.

How do you check if a HTML5 audio element is loaded?

I am wanting to know how to check if a HTML5 audio element is loaded.

To find out when the audio is ready to start playing, add listeners for the oncanplay or oncanplaythrough events. To find out when the audio has loaded at all, listen to the onloadeddata event:
<audio oncanplay="myOnCanPlayFunction()"
oncanplaythrough="myOnCanPlayThroughFunction()"
onloadeddata="myOnLoadedData()"
src="myaudio.ogg"
controls>
Download
</audio>
<script>
function myOnCanPlayFunction() { console.log('Can play'); }
function myOnCanPlayThroughFunction() { console.log('Can play through'); }
function myOnLoadedData() { console.log('Loaded data'); }
</script>

Check out robertc's answer for how to use event listeners. You can also directly check an audio element's ready state:
var myAudio = $('audio')[0];
var readyState = myAudio.readyState;
readyState will be a number. From Mozilla's docs:
0 - No information is available about the media resource.
1 - Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception.
2 - Data is available for the current playback position, but not enough to actually play more than one frame.
3 - Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).
4 - Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.

Another option is networkState:
var myAudio = new Audio(url);
var networkState = myAudio.networkState;
networkState is a helpful companion property to the previously mentioned readyState, and can be handy in certain contexts where readyState might fall short, such as discerning whether or not a file is likely going to load at all. This can be done by checking it at set intervals.