Hi There. Im working to create interactive video content with Hype. It is a promising tool to create interactive educational content including video and audio that plays right in your browser.
However, I have come across an issue that I don’t know how to tackle. On iOS devices the HTML5 video automatically goes to full screen display. And whilst doing so, the Buttons and graphics displayed on top of the video disappear. Please take a look at the test video in this link: http://www.localsquares.eu/doku.php?id=tools:videoclips
In this test example you can see that it works fine on a desktop or laptop, but once open on an iOS the interactive functionality is lost. I know this is a standard setting for iOS and other mobile devices and am looking for help how to get around this.
How can I show HTML5 Video within a Hype document without it going fullscreen on a mobile device.
Mobile Safari on the iPhone does not allow videos to play inline, they must always go fullscreen. The iPad will play them inline, though I do not believe they can have overlapping content.
If you want to play inline, you would need to build your own iOS application which has a UIWebView. UIWebView has a property, allowsInlineMediaPlayback, which can be set to YES. When using this on the iPhone, you can then use custom HTML for a video tag which sets the webkit-playsinline attribute. We do not provide a checkbox for this setting within Hype as it is uncommon to be in this scenario, and the video tag is pretty easy to add.
For me, this jumps into full screen on an iPhone, but it is an interesting technique.
iPads will play videos at the current embedded resolution so that’s expected. Here’s some more info on how Mobile Safari handles video:
I find the iOS video issues (no autoplay, no remove controls, full screen playback) to be a big problem. Considering video is a widely used feature and iOS is a majorly used browser, I would like to see hype some how help with the problem. I was hoping the responsive layout could be triggered by OS but its only distinguishing factor is pixel width.
What I am getting at is it would be nice to have a traditional layout that includes autoplay and no controls but maybe have a check box that has “allow iOS override” which would decipher when iOS is being used and remove the autoplay and no control settings so that it would at least play on iOS devices. This would make using video’s way easier.
Unfortunately there’s nothing Hype can do; these are iOS Mobile Safari limitations very heavily enforced by Apple (anytime there are workarounds Apple quickly closes them up). The only ways around them are in UIWebViews/WKWebViews within your application, which have settings to control some of these.
Thanks Jonathan. I understand these are restrictions imposed by Apple and I am not wanting to get around them. What I am after is an easier way of hype deciphering its being played on iOS and set up a separate scene that applies those restrictions but for everyone else it goes to the regular scene. Right now we must create our own Java script that checks for iPad/iphone/ipod and then based on that play separate scenes. This becomes very tedious for such an often used item such as video. Like I said it would be nice if there was a check box or drop down menu to pick an alternate scene when iOS is encountered which would eliminate the need for any Java scripting.
Ah, that makes some sense. They Hype runtime does keep good records on what type of device it is running, so we might be able to expose this at some point. Another option that might be a possible workaround for you is to use new responsive layouts feature and make one for smaller/iphone sizes which is different.
I’m very happy that you may consider the idea for the future. I truly believe this would be a well used feature. Unless you want to comprise your layout and design your layout based on iOS or leave iOS with a black screen, I consider the base video implementation to be broken.
When I saw the feature set for Hype 3, I was hoping that responsive layouts would do the trick but unless I am misunderstanding how it works, the method of determining the layout is solely based on pixel width. So If I use this method, it would also send android users to the iOS page, which I don’t want to do. Maybe if responsive layouts were expanded to have the option of choosing layouts based on pixel width, device or browser, I believe that would also fix my issues. Actually this may be an even better solution as it would offer at lot more flexibility for other uses as well.
In the mean time, I guess I am stuck with Java, which unfortunately I don’t know. I have tried researching as much as I can to hack something together but it doesn’t work. I know this is pretty basic stuff so maybe someone can help me out with where I have gone wrong. This is what I came up with so far:
Your actual javascript code looks likely correct, so I’m guessing you’re calling it at the wrong time or place.
Do you have it just as head html? If so, it won’t work there without other code because the hype document hasn’t loaded, and the hypeDocument variable doesn’t exist in that context. We have documentation on how to hook into HypeDocumentLoad events on our documentation. However, it might just be easier to have a dummy scene as your first scene, and run the code in that on scene load. The only change you’d need to then make is to remove the <script> tags.
Sorry Jonathan, I am not understanding the logic of this.
I created the Javascript function by hitting “+” in the resource inspector and then attaching it to the scene I want it to be executed on by going in the scene inspector and selecting the function under the “On Scene Load” option. From an intuitive logical point of view, the term On Scene Load gave me the impression that the hype document did load and that instead of playing the scene first the Java function would hijack it and decipher if it wants to stay on this scene or get transferred to a different scene if its an iOS device.
I did this because this one scene with the video is linked from many other scenes via a menu system. I want the Java function to run every time this scene loads so that the decision to choose the regular scene or the optional iOS scene is decided at that point every time because the user can come from many other scenes and multiple times per session.
I am not understanding why its necessary to have a dummy scene with an On Scene Load. Isn’t this doing the same thing that I am doing but only with the extra dummy scene? I will read up some more and try out some of your suggestions but at this point it doesn’t appear logical to me.
Sorry, didn’t mean to confuse. Your logic is fine on this; I was thinking you’d have the “else” clause go to the other variant of the scene, but after reading your description I see you intended it to in fact be left blank so the scene would not change.
The main thing is to make sure you remove the <script> and </script> tags as you’re already in javascript and these would be a parse error since they are HTML tags.
No Problem. I knew I couldn’t be that way off. Thanks so much for the suggestions as it helped me solve my problem. Please, still keep the consideration of implementing this bullt-in to hype (no coding required) in a future release.
So just to recap: anybody that wants to currently divert iOS user to a different scene so that you can keep a nice video layout with no controls and autoplay for everyone else, just create a JavaScript like this one:
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
hypeDocument.showSceneNamed('Name of your iOS scene', hypeDocument.kSceneTransitionInstant);
};
and then on the scene that has your nice video layout, just set the “On Scene Load” to this JavaScript . For your iOS layout it can be as simple as copying your current scene and turning off “autoplay” and turning on “controls” on your video.
I thought this was all too good to be true. I ran into a new problem. After my video is done playing, I want to jump to a different scene so I placed a timeline action of “Jump to Scene” at the end of the movie. This works great on the regular layout but not on the iOS layout. The video and the hype timeline are independent from each other so although the iOS user is given a play button to start the video, the hype timeline starts going regardless if they press the button or not. So if they wait 5 seconds to press. the movie will be cut short by 5 seconds because the “Jump to scene” action was already initiated. If they don’t press the play button at all, the “Jump to Scene” action still takes place because hype thinks the movie is playing.
I have tried all kinds of things with pausing the timeline but I don’t think this can be done without again creating a JavaScript that links to a self made button that starts the timeline and the movie at the same time. That is a little over my head. How has everyone else be dealing with iOS videos? does anybody have any suggestions on how to attmept this without Java Script or if you are good in Java Script if you could generously share “copy and paste” code that would do this. It would be greatly appreciated… Thanks in advance.
I don’t have any copy/paste code, but I believe the way to do this would be to use javascript to setup an onended handler for the video, and then jump to a specific scene when that is triggered.
