Media playbar for HTML5 animation

Hi.

Here is a sample. I hope it helps.

Preview:

https://bit.ly/2VUeAwN

JavaScript code (just put it in the first frame of the FLA and change the player and target instance names):

	var root = this;
	var player;

	root.start = function()
	{
		document.body.style.backgroundColor = "black";
		player = new root.MovieClipPlayer( { player: root.player, target: this } ); // target is the Movie Clip instance you want to control
	};

	if (!root.frame0Started)
	{
		root.MovieClipPlayer = function(props)
		{
			this.player = props.player;
			this.target = props.target;
			this.start();
		};
		
		root.MovieClipPlayer.prototype.start = function()
		{
			if (this.isMobile())
				createjs.Touch.enable(this.player.stage);
			
			this.player.stage.mouseMoveOutside = true;
			this.mouseDown = this.player.on("mousedown", this.mouseDownHandler, this);
			this.pressUp = this.player.stage.on("pressup", this.pressUpHandler, this);
			this.tick = createjs.Ticker.on("tick", this.tickHandler, this);
		}
		
		root.MovieClipPlayer.prototype.mouseDownHandler = function(e)
		{
			if (this.player.contains(e.target))
			{
				if (e.target === this.player.bar || e.target === this.player.playHead)
				{
					this.paused = this.target.paused;
					this.dragging = true;
				}				
				else if (e.target === this.player.playPause || this.player.playPause.contains(e.target))
				{
					if (this.target.paused)
						this.target.play();
					else
						this.target.stop();
				}
			}		
		};
		
		root.MovieClipPlayer.prototype.tickHandler = function(e)
		{
			this.mousePos = this.player.globalToLocal(this.player.stage.mouseX, this.player.stage.mouseY);
			this.ratioX = this.mousePos.x / this.player.bar.nominalBounds.width;
			
			if (this.dragging)
				this.target.gotoAndStop(Math.floor(this.target.totalFrames * this.ratioX));
			
			this.player.playHead.x = (this.target.currentFrame / this.target.totalFrames) * this.player.bar.nominalBounds.width;
			this.player.playPause.gotoAndStop(this.target.paused ? 0 : 1);
		};
		
		root.MovieClipPlayer.prototype.pressUpHandler = function(e)
		{
			this.dragging = false;
			
			if (!this.paused)
				this.target.play();
		};
		
		root.MovieClipPlayer.prototype.isMobile = function()
		{
			return createjs.BrowserDetect.isWindowPhone || createjs.BrowserDetect.isIOS  || createjs.BrowserDetect.isAndroid  || createjs.BrowserDetect.isBlackberry;
		};
		
		root.start();
		root.frame0Started = true;
	}

Code / source / FLA:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/movie_clip_player

Regards,

JC