I want to implement a video player on the html5 canvas using promises.
function VideoPlayer(canvas) {
this._canvas = canvas;
this._player = null;
this._promise = null;
}
VideoPlayer.prototype.load = function (videoUrl) {
this._player = document.createElement('video');
this._player.src = videoUrl;
this._promise = new Promise(function (resolve, reject) {
this._player.onloadeddata = resolve;
this._player.onerror = reject;
}.bind(this));
return this._promise;
};
VideoPlayer.prototype.play = function () {
if (this._promise) {
this._promise.then(function () {
this._player.play();
}.bind(this));
}
};
VideoPlayer.prototype.pause = function () {
this._player.pause();
};
VideoPlayer.prototype.stop = function () {
this._player.pause();
this._player.currentTime = 0;
};
VideoPlayer.prototype.seekTo = function (time) {
this._player.currentTime = time;
};
VideoPlayer.prototype.getCurrentTime = function () {
return this._player.currentTime;
};
VideoPlayer.prototype.getDuration = function () {
return this._player.duration;
};
VideoPlayer.prototype.isPaused = function () {
return this._player.paused;
};
VideoPlayer.prototype.isEnded = function () {
return this._player.ended;
};
VideoPlayer.prototype.getVolume = function () {
return this._player.volume;
};
VideoPlayer.prototype.setVolume = function (volume) {
this._player.volume = volume;
};
VideoPlayer.prototype.mute = function () {
this._player.muted = true;
};
VideoPlayer.prototype.unmute = function () {
this._player.muted = false;
};
VideoPlayer.prototype.isMuted = function () {
return this._player.muted;
};
VideoPlayer.prototype.onPlay = function (callback) {
this._player.addEventListener('play', callback);
};
VideoPlayer.prototype.onPause = function (callback) {
this._player.addEventListener('pause', callback);
};
VideoPlayer.prototype.onStop = function (callback) {
this._player.addEventListener('pause', callback);
this._player.addEventListener('ended', callback);
};
VideoPlayer.prototype.onEnded = function (callback) {
this._player.addEventListener('ended', callback);
};
VideoPlayer.prototype.onSeeking = function (callback) {
this._player.addEventListener('seeking', callback);
};
VideoPlayer.prototype.onSeeked = function (callback) {
this._player.addEventListener('seeked', callback);
};
VideoPlayer.prototype.onError = function (callback) {
this._player.addEventListener('error', callback);
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VideoPlayer</title>
</head>
<body>
<canvas id="player" width="640" height="480"></canvas>
<script src="videoplayer.js" defer async>
var player = new VideoPlayer(document.getElementById('player'));
player.load('video.mp4').then(function () {
player.play();
}).catch(console.error);
console.log(player)
</script>
</body>
</html>