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!
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.
It works fine in Frameless on iPhone but not in Safari
Ken MP4 in frameless? What encoding?
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.
I was using a .mov file I believe, FWIW.
I have tried MOV and MP4 (both using H264)
It didn't work in Frameless either?
Both works on Frameless but would like to add the prototype to home screen
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.
Thanks Blaine Billingsley may be SVG animation is the only way out
Apple documentation said you can use other button to trigger video playback, will do some test anyway
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
There is a way to call frameless from the browser, though Frameless would need to have URLSchemes implemented to work.
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
then once the user clicks that button, you can show your prototype and autoplay videos
Andreas Wahlström great idea - I will look into this. Thanks!
Replaced the video layer with SVG animationhttp://share.framerjs.com/c0d6ji36v2aq/
Out of curiosity, what tools did you use to create your SVG animation?
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
Then you're just
frameless = require "frameless"frameless.redirectMobile()
in your prototype and it's all taken care of
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.
SVG graphics are created in illustrator and use animateTransform to animate in Framer