Autoplay ios Animate HTML5

[DerEwige]

Good day

I have an interactive game that plays mp4 movies inserted by video componente.

With the exception of IOS (iphone) it works.
With IPhone only the first frame of the video is shown.
The user had to already actively click on the web page to
to get to the videos.

Is there an easy way to start the video via a button?
(Controls are shown but do not work).

I would be very grateful for any help.

Translated with www.DeepL.com/Translator (free version)

[JoãoCésar]

Hi.

It's really a battle to make videos run properly on iOS. There are a few things you can try, like adding the playsinline attribute to the video tag. And apparently the "low power mode" can influence too.

Please checkout the answers in the link below:

https://stackoverflow.com/questions/43570460/html5-video-autoplay-on-iphone

I hope someone else can give you a better answer.

Regards,

JC

[DerEwige]

Hi, thanks for the answer

Unfortunately I am too stupid to install the playsInline correctly.
Could someone help me there? Thank you.

Here is the js that Animate creates where I tried to add the playsInline. But it does not work.

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

[Scanu0D45]

Hi, did you find a solution?

[webrockx]

Hi there,

Thanks for this important post - I have exactly the same problem with Animate CC.

Description:

My problem concerns the implementation of a video, that has to be combined with follwing Text & Logo-Animations. Importing the MP4-Video works properly. After the video an animated Headline, Logo and Text-Slides appears. This works properly on Desktop-Devices, but the auto-play function for the video does not work on iPhone, neither iPad. Is there a workaround for Adobe Animate CC? I found some work-arounds (playinside, mute, etc.) for HTML5-Videos, that embeds the video in the HTML-File in Video-Tags, but Animate embeds the video in the Javascript Code. There this work-arounds does not work.

Thank you for an answer - I would appreciate your support.

[kglad]

@webrockx 

you have a canvas project that auto-starts a video without requiring user interaction (eg, mouse click)?

[webrockx]

Yes, ist auto-starts a video without requiring user interaction (eg, mouse click). This works properly on Desktop-Browsers but not on iPhone/iPad. Trying to fix this with some (playinside, mute, etc.) does not help, for the video code is in the Java Script File.

Thanks for helpful answers.

[kglad]

impossible. 

you mean, like the op, you prompt user interaction earlier in your project and when the video's displayed, you want it to autostart.

if so, that's going to require a work-around for ios. eg, when the user clicks, start your video, mute it and disable its visibility and then when desired

unmute

enable its visibility

and start it playing with currentTime = 0; 

[webrockx]

Hi kglad

No user interaction - the video should start playing autmatically (autoplay) when den website ist loaded.

Thanks for support.

Kind regrds.

Johannes

[kglad]

impossible if there's sound, and perhaps even without sound.

[webrockx]

There is no sound. Maybe you could have a look at the code?

// stage content:
(lib.KlavierspielerAni524fps = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
	var props = new Object();
	props.mode = mode;
	props.startPosition = startPosition;
	props.labels = {};
	props.loop = loop;
	props.reversed = reversed;
	cjs.MovieClip.apply(this,[props]);

	// Video_Kopie
	this.instance = new lib.an_Video({'id': '', 'src':'videos/Klavierspieler_V01-cut.mp4', 'autoplay':true, 'playsinline':true, 'controls':false, 'muted':true, 'loop':true, 'poster':'', 'preload':true, 'class':'video'});

	this.instance.setTransform(100,100,0.5,0.6667,0,0,0,200,150);
	this.instance._off = true;

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(4).to({_off:false},0).wait(190).to({_off:true},1).wait(249));

	// Video
	this.instance_1 = new lib.an_Video({'id': 'instance_1', 'src':'videos/Klavierspieler_V01-cut.mp4', 'autoplay':true, 'playsinline':true, 'controls':false, 'muted':true, 'loop':true, 'poster':'', 'preload':true, 'class':'video'});

[kglad]

it's not going to be a coding error if your app works for desktop browsers.  it's going to be an ios limitation that you need to work around, as explained above.

[webrockx]

Yes thats clear, but not very helpful.
The description above, as far as I could see, contains not a solution for this problem.
Maybe I am wrong, then correct me please. Could you show me, where the solution for this issue is to find in the disusion above?
This would be great, thank you.

[kglad]

i posted a solution.

[webrockx]

Hi kglad,
Thank you for answerimg.
Where can I find your posted solution?

KInd regards

[kglad]

when the user clicks, start your video, mute it and disable its visibility and then when desired

unmute

enable its visibility

and start it playing with currentTime = 0;