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
Related
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.
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.
I'm about to create a mobile website using HTML5 and want to use the HTML5 video tag.
I want the website to work with iPhone, iPad, Android and other smartphones/devices.
Which video format should I choose? mp4?
Which size should i use for width and height to get the best result?
Which FPS (frames per second rate) should I use for the videos?
Thanks in advance.
Those are pretty subjective questions, so I'll give you some rather subjective answers:
I have made good experiences (hope others as well) with serving 3 media types: H264/MP4, OGG and WEBM for <video> elements, at least this combination worked fine on all devices I was able to check by now.
In case you also want your video to be displayed inline on desktop browsers I'd say you should use the dimensions that are dictated by your layout. In case you are looking for a mobile only solution, a common resolution for 16:9 content would be 480x270 (that's what Quicktime Pro exports when you select "Save for iPhone"), if you are planning for tablet support as well you might want to serve alternative content for them.
The lower the frame rate, the smaller the file, so you'll have to know by yourself how much filesize matters, the only thing I could advise would be using a full fraction of your original video frame rate (ie. 12.5fps if you want to reduce a 25fps source) as otherwise you'll get jittery drop-frame effects.
Also please see the great video section of Dive into HTML5
I am just starting development on a JQuery Slider that will start with a video, and when the video is done the slider will begin. I'd like for the site to be able to work on both IE9 and lower, and the iPhone, which I assume will require an HTML5 option and a Flash option. I would like the slider to look like this:
http://popstache.com/
with a minimal UI, just the arrows and circles on the bottom allowing for slide selection.
I have been playing with Slidedeck at http://www.slidedeck.com/, and I know that videos can be embedded in it. My main concern right now is the video. I've heard about people using Flowplayer, but I'd rather not pay the $95 to remove the branding, and I do not believe that will work on the iPhone. Any suggestions? Thank you.
MediaFront's OSM Player is completely free.
So is jPlayer.
I have started coding for mobile browsers (i.e. iPad, Galaxy Tab, etc). For a starter, I don't have budgets to get all the tablets for testing (I wish I do :D). Anyway, I am looking for a decent mobile browser simulators. I have looked into Ripple (only works in Chrome), MobiOne, and PhoneGap simulator. But all of these are not that up to par. Can someone recommended a decent one? and it will be great if it is also open source.
Thanks in advance
A good list of emulators and simulators are here: http://www.mobilexweb.com/emulators
For iPad, the only simulator I know of is built into XCode when you compile or run. You have an option of previewing in iPhone or iPad, and though the screen is hard to read, it's manageable if you click on 2x button.
If you're developing for android, the Android SDK has one.
http://developer.android.com/sdk/index.html
if you just want to quickly view how a webpage would render at various mobile device resolutions then here is a nice little webpage...
http://synthphone.com
you can even link directly to a url via query strings. for example, here is one that should load the Sencha Touch 2 carousel. Use your mouse like a finger to slide around the images etc.
http://www.synthphone.com/?u=http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html
have fun!