YouTube shows black/white loading screen in Webview - javascript

I am developing a cross platform application using Cordova.
I am using an embedded YouTube video within the application.
When I tap play on the video the thumbnail image of the video disappears and a black / white loading screen emerges, shown below.
This does not occur when I test the application in Google Chrome or Safari, only when I run the application on a device (in this case an S4).
Does anyone have any ideas why this is happening and what I can do to restore the default black loading screen?

Related

How to hide the address bar in iPhone browser, so that I can get a full screen view

I am developing a web game using Phaser and i want the game to be in fullscreen mode. Since in iPhone it is not posible to go fullscreen mode, the bottom part of the game canvas is not visible because of the address bar. in android browser this is working fine because it allows to go fullscreen mode
I was trying to hide the address bar so that the game canvas will be fully visible, is there a way for me to hide the address bar in ios browser.
or Is there a way for me to get the address bar height so that I can substract that with the game canvas height to fit it in the view port

Apple/Safari issue playing background video on mobile device

I have a site with full screen background video using BigVideo.js. (http://dfcb.github.io/BigVideo.js/) On mobile devices, android is working great. However, on an apple device the video loads with a 'Play' button that you need to click which loads the video in a modal window over top of the site. Any ideas on how to make this behave like desktop/android devices where the video seamlessly plays in the background? Could there be an Apple app-driven event detecting video and forcing play in a modal?
Example HTML:
<div class="screen" data-video="vid/1-Statue.mp4">
Many mobile devices do not support video autoplay - the idea is to avoid users running up large mobile data bills. Last time I looked all the smaller iOS devices, i.e. iPhones did not.
There is a popular javascript library to detect browser features which includes a test for autoplay which may be useful for you:
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js
Similarly, inline video is not supported on all Mobile devices - it is evolving so more devices do now but it is probably not a good idea to rely on it. Again, there is at least one open source library trying to address this on iPhone (inline video works on iPads last time I checked, as far as I recall):
https://github.com/newshorts/InlineVideo

Adobe Edge generated video with overlay, play on ios without full screen

I have an animation made in Adobe Edge, featuring an animated body with an overlay of a face, pulled via an URL parameter.
It works fine on web. However, on IOS a video can only be played full screen - and then the image overlay obviously doesn't show.
Does anyone know a solution of how I could make this work on IOS? Either some way to convert the video+overlay to a merged video, svg animation or something else? Or just play the video without fullscreen - but I don't think this is possible.
On iOS mobile devices videos played in Safari go full screen with no other elements available. There is no way to stop this behaviour in Safari. Videos can be made to play inline within a native app, but not Safari unfortunately.
on iOS tablet devices, videos can be played inline within Safari.
However,you mentioned that you've created the animation in Adobe Edge Animate? I'd be tempted to publish your animation as a web animation and use that where your video would be.

How to show full-screen button on embedded Vimeo player on mobile browser?

Even on the vimeo website, it doesn't show full-screen button with iPhone 4 simulation on Chrome.
It seems like if the screen is small, Vimeo player becomes "Tiny mode" and hides most of components except few.
Is there any way to force the player to display full-screen button? like full-screen-button: true?
It's not possible, but also not necessary since playback always happens in full screen.

Embed iphone body in website

I am starting out in html5 and javascript, and i've seen this trick done in a number of websites. Is it possible to show in a website a picture of a iphone or android device,and within that device show content from your iphone or android app, with a time interval(that is show 7 seven images in a time reel). I've seen this done with a axure inline frame, but is it possible to do it with javascript, css or html5?
Just make the 'content' a fixed size and put an image of an iPhone with a transparent screen on top of that.

Categories