Media playbar for HTML5 animation

[Vinod_India]

Hi Team

I've developed an interactive animation using HTML5 canvas.

I intend to have a media playbar in the animation so that the user can move to his desired portion of the animation at any point in time.

How do I do it?

Regards

[Vinod_India]

Hi

Anybody who can pitch in your views? I'm kinda running short of time and your advice would be really helpful.

Regards

[JoãoCésar · Accepted solution]

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

[Vinod_India]

Thanks for the reply JC!

Will check and revert asap

[Vinod_India]

JC

The playbar works like a charm!! Thanks a ton mate!

Regards

[JoãoCésar]

Excellent! You're welcome!

[Vinod_India]

Hi JC

I've tried to include a sample video. At first it worked well. All of a sudden the playbar does not pause the video.

What am I missing? (the working .fla file is not able to be uploading here for some reason)

Regards

Vinod

[JoãoCésar]

Hi.

The sample provided is for controlling Movie Clip timelines only.

Videos are separate HTML elements that don't live inside of the stage or any symbol. It actually doesn't live inside of the canvas.

To control a video, use a Video Component (Window > Components > Video) and check the controls property.

Regards,

JC

[Vinod_India]

Hi JC

I'll try to explain my project and my requirement better.

My HTML5 project has 2D animation, voices and small videos.

My requirement is, there should be a playbar which controls all (2D animation, voices and videos) together. Also the entire package should respond appropriately for the pause and play button as well.

How do I go about creating such a playbar?

Regards