HTML5 Animation using CreateJS doesn't work with iPad - html

I'm working on an animation using CreateJS and spritesheet, but I don't understand why that don't work with iPad.
That works fine with Chrome browser.
The CreateJS framework should work with iOS.
You can find my code here:
Link no more available
Do you have any idea?
Otherwise, do you have any other solution to create HTML5 animation for iPad from the web?
In addition, I need to add sound to this animation with synchronization with the animation, so the animation must not lag, I need perfect performances.
Thanks.

Sorry, my first answer was not helpful. I took a deeper look here, and the issue is probably because of the size of the PNG. Your PNG is currently 4096x2048, which is double the acceptable size for iOS.
Ensure your images are less than 2048x2048 - you can use Zoë to export them from Flash, which will give you multiple images.
http://createjs.com/zoe
Cheers.

Related

Is it possible to speedup animations on Chrome?

I'm playing a web game on Chrome, and this game has some pretty slow menu animations.
As far as I know this game is made in html5.
I would like to know if somehow there is a way to increase the framerate on Chrome so the animations on the game would go faster.
Thanks.
Disabling hardware acceleration on Chrome setting could somehow help.

mobile html5 videos using sprites

The new FB paper app website has html5 videos when seen from a non-mobile device.
A video like effect is achieved on the mobile website (tried on iOS browsers) using some kind of weird sprites.
Does anybody know how to implement that?
I think that used a method originally used by Apple.
Take a look at this

Html5 video tag inline at iPhone and iPad issue in iOS6

Is that no way to do it? I have a site want to build to using video for background, iPad runs perfect but iPhone's not.
Then I found out the problem is iPhone safari handle the inline html5 video by default full screen, some people said it could override by html5 settings with webkit-playsinline option, but I tried and no effect on the problem.
And I also found this link:
HTML5 video player behavior on iPhone and iPod in Safari Web Apps
The answer said the behivaor cannot be change even using the webkit-playsinline on it.
It that true? And if yes, are there any way to do the inline video in iPhone?
Thanks!
With iPad you can disable inlineMediaPlaybackRequiresUserInput in Objective-C for a web view.
On iPhone, Apple doesn't allow this option at all, so your at a loss on iPhone.
A workaround is a bit old-school, but you could use an Animated gif.
You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
I wrote a module that takes care of playing the video and synchronizing it to the audio (but it also works on videos without a sound track): iphone-inline-video
Keep in mind that this still needs a "touch" to start, so it won't autoplay like on desktop.

webApp on ipad safari close suddenly

Im developing a html5 webApp for iPad and when I open it with Safari, this quit suddenly.
I'm using RoyalSlider plugin and I think the problem may be there since I'm using multiple instances but I don't know which is the specific problem and can´t solve it!
When I just use one instance there is no problem but I really need to use multiple instances of the slider.
Has anyone had similar problem?
When a browser crashes due to rendering content of a web page it is a browser bug. Even if the content is invalid the browser must handle that.
I have no idea about iPod and iPad and iGod stuff, but maybe also on those systems there is the possibility to launch the browser from the command line instead of clicking a button? This is usually the first step to take when trying to find out why some application crashes.
I have experienced crashing issues with iPad Safari and lots of large, hardware accelerated images, particularly on the first generation iPad. From a quick look at the Royal Slider homepage, it looks like they use hardware acceleration on iOS, though I don't know how they have it implemented.
When I encountered this problem it was because I was using a -webkit-transform: translate3d(0,0,0) effect to trick the iPad into hardware accelerating a div full of large images. The page would crash on load, but I was able to make it work by being more selective about which images I was trying to get the iPad to hardware accelerate at any given time. You might start by looking through the Royal Slider CSS to see how it's manipulating the images. Hope this helps!

HTML5 Canvas compositing (source-in)

I am trying to recreate a page flipping type animation in HTML5 using canvas. The animation is based on ideas from this page. But that's not really important. The problem I am having is that using the 'source-in' composite operation is not giving me the results I expect and would like clarification as to why. I think it only works on chrome, not working on FF 3.6.
The black rectangle is supposed to act as a 'mask' for the page being turned over. All I want to see is the turning page in the areas where it overlaps the mask. The problem is the entire black rectangle is drawn, not just the area where they overlap.
I know HTML5 isn't really being used yet, I'm just experimenting for my personal site and curiosity. Any ideas would be greatly appreciated.
Canvas Compositing support was broken and might still be incomplete in some browsers.
Compare the images here
with the actual rendering in your browser to see what works in which browser right now.