Copy link to clipboard
Copied
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?
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
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
There is zero chance that changing the CreateJS library would fix things. HTML5 Canvas components are implemented as jQuery UI components.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Hi,
I am having the same problem but with .webm video. The differences between v19 and v20 are:
Generated HTML:
Generated JS:
Video Component directories:
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.
Copy link to clipboard
Copied
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;
}
}
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Thanks Mohan, this worked. After I converted the video component to a movieclip the mp4 does play as expected.
Thanks!
Copy link to clipboard
Copied
try adding this in the _tick function of the corresponding js file
function _tick(evt) {
this._lastAddedFrame = this.parent.currentFrame;
//......
}