MP4 doesn't play in Video Component in Animate 2020

[ghaakonson]

When I publish my HTML5 canvas in Animate 2020, the video component on the timeline won't play the linked mp4 file. This worked for me in Animate 2019. I re-downloaded Animate 2019 to try it again, and it does work once again when the HTML5 canvas is published from Animate 2019.

Has anyone experienced this, or have a solution for making this work while publishing in 2020?

[GoryGreg]

Hi,

I found this too. So (if you can) maybe Publish from Animate CC 2019 to see if it works again or in your HTML page change the script line <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>  to this line <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> , as I am wondering if it has something to do with that?

Hope this helps?

[ghaakonson]

Thanks for the reply, unfortunately changing the script src line from the html published from 2020 still didn't result in the mp4 file playing.

I did download 2019, publish the file, and everything works as it did prior to the 2020 update. But still wondering why it doesn't perfrom as it should when published from 2020.

[ClayUUID]

There is zero chance that changing the CreateJS library would fix things. HTML5 Canvas components are implemented as jQuery UI components.

[GoryGreg]

Good to know, cheers!

Any suggestions/solutions that we might be doing wrong or is it possibly another Adobe update bug? To me if it worked in 2019 then it should hopefully work in 2020 and why I am leaning towards an update bug with this component.

[dmontz]

Hi,

I am having the same problem but with .webm video.  The differences between v19 and v20 are:

Generated HTML:

• createjs - updated from 2015.11.26 to 1.0.0 release
  • includes update from createjs.Ticker.setFPS() to using the framerate property

Generated JS:

• jquery - updated from 2.2.4 to 3.4.1
• uses StageGL instead of Stage
• includes update from exportRoot.getStage() to exportRoot.stage property

Video Component directories:

• The only differences is the components/lib/jquery library is the newer version

The other thing that I noticed is that I can create a new HTML5 canvas project with only a single frame on the timeline, add the video component to the single frame, publish and it works.  If you change anything after that:  add additional frames, move the keyframe around in the timeline, etc, then the video will not play and I never see the video element injected into the timeline like I did for v19.

This looks like its an bug that Adobe needs to fix.

[dmontz]

I've been doing some more debugging and think that this issue may be due to the change in CreateJS's MovieClip.added event behavior.

In v19, the added() event handler is called for every frame which updates $this,_lastAddedFrame to the current frame.  In v20, the added() event handler is only called on frame 0.

(lib.an_Video = function(options) {
    this._element = new $.an.Video(options);
    this._el = this._element.create();
    var $this = this;
    this.addEventListener('added', function() {
        $this._lastAddedFrame = $this.parent.currentFrame;
        $this._element.attach($('#dom_overlay_container'));
});
}).prototype = p = new cjs.MovieClip();

The this._lastAddedFrame is then checked in the _updateVisibility() function.  If the this._lastAddedFrame is not equal to the currentFrame, then the video element is detached (aka removed from the DOM).

function _updateVisibility(evt) {
    if((this.getStage() == null || this._off || this._lastAddedFrame != this.parent.currentFrame) && this._element) {
        this._element.detach();
        stage.removeEventListener('drawstart', this._updateVisibilityCbk);
        this._updateVisibilityCbk = false;
    }
}

[Mohanaraj · Accepted solution]

Hi,

We are currently investigating this issue. In the mean time, can you put the components under a movieclip(select the component on stage and convert it to a movie clip symbol) and see if that helps in your case?

Thanks!

Mohan

[ghaakonson]

Thanks Mohan, this worked. After I converted the video component to a movieclip the mp4 does play as expected.

Thanks!

[jaswant singh ranawat]

try adding this in the _tick function of the corresponding js file

function _tick(evt) {
	this._lastAddedFrame = this.parent.currentFrame;
        //......
}