The basic parts of this full motion video game is:
The user is shown a video clip which either plays to the end or can be skipped. A clip could be something like a character talking or of a location. Some of the clips might loop until the user clicks something e.g. the clip might show birds flying in the park.
The user is presented with several choices that are overlaid over the video clip at some point where the choices are things like "1. go to the park" or "2. ask the man about the park".
Each choice is linked with another video clip and another set of choices e.g. if the user picks option 2, they are shown a video of the man responding and can then follow up with more questions.
I'd like the above to look seamless and presentable. For example, video clips and text options should fade in and out and I'd like the page to be fullscreen.
Would it be possible to do the above in HTML5 while supporting most desktop and mobile browsers? Would some other language be more appropriate? I'd rather not use Flash, primarily because then I cannot easily support iOS.
From doing some research, the above seems easily possible in all modern browsers on desktop machines with the caveat that there doesn't appear to be any reliable way to make an HTML5 page go full screen, unlike Flash. The iOS situation looks grim: as far as I know video clips will only play once the user has clicked on the clip and I'm not sure if I can overlay buttons on these. I've also read that the video tag can be buggy on Android.
Can anyone comment on what approach I can use for addressing these issues?
Edit:
More info:
I have no constraints about it being server or client hosted.
I know I can't realistically get this to work on every browser out there so I'm really asking: without having to write several ports of the game, what approach can I use to target a sizeable audience?
Can HTML 5 embed video? Certainly. Will it work on most desktop and mobile browsers? Well, define 'most'. If we're talking pure numbers, then no. Lots of the planet still using IE <8 on the desktop and Symbian on the Nokias.
The bigger issue, IMHO, is that video on a mobile device is typically handled by the device. I'm not sure you can over-ride that. For instance, on an iPhone, if I click an embedded video, it pops it out as it's own full-screen video. You'd have to experiment and see if you have any control over that.
Finally, is this a server hosted game? If so, grabbing a bunch of videos over a cell network may not be the idea user experience.
Related
We are planning to use After Effects video as our banner / hero image as our animation sequence is a bit complex. However, when we've seen examples of websites using this technique, the iPhone / mobile versions are static.
Is there a way to make the video backgrounds work on iPhone also? What are the possible workarounds?
We're thinking that we can use the full video animation on desktop and then have a shorter GIF version for mobile (it's still animating).
Or are there other ways to achieve this?
There are many ways to achieve the sort of effect you're after.
If a very low frame rate is acceptable, using a GIF or sequence of static images with transitions may be good enough.
If the areas of movement are not huge, you can use spritesheet animation. You might even be able to present video for the whole screen if it isn't too long. You can letterbox the video or present it in low resolution scaled up to reduce the size of the spritesheet needed.
You can use a combination of panning backgrounds and moving sprites to create a dynamic video background. Particle effects, lighting effects, all the things the GPU does in real time games can be applied to make the menu background look like video.
In theory you might be able to port OpenH264 to your target platforms and play video natively, but that's probably beyond the scope of what you want to do.
You can't use HTML5 video for that with mobile Safari as playback of inline video is prohibited on iPhone. You could do it on Chrome for Android but playback would require a valid user interaction to start (touchstrart).
You are left with either JavaScript/CSS animations or like you mentioned animated images. APNG may provide a better alternative that GIF on iOS.
I have seen other solutions but none provide a decent user experience - a static image may not be a bad idea if you do not want to spend too much time on it.
Note: if you are building an App you can play inline video on iPhone. The restriction is only for mobile Safari.
Ok, now most mordern smartphone has 720p or 1080p resolution. That mean even screen size is small like 4 in, we still can see all text, gui (such as email textbox) of the whole website when first time opening it in Galaxy s3.
However, though we can see the very little email textbox in mobile browser, it is too small for us to enter data. So we need to magnify the page and that is very time consuming.
My question is, can we make the gui of GWT app automatically enlarges itself so that mobile users do not need to enlarge it?
Also the gwt could shpw the gui in Portrait direction.
you need to follow responsive web design principles to achieve your objective. Also have a look here bootstrap provides widgets that are flexible
I have a website with a video in the header that is set to auto play when the page loads. It works great on all web browsers except for iPhone and iPad. I recently discovered that the iPhone won't allow auto play, which explains why when I open it up on the iPhone there is a black box with a line through the play button where the video should be. I can't even get it to load on the iPad. I haven't been able to test on Android or the other mobile devices since I don't own any of them. Btw: I am using Video.js.
Here's what I'm trying to do and need some help: Since my video has to auto play, I want to have the poster image display rather than the video if a particular device like the iPhone won't allow auto play. Is this possible?? I tried, but I can't get the poster image to show though. Instead, it just shows that ugly black box with play button with a line through it. I need help getting the poster image to display instead. I thought this would happen automatically but it isn't. Does anyone know how to do this? I even wondered if there's a way to write a fallback statement that says something like this: "If no auto play then display image." I've seen fallback statements for Flash, so why not have one for a device that doesn't allow auto play. I'm trying to get the code right, but I'm not a php expert so I need some help. Your help is appreciated thank you.
I have searched everywhere and tried mixing and matching different bits of code but I haven't found anything that works or anyone with the same question.
Basically I want to be able to create video demos of iPhone apps that include standard UIKit elements and also the image coming from the camera (video preview layer). I don't want to use airPlay or iOS simulator to project onto the desktop then capture because I want to be able to make videos outside in public. I have successfully been able to video capture the screen with this code but with the video preview layer being blank. I read that its because its using openGL and what I'm capturing is from the CPU, not the GPU. I have successfully used GPUImage from Brad Larson to capture the video preview layer but it doesn't capture the rest of the UIView. I have seen code that combines both and converts to an image but I'm not sure if that would be too slow for realtime video capture. Can someone point me in the right direction?
It might not be the cleanest solution, but it will work nonetheless: did you consider jailbreaking? I hope Apple does sue me for this one but if you really want to record your screen then simply install a screen recorder. Enough options can be found: http://www.google.be/search?q=iphone+jailbreak+record+screen
And if you don't like it: recover your phone for a previous backup.
(for the record: I'm against jailbreaking and posting this from a productivity point of view)
I'm writing an iPhone App that allows people to share images that may be copyrighted(not illegally). The issue I am having is that I'm looking for a way to work around the screen capturing. Is there any possible way you can disable screen capturing or possibly distort the image in some way so capturing will be useless, maybe even block the images when a screen capture is trying to be taken?
That is impossible because it is embedded in iOS itself. Maybe some private APIs, but then there is no app store for your app.
Watermarking the images may be a good half-way solution.
iOS screen capture does not support capturing everything. It does not capture OpenGL or YouTube for example. So if you can manage to implement showing images using OpenGL instead of the simple way using UIKit they would not show up on a screen shot.