Animate CC html5 canvas mp4 video won't play in chrome

[dean funk]

I have a mp4 video placed with the video component on the html5 canvas, the video starts about 60 frames into the timeline.

The video tests well and plays in Safari, but doesn't seem to work in Chrome. Not sure if there is a issue with my settings in chrome.

any help out there?

[JoãoCésar]

Hi.

Most likely this is an issue related to Google's new policy on Chrome desktop to block unwanted autoplays.

Improving Autoplay in Chrome

Please let us know if this clarifies the issue.

Regards,

JC

[dean funk]

I tried placing the code snippet

this.video_kick.on("added", function() {

    $("#video_kick")[0].play();

}, this, true);

on the timeline where I want the video to play - but that doesn't seem to work -

is there more code that I need?

thanks JC!

[dean funk]

maybe a better question JC

What is the best way to set up a short video to plan in a rich media banner? And what about preloading the video so the video plays down the time line. Like starting at frame 100. I am using your z-index code that you sent me last week. it all works well in safari but this chrome autoplay issue has messed it all up.

I can't find much reference on how to build rich media (mp4) video banners. with the latest Ani CC 2018

thanks in advance

[dean funk · Accepted solution]

check the mute button in the video component works known chrome

but I am still looking for best practices and method for richmedia web banners with mp4s

[JoãoCésar]

Hi, Dean!

Please have a look at this article:

Why Did My Website's Video Banner Stop Working in Chrome? | Drive Marketing

The author shares his best practices to get videos working properly. And the article is very recent.

He also shares the code he uses:

var videoFile = 'https://player.vimeo.com/external/258140699.sd.mp4?s=4e66af3e6843406a65133d127c72cc2c26e4d64f&profil...';
// standard desktop
var videoHTML = '';
videoHTML + = '<source data-cke-saved-src="' + videoFile + '' type =" src="https://www.drivemarketing.ca/admin/'%20+%20videoFile%20+%20''%20type%20=" video="" mp4="" "=""> ';
videoHTML + = 'Your desktop does not support the video tag.';
videoHTML + = '';
$ ("# video-container"). html (videoHTML);
$ ("# video"). on ('loadedmetadata', function () {
    video.play ();
});

Animate CC outputs standard HTML5. So any technique, pattern, library, snippet, and so on should work.

Please let us know if all of this helps you.

Thanks,

JC

[dean funk]

Thanks again JC. Great article.

We live in amazing times, thanks for all the help, I pay forward.

[JoãoCésar]

You're welcome!

[Massimo P.]

it won't play until you set the coponentparameter to MUTE true. Now it should play in chrome, edge and safari...

this.videoinstance = new lib.an_Video({'id': 'videoinstance', 'src':'videos/myvideo.mp4', 'autoplay':true, 'controls':false, 'muted':true, 'loop':true, 'poster':'', 'preload':true, 'class':'video'});

for more questions read:
https://drivemarketing.ca/en/blog/why-did-my-website-s-video-banner-stop-working-in-chrome/