Skip to content

Instantly share code, notes, and snippets.

@dotfold
Last active August 29, 2015 14:08
Show Gist options
  • Save dotfold/c4f6264d27a437f31a85 to your computer and use it in GitHub Desktop.
Save dotfold/c4f6264d27a437f31a85 to your computer and use it in GitHub Desktop.
Some versions of Android don't dispatch a video ended event. Monitor timeupdate and ended events using Rx.js to determine when either one happens.
//
// Android you suck. Some of your versions don't dispatch
// a video ended event. So the player just hangs on the last frame.
//
// Observables from video element events
var timeObs = Rx.Observable.fromEvent(videoEl, 'timeupdate');
var endedObs = Rx.Observable.fromEvent(videoEl, 'ended');
var endOfVideoByTimeObs = timeObs
// only new values please
.distinctUntilChanged()
// transform to the current time value
.map(function(x, idx, obs) {
return Math.floor(x.currentTarget.currentTime);
})
// not interested while it is less than duration
.skipWhile(function(x) {
return x < Math.floor(videoEl.duration);
})
// allow the real `'ended'` event to dispatch with this arbitrary buffer value
.delay(500);
// now we know when a video has ended, whether the `'ended'` event is
// actually dispatched from the video element or by our excellent time
// value comparisons.
endedObs.merge(endOfVideoByTimeObs).take(1).subscribe(
function(x) {
console.log('Signal onNext: value', x);
},
function(err) {
console.log('Signal onError: ', err);
},
function(x) {
console.log('Signal onCompleted.');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment