Last active
August 29, 2015 14:08
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// 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