We’re making a cross-platform app with around 20 scenes, many of which have a small video in them (using a Hype video object). On iOS (in multiple browsers), videos will stop playing after going through all scenes (doesn’t matter in which order) – they’ll either be a black square or not show up at all. We suspect this is due to some kind of memory limit on iOS devices: removing half of the scenes makes it so one has to visit each scene multiple times before the issue occurs.
As a workaround, we’ve tried clearing the src of each video’s source child every page and then restoring the src of only the videos in the current scene. This doubles the number of scenes one needs to visit before the issue occurs and seems to cause the JS heap to grow more slowly. Sadly, this is not good enough.
Has anyone else encountered this issue and found a solution?
First of all: apologies for my delayed response - somehow I missed the notification.
Thanks for your workaround. For many projects, that would certainly work.
Problem in our case is that the video’s need to play inline, on top of the scene.
So far we haven’t been able to find a way to do this without making the video part of the scene ( which triggers loading the video in memory).
Our current, admittedly clunky, workaround is to reload the project to the current scene when too many video’s are loaded in memory.
This works but is less then ideal form a user experience point of view.
So any other ideas are very welcome.
Playing has to be triggered.
But I’m afraid loading the video on demand doens’t fix this issue.
This is because Safari iOS appears to loads any video that is part of the Scene, regardless of wether it is playing or not. In Safari Webinspector, the video shows up in Resources > Other as soon as the Scene loads.
BTW: For performance reasons, in Hype we have “create offline application cache” and, in Resources, “preload” set to on.
what i mean is to append the html5 videotag on the fly. say you place a coverimage with nice playbutton instead of the video. this element will have an attribute which points to the videourl (many constructs possible here -> may be id correspondents with an object holding the url). A click or touchstart will trigger js creating and appending the video to the dom … not a big thing
Ah, I see!
That sounds promising. My colleague tried something along those lines but couldn’t get it to work as needed.
But we’ll give it another shot over the coming days and I’ll let you know.
Thanks for your thoughts on this!
Hi there, I’ve just discovered this topic because I’m having the same issue. I made a slideshow from one scene to another, having in each scene a video in autoplay (including inline Ios), without control, with a loop (see my draft: http://www.expo.martincoiffier.com/belle_ile-SLIDETUMULT/). On Ipads, it buggs after some scenes loaded, whatever the speed of the slide.
Also, each scene doesn’t load properly. It should load sliding softly but it comes “scratchly”.
Any suggestions to fix these two big issues ?
Thank you !
There are already suggestions in this post?
But look at thepost below which goes into more detail. The work around in it is the same as what we suggest here.
Hi Mark, thanks for your fast reply. I’ve read the suggestions above, but my videos need to be autoplay inline, so with no button to play.
I’ve read also the post you pointed to, and it seems by now the only reliable workaround would be to reload the project after 15 video-scene, on the same scene. I’ve asked to Willemcc to help me doing this… But please let me know if there’s a more reliable solution.
Also, I’m still having issues loading the next scene: instead of coming sliding, it comes baddly on Ipads.
Hi @MarkHunte, I’ve worked hard trying to find a workaround for the Ipad bug on my project. I have a slideshow of 6 scenes, 1 video autoplay/loop on each. To sort of reload the project, I created another Hype project so from scene 2 to 3, the user goes (sliding on Ipad) from main project to the new one, then from scene 4 to 5 he comes back to the main. But still there’s the bug. Looking in Safari webinspector (resources>other) I can see that each time I go from one scene to another, forward or backward, it adds the same videos many times, I really do not understand why, and I’m sticked. Please, if you have a clue of what to do, tell me… Also: the bug on ipads don’t come after 16 scenes, but after less than 6. It’s really annoying and I really need some help. Thank you - Link to my slideshow: http://cinemagraphs.martincoiffier.com/belle-ile/
Look through posts that show how to dynamically load video into a single player. Try and make the player a Persistent symbol. I and sure I tested this and reported back on another thread related to this issue…
Hi @MarkHunte, I’ve tried the dynamic video with persistent symbol, it still adds the same video again and again navigating from one scene to another. Look at this very simple project with two scenes, a persistent symbol in which there’s a dynamic video which switch between two src from one scene two another: http://cinemagraphs.martincoiffier.com/x/dynamic-load-video-try20-05.html / If you watch in Safari webinspector /resources>other, you’ll see that each time we go from one scen to another, it add again the same video…
Hi Mark, first of all thanks a lot for your fast reply. As you can see on the picture below, after many switches it seems that the video is loaded many times. Then, I’ve tried it hard on Ipad and it’s not blocking so may be it’ll work. Is it the same script as the one I used on my test ? Tomorrow I’ll try to apply that to my project and see if it work. Thank you again, even if this issue is annoying, Tumult is saving my day every day I work on it
Hi Mark,
For my test, I used the hype video preset to load the video. Also the script I used is different than yours, see: dynamic-load-video-try20-05.zip (1.8 MB) (I compressed my videos to make them fit on the project uplaoded here)
Some questions :
1- Is the memory issue coming from the code I used, or coming from the fact I used the hype video tab to load my video ?
2- Including a video like you did (rect object, script video) --> the autoplay doesn’t work on some androids
3- How, with your code, make it work including webm and ogg fallbacks ? Do I have to write one switch script per format ?
4- Going from one scene with a video autoplay to another scene with another video autoplay, with your code, the code I used, or with the hype presets, is not properly working on Safari (sort of black screen loading the scene). Will Hype provide a clean way to do it ? Because right now the only way I found is adding fades with rectangles on the picture to hide the black screen while loading…
Anyway thank you and please let me know. I’m trying to build a workflow which depends on this precise issue.
1, I assume that the video you dropped on to the scene will load evey time the scene loads. Then the switch in the code happens.
I would suggets not using the dropped on video but a rectangle with the video tags as I have done. You can still point to the video in the resources.
2, I do not have an Andriod so I cannot test this…
3, The video tag code is standard, there are plenty of examples about on this site and www but you would simply just add multiple sources to the tag and I guess the JS. I have not ever needed to do this with the JS so you may have to get creative with the JS to change all the sources.
4, Not sure on this. There may be a way to fix that, may set a poster image to hold the space while the load happens.
I’ve tried 42 but it doesn’t solve all issues
Thanks. If Hype releases new features that solve video issues please let me know. Meanwhile I’m gonna try to cook the script.
