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:
This is correct; it is based on width so you wouldn't be able to separate android vs. ios devices.
I assume you meant to paste something here?
Oops. I guess we can’t just paste in a java script…
<script type="text/javascript">
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
hypeDocument.showSceneNamed('IOS Video', hypeDocument.kSceneTransitionInstant);
else {
// continue with this scene.
}
</script>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.
2 Likes
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.
This page has more info on how to use the ‘ended’ event: http://www.w3schools.com/jsref/event_onended.asp
The code you would use in the built in Hype JavaScript editor is:
document.getElementById('videoid').addEventListener('ended', function() {
hypeDocument.showNextScene();
}, false);
This requires that you set your video to have an ID of videoid
We’d like to offer more built in support for this in the future.
1 Like
Thanks guys,
That works great… I know its a busy time for you guys because you want to get v3 out asap. Your support is second to none and greatly appreciated.
I agree, that this is necessary for a future update. Although I know how to do this now, the reason a lot of us like using software such as hype is so we don’t have to know or research code. I have been a user from the start and for the most part got by doing what I wanted to do without the use of Java. However, ever since Apple changed there policy on video, the basic video capabilities in hype have not changed to offer a solution. Either we turn off autoplay and turn on controls and ruin our layout or we ignore iOS users. Either of these are not great options. These two fairly basic Java functions built-in to hype would make a huge difference for users like myself and give hype a basic solution that solves the mess of iOS video without any coding.
Thanks again guys.
1 Like
Thanks for the kind words!
We agree - one of our philosophies has been that if a user has to reach for code, then we've [temporarily] failed. Of course, we don't want to make sure everything is still possible and know we won't be able to accommodate all needs which is why we support extending animations via JavaScript and Hype's API. Feedback like this helps determine the next items we should write a visual interface for!
1 Like
I have seen this work in http://www.raptmedia.com site.
I don’t know how they do it, but the video does not go full screen and then allows interaction… Any info about this?
They are probably making clever use of image sequences or animated GIFs. Actually I just mentioned that iOS 10 will be relaxing their restrictions and allowing this in future version:
Since before your sun burned hot in space and before your race was born, Safari on iOS has required a user gesture to play media in a
LOL
1 Like
To answer this question, simply check ‘Inline’ in Tumult Hype and make sure your video is also muted:
This is the equivalent of using:
<video width="640" height="480" muted autoplay playsinline>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>