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

What is Framer? Join the Community
Return to index
Peter Ng
Posted Feb 04 - Read on Facebook

thanks for the tips with video layers Koen Bok Jorn van Dijk, but my suspicion was correct that mobile browsers suppress non user initiated video playback. Back to using gifs to making it work on device? or perhaps an imageSequence layer might work best for ae to framer.

30 Comments

Cemre Güngör

search for my post earlier about videos

Peter Ng

your seo isn't that good, more keywords to give besides cemre, video?

Andreas Mitschke

with AE you mean AFX ? It's actually a really questionable practice to use that for interaction design as AFX has no limits. You easily find yourself pushing above the possibilities of the web or of mobile OS falling into the "overpromising" dilemma. It's another question if you constrain yourself to basic motions.

I write an article about "overpromising motion prototypes" in near future.

I didn't find that post either Cemre, but I remember something been posted about this issue today.

John Anthony Evans

According to Apple Peter is right. Safari enforces the behavior that videos do not play inline or played without user intervention. Apparently no data is even loaded until a user specifically interacts through a tap on the screen.

One can override this behavior using a custom UIWebView apparently, to get video to play inline one needs to use the flag 'webkit-playsinline' set to yes.

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Peter Ng

thanks John Anthony Evans. making sidecash as support calls for framer?

John Anthony Evans

I find answering questions a good way to learn :)

Peter Ng

Ok but for real, my guts tell me to just either render a gif or make an image sequence player instead of hack around html5 videos on mobile

John Anthony Evans

What's the actual goal?

Peter Ng

just hacking to get a good workflow for importing specialized animations in ae into framer protos ON DEVICE. I have another hack where I set a draggable layer that modulates to a specific frame in a mov (you can start to do really crazy paged transitions without spending the time to author it in coffee). But again the biggest downfall has been performance + inability to put it on device.

Mike Feldstein

I can build you a protokit with the plays-inline flag if you want.

Peter Ng

love you Mike Feldstein! src: https://www.dropbox.com/s/x6ospepm69psy65/sms_loop.framer.zip?dl=0 I think from my quick googling it might require you to "add to home" first. worth a shot though... http://stackoverflow.com/questions/17090906/webkit-playsinline-video-tag-attribute

John Anthony Evans

Do you have Xcode Peter? I have a working Xcode & Framer project that does the inline video on device. Which you can get from here.

https://www.dropbox.com/sh/vuqx8wi9i98cufm/AAC4j86zADMwKgFKoPHuFR_xa?dl=0

Koen Bok

Jay Stakelon should also add inline playback to Frameless if possible :-)

Peter Ng

John Anthony Evans yup just compiled it in xcode mike also pushed an update to prokit that allows video to autostart. However it'll do really wacky things like throw you in fullscreen video mode and show the play button when stopped or paused (apple says this will happen only on iphones not ipads or osx)

Cemre Güngör

uh I wish I could find my original post. robyn made a modification that made these all possible.

John Anthony Evans

Peter if you use the framer example in the link above you will get inline and auto play on your iPhone. You need some specific flags in both the uiwebview _and_ framer.

Peter Ng

o whoops didn't see the setAttribute. thanks!

John Anthony Evans

Also only works on iOS devices. The iOS simulator in Xcode doesn't seem to do video for me. Good luck.

Peter Ng

yup up and working now thanks guys. i also suggest defaulting to auto preload in the next framer push otherwise you're gonna get empty videos for a split second on device. msg.player.setAttribute("preload", "auto")

Mike Feldstein

The framework should probably have some Util.preloadVideo("path/to/video.mp4") so that it can preload videos that haven't been instantiated yet (like yours, which aren't created until you click the textfield)

Mike Feldstein

Andreas Mitschke while i agree that you can get carried away with After Effects, I think it's important to have people doing experimental and ambitious stuff, otherwise things will just always look and feel the same. Anything's possible, even if it requires the engineer to write a new animation system (see android's (peters) material design). Overpromised for sure, but eventually delivered. Reach for the stars and all that.

Peter Ng

Not into the over-promising concept cause that seems like just giving up in design life. But on a less trolled note yea there's a whole set of shit you probably wouldn't want to waste time authoring in framer and that's better suited to be isolated in ae and then hacked into framer. This message sending is a good example of having to animate a circle on a specific bezier path and animating the 4 points of a circle into a 8 point message bubble while tinting the color. And what it took to choreograph x and y and scale and color on different interpolation curves and timing probably would have had crazy diminishing returns in framer. But i for one am excited about doing some crazy mashups between framer and ae (ray traced shadows, crazy perspective, or super complex and intricate tweens)

Mike Feldstein

Those animations should be built in ae and then the key frames should be exported to json and imported to framer/cocoa

Jay Stakelon

Koen Bok thanks for the PR man! Good call

Zoltan Ray

Peter Ng, ever get this working on Android?

Peter Ng

Nope, i kinda gave up on it on mobile and just did it in framer layers and some slight of hand.

Peter Ng

o lame gifs dont' work on comments?!! http://i.giphy.com/yoJC2FAu3MCVzU3dew.gif

Koen Bok

We're looking into if we can solve this in a custom Android client.

Read the entire post on Facebook