Building a Video Player in ES5JS using the HTMl5 Canvas API

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>
1 Like

ok… and?

You’ve given us your code, and a statement of intent.

What’s gone wrong? What exactly do you need help with?

1 Like