I have seen on some websites when they are viewed on iPhone 6 the videos play inline rather than going to full screen in mobile safari, how is this achieved?
HTML5 <video> element is most likely how this is achieved. Cross-compatibility is something to think about, though, because older browsers won't support this object.
Related
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'm trying to make new web-site that background has a video.
I found a JS library: tubular
This plugin working as expected in my desktop browser. (Checked on : Chrome,Safari,Firefox)
But, This NOT working in mobile browsers.
I tried in (Nexus 5, HTC M8).
Both devices are not responding for video background.
Anyone there who knows the solution for this issue or some alternative library that I can use?
I suspect this is a problem with the video background not autoplaying on a mobile browser. This is by design though, it is a mechanism that prevents autoplaying videos from using up bandwidth unnecessarily.
I'm trying to get a video background on one of my web pages.
I've tried converting my video to several formats(ogg,mp4..etc) and testing a few plugins, however I cant seem to get video backgrounds to play on mobiles and some older browsers (firefox, IE7).
Does anyone know what the best way to do this would be to date?
I'm trying to make a canvas where the client can sign his name. It works well in Chrome v6:
but on Android 1.5 instead of drawing the browser scrolls the page and draws nothing:
I borrows the code from Opera's website.
Can I disable the scrolling or how can I make this work?
Thank you!
EDIT
using the events touchstart, touchmove and touchend:
on a LG GW620R using a stylus:
on a Motorola Milestone:
on a Samsung Galaxy:
EDIT 2
works better whitout using the finger nail
#Sirber There might be touchstart and touchend events just like in mobile Safari, have a look at that avenue too. And maybe if you adjust the viewport meta tag there won't be any scrolling, still won't draw but at least it won't scroll.
Good luck,
Mathieu
You're comparing the bleeding-edge in-development Chrome version to a stable 1.5 year old release of a parallel Webkit-based browser... of course there's better support for new HTML5 features in the much-newer experimental browser :) How does it render in a recent Android release (say, 2.2)? How about iOS?
There are definitely nontrivial differences between HTML5 browser support among Android releases (not to mention non-standard browser releases by HTC in SenseUI and the like). Check out the WebKit comparison chart at Quirksmode.
As far as viewport settings and disabling scrolling, Android's Webkit listens to most of the same settings that iPhone Safari does, and Apple has pretty good documentation on the settings you can use to tweak that.
You also may find this quirksmode post about supported events in mobile Safari helpful.
Canvas with iOS is really better (performances). Android browsers are far behind (doesn't work with opera-mini).
If you want to see the difference, just try with http://webdemo.visionobjects.com/ .
I'm just doing a quadratic smoothing for an handwriting input method with the HTML5 canvas-element.
tested with iPad1 & Motorola Xoom