When watching a livestream on twitch.tv I noticed that when you press the back button the stream simply minimises to the bottom left corner with a smooth animation, you can then navigate around twitch with it always minimised. It doesn't even seem like the page refreshes and that video player element never refreshes even though everything else is completely changing.
Can someone explain how they are doing this?
It's done using a single page application. https://en.m.wikipedia.org/wiki/Single-page_application
Related
I am developing this app for ipad and ios9 and at some point the user will click on a button to watch a video. But I wouldn't want the user to just see it in the split view size he's currently on (like 1/3rd or 14th) instead I would like the app to close the other open app and for it to take over the entire screen.
Does anyone know if that's possible? Thanks.
By-default, the video always get played in full-screen mode. When video playing is finished, the player gets dismissed and you will see your screen (from where you played the video). In your case, in split view controller.
Do let me know if you need further details.
I am trying to use video.js in a samsung smart tv application which unfortunately can only play one video at a time.
I need to simulate the smooth, preferably crossfade, transition between two videos. I am trying to do this by first fading in a screenshot of the next video and using that to cover up the screen while I switch video sources of the video.js plugin. When the player is ready I need to remove the screenshot.
The closest I have found is to remove the screenshot when "loadedmetadata" is called however I am still seeing an inconsistant blip of a black flash between the time the screenshot is removed and the video plays. This is very jarring and I need a consistent way to remove the screenshot only when the first frame has been loaded into the player.
Any other suggestions on how I could each a smooth transition between two videos while only using one video element would be greatly appreciated.
I found the loadeddata event which, as described on MDN :
The loadeddata event is fired when the first frame of the media has finished loading.
loadedmetadata only announce that media informations such as duration are loaded, but the loadeddata event should do the trick.
I need to show a paginated slideshow of moderately DOM-intensive HTML pages in an iPad application.
All documents are tailored for iPad screen so there is never any scrolling inside UIWebViews.
I decided to put UIWebViews inside UIScrollView for pagination.
It works really well and smooth after all web views have rendered their content.
However, I can't afford waiting for 20, 30 or 50 web views to load before user can scroll: it takes minutes.
I tried to anticipate swipes in scrollViewDidScroll handler and pre-load a few next pages as user keep scrolling.
This worked much better (no performance difference between 10 or 150 web views).
However calling loadHTMLString in scrollViewDidScroll handler causes scrolling to lose it smoothness.
I don't care if it takes a second longer to show a particular UIWebView—all I want is for scrolling to be smooth and available as soon as possible, and to lazily preload UIWebViews on the go.
How do I achieve that?
This is a difficult problem and there is no easy/elegant way to solve it.
One way to speed up the scroll would be to lazy load the pages as you stated in your question. However, in order to ensure smoothness you would have to control when the loading happens.
So say you began by loading the first 5 pages on initial launch. When the user scrolls to page 2 and STOPS, you begin loading page 6. As soon as the user starts scrolling again you pause the loading only to resume when they have stopped on a new page. Pausing the loading in between will help smooth out the scrolling. Also, make sure you release data when possible because it can build up and hinder smooth scrolling down the line.
Another option would be to have the UIWebViews begin loading only as soon as the user stops on the page. So say I scroll to page to, once the scrolling stops I begin to load the HTML. This is not as "pretty" as the first options but it will ensure that the scrolling is smooth.
Another option, this one is a bit out there, is to run through and load all the HTML pages rich text. Leaving out all the DOM intensive stuff. Then grab a screen shot of those semi-loaded page using this method. When the user stops on the page you load it all the way including the DOM intensive stuff. This will let the user feel as thought they are scrolling quick with everything loaded.
Here is a great scrolling class that I have used before.
Here is some code to help with method 3.
Good luck and I hope that this helps!
EDIT:
Here is a great post from the guys at LinkedIn on how they solved webView scrolling problems. It would be worth a read.
In my app I have a webview that is used solely for displaying the facebook page.
However, the client does not want the top blue bar of facebook to appear; he wants to hide it.
Is there a way to do this?
The bar is 45 pixels, so what I did is I moved the UIWebView in IB in such a way that its top 45 pixels are behind my navigation bar (thus not appearing).
However, this is not an ideal solution, as the user can see that content when he scrolls up, before bouncing. He can see but not touch it, which will be frustrating for some users.
I tried turning the bouncing off, but then the UI becomes too rigid, and not fluid.
I looked up in Google and Stackoverflow for a couple of hours but didn`t find a solution.
Thanks a lot!
You'll have to edit the HTML/CSS of the page itself to hide the HTML elements in question, probably using regular expressions, and feed it into your UIWebView with loadHTMLString:baseURL:.
I've done similar manipulating before and it works, but... it's a different ballgame when the webpages in question don't belong to you. Any time Facebook updates their layout, your app behavior might change until you have time to get an app update approved. Clients want what they want, but make sure your client knows what he's asking for!
First test out the javascript code used to hide whatever elements in the webpage and then pass up to stringByEvaluatingJavaScriptFromString of UIWebView to run it.
I have a web site that opens iframe for video on page, page uses ajax to pull in videos from selected menu. As expected and understood, on iPod touch after selecting video it shows a play button, which brings up video in another screen. However, when the video completes, it returns browser to page prior to one where video was played from. Sequence:
open Page1
go to Page2 which offers videos to play, in iframe
play video
video completes, returns to Page1, not Page2!!
Only happens on iPod touch, so must be issue with how control is returned on video completion.
Any suggestions? If this is not a known problem, I can work up example (currently, need account on site).
Of course, because the browser returns the URL of the page that was displayed before the video was played back. It won't remember the URL of the IFRAME, that had already changed in the process of selecting a video, if I don't get you wrong.
That's a common problem with frames/iframes and one reason why you shouldn't use them.
The solution could be to place your video selection menu in your actual page and not in an IFRAME. This could be achieved by loading in into a DIV via Ajax for example.
Figured this out, sort of. Got it to go back to the right place, but I do believe that it is easy to confuse the iTouch quicktime player and Safari about where to return to.