This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ken Yiu
Posted Apr 07 - Read on Facebook

Created the wave animation in AE and exported as MP4. Put the video on the video layer and it works fine on desktop browser and studio but it can't autoplay on iPhone. Any hints will be great!

http://share.framerjs.com/ori3sr9rzhph/

23 Comments

Josef Richter

Same problem here.. Tried also mov, mpg, flv, various encodings.. The only thing I could achieve is a tappable layer which opens up a video in fullscreen, covering up everything else.

Ken Yiu

It works fine in Frameless on iPhone but not in Safari

Josef Richter

Ken MP4 in frameless? What encoding?

Blaine Billingsley

Yeah, Apple stops the playing of videos inline in pages. Punks. Frameless is the way to go. I also found a way to make it work if the video is like, way bigger than the screen, but it's really inconsistent (like it only plays inline the first time, etc.), doesn't work on iPads, and has to be a lot big so it's really hard to prep the video.

Blaine Billingsley

I was using a .mov file I believe, FWIW.

Ken Yiu

I have tried MOV and MP4 (both using H264)

Blaine Billingsley

It didn't work in Frameless either?

Ken Yiu

Both works on Frameless but would like to add the prototype to home screen

Blaine Billingsley

From what I understand there's no way. :( A motion designer I worked with dug up some documentation about this - Apple won't allow videos to play inline in Safari - any hacks that work are just bugs they haven't fixed yet. We think it's to stop horrible mobile ad experiences, but who knows.

Ken Yiu

Thanks Blaine Billingsley may be SVG animation is the only way out

Ken Yiu

Apple documentation said you can use other button to trigger video playback, will do some test anyway

Andreas Wahlström

Jay Stakelon is there a frameless url scheme we could use to force urls to open frameless? Maybe one could create a prototype that allows you to open in it safari (and save to home screen), but redirects to frameless when opened from the home screen user agent? Just thinking out loud now

Ian McClure

There is a way to call frameless from the browser, though Frameless would need to have URLSchemes implemented to work.

http://stackoverflow.com/questions/25883113/open-ios-app-from-browser

Mike Feldstein

one workaround might be that i think apple will autoplay videos so long as the user has pressed the play button on one video. So maybe overlay a full black video with the play button on top of your prototype as a "start prototype" button

Mike Feldstein

then once the user clicks that button, you can show your prototype and autoplay videos

Jay Stakelon

Andreas Wahlström great idea - I will look into this. Thanks!

Ken Yiu

Replaced the video layer with SVG animation
http://share.framerjs.com/c0d6ji36v2aq/

Chris Camargo

Out of curiosity, what tools did you use to create your SVG animation?

Jay Stakelon

Andreas Wahlström Ian McClure so to revisit opening from the browser I'm going to implement a "frameless://" url scheme in the next version of Frameless along with something like this module which'll deal with redirecting to Frameless from Safari/standalone/either one. Is this what you're looking for? https://gist.github.com/stakes/2b3d72fd55021117d3ff

Jay Stakelon

Then you're just

frameless = require "frameless"
frameless.redirectMobile()

in your prototype and it's all taken care of

Josef Richter

Could we maybe do something like this, if Frameless is not installed, plus add "download Frameless" link? I am sending links to various clients and I cannot explain all of them what is Frameless, how saving to homescreen works, etc. Too geeky for normal clients.

Ken Yiu

SVG graphics are created in illustrator and use animateTransform to animate in Framer

Read the entire post on Facebook