Using a fixed css3 background images works fine for the desktop (Chrome, Firefox, IE/Edge no issues), it stays always at the screen with full-height and width bg.
Unfortunately it does not work on mobile devices. Tablets and phones with Android are unable to fix the image in the background.
Is there a way to check the device height/width to load different media or is it possible to simply zoom or scale the image automatically? Are there maybe any JS kits to accomplish this.
Moreover I plan to embed a background video (webm), does this work on mobile devices? May I ask to check if there is way, the video background loads only with WiFi connection. Otherwise it shall be a static image.
Related
I'm developing a web app whose main purpose is streaming dancing videos and I'm facing this problem just in chrome mobile, it works flawlessly in firefox mobile, and in every other desktop browser.
The thing is I need to be able to flip an html5 video element and it works... well, it works until I go fullscreen, then it stays for a few seconds and reverts to the original video (not flipped).
I'm using the css "transform: scaleY(-1)" property.
I've tried setting this property to the video tag, to an upper div, within the video tag and the div which requests fullscreen. And to the div requesting the full screen with no success. If I set scale(); to any positive number between 0 and 1, it seems to do the trick but it doesn't work with negative numbers.
I'm aware of the UA css :not(:root):-webkit-full-screen {transform: none !important}, but it doesn't seem to be the problem. I would rather say it's more related to the way chrome handles video in fullscreen mode.
Any help would be appreciated. If I can't make it work, I'll have to provide another stream with the mirrored version of each video.
Thanks in advance, If you need any examples don't hesitate on asking.
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
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.
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.
I've been researching for a good way to get the devicetype to trigger mobile websites and many people still use script that gets the screen width/height in pixels to determine if mobile devices are used or not.
But mobile phones/tablets have extremely high resolution screens so we need to get another way to trigger a switch between normal websites and mobile websites.
Screen sizes are around 1,280 x 768 - 1920x1080 for mobile phones and 1920x1080 to 2560x1600 for tablets.
What is the correct error-proof method to determine mobile or not?
I'd like not to use javascript over php, if there's an easier method then javascript please tell!
you can make the mobile website responsive trough Media Queries in your CSS
It will overwrite your normal CSS for the website. Media Queries will check for resolutions and what you put in the media query will be shown like that in a resolution like that
http://webdesignerwall.com/tutorials/css3-media-queries
With Javascript you can do check the browser with the code I found on this page:
http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/
with that code you can redirect to a website specially designed for mobile website