I'm working on a website with angular-material. Everything works well except with mobile view on IOS.
Iphone: 5c or 6
IOS version: 8.1 or 9
Here's a screen shot, on the left part the good rendering on Android, on the right, the IOS one.
The only difference beteween IOS & Android is the store button shown (Play for android, AppStore for IOS) but I tried to remove them already. The code can be inspected directly on http://www.luditeam.com
Did I miss something? Is it a known problem?
Thanks in advance.
canvasOn a web page in a mobile web application I am developing, I have a fileinput control that is used to take a picture with a mobile device camera. The image from the camera is then drawn onto an HTML5 canvas object on the same page.
The issue I am having is that if the web application is run on an iPhone 5 running iOS 7 (in the Safari web browser), the image appears extremely distorted. Specifically, the image appears to be vertically squished when drawn on the canvas. If the same web application is run on an Android device, no distortion is seen.
In previous versions of iOS and on iOS devices prior to iPhone 5, some vertical squishing was seen (although not as bad as this), and a jquery plugin named megapixel-image.js could be used to correct the vertical squishing. This tool unfortunately is not compatible with iOS 7.
Is this related to image subsampling in Safari or something else? What can be done to correct this? I obviously cannot have my users see this distorted image. Any mobile web app developer who wants to use the camera and HTML5 canvas is going to run into this, so a solution is mandatory.
megapixel-image.js does handle this correctly. I found I was passing some parameters to the plugin incorrectly, causing it not to work. My thanks to Ray Nicholus for his assistance with this issue.
I have developed a mobile web application which allows the user to take a picture with their mobile device camera and then displays it on an HTML5 canvas. When running this web application on an iPhone 5C under iOS 7, the image is severely vertically squished, so that it appears distorted and takes up approximately 20% of the canvas instead of taking 100% as intended.
This may be related to Safari image subsampling, which also caused vertical squishing in earlier versions of iOS and on other devices, although not nearly as bad as what is being seen in the above issue. A jquery plugin named megapix-image.js was created to address this issue and it works on iPhone4 and iPad running iOS 6 to correct this vertical squishing so the image appears correctly. megapix-image.js appears not to be compatible with iPhone 5/iOS 7 (it will not convert the image file).
Something to note is that iOS 7 completely corrected the vertical squishing issue seen on iPhone 4, but it has apparently made the problem much worse on iPhone 5/5C.
Is there a solution to this issue?
Solution:
<script type="text/javascript" src="~/Scripts/megapix-image.js"></script>
<script>
var mpImg = new MegaPixImage(file);
var mpImg.render(srcImage, {maxWidth: 960, maxHeight: 960});
</script>
where file is the file from the fileInput control and srcImage is the corrected image
I discovered that megapixel-image.js does work with iPhone 5 and iOS 7. I found I was calling some parameters incorrectly. The plug-in corrects the vertical squishing issue.
I have the following image source which I am trying to display in UIWebView
<img src="http://img1" style="padding-top:23px; padding-right:40px; position: fixed; left:-100px; " width=280px; height=2px;>
In iOS 4.3.3 it displays the image correctly, though in 5.0.1 it is not displayed at all.
Also happens in Safari.
Am I missing something?
Need a bit more context, is it in a div, does the parent div have any styling options? are you using Jquery Mobile or Sencha Touch? We are having the opposite problem atm. As in our images are not showing in ios 4.3 UIWebView but is in Safari and is showing in IOS 5.0.1.
I've built a web app that uses the HTML5 tag and JavaScript code that renders other content synchronized with the running video. It works great in desktop browsers: Firefox, Chrome, and Safari. On an iPhone or a DroidX, the native video player pops up and takes over the screen, thus obscuring the other dynamic content that I want to display simultaneously with the video.
Is there any way around this? If necessary, I'll figure out how to write native apps for both those platforms, but it would save me a ton of effort if I could just stick with HTML5/JavaScript.
In iOS 10+
Apple enabled the attribute playsinline in all browsers on iOS 10, so this works seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.
Long answer: You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
There's a property that enables/disables in line media playback in the iOS web browser (if you were writing a native app, it would be the allowsInlineMediaPlayback property of a UIWebView). By default on iPhone this is set to NO, but on iPad it's set to YES.
Fortunately for you, you can also adjust this behaviour in HTML as follows:
<video id="myVideo" width="280" height="140" webkit-playsinline>
...that should hopefully sort it out for you. I don't know if it will work on your Android devices. It's a webkit property, so it might. Worth a go, anyway.
Old answer (applicable till 2016)
Here's an Apple developer link that explicitly says that -
on iPhone and iPod touch, which are small screen devices, "Video is NOT presented within the Web Page"
Safari Device-Specific Considerations
Your options:
The webkit-playsinline attribute works for HTML5 videos on iOS but only when you save the webpage to your home screen as a webapp - Not if opened a page in Safari
For a native app with a WebView (or a hybrid app with HTML, CSS, JS) the UIWebView allows to play the video inline, but only if you set the allowsInlineMediaPlayback property for the UIWebView class to true
In iOS 10 beta 4.The right code in HTML5 is
<video src="file.mp4" webkit-playsinline="true" playsinline="true">
webkit-playsinline is for iOS < 10, and playsinline is for iOS >= 10
See details via https://webkit.org/blog/6784/new-video-policies-for-ios/
According to this page
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
it is only available if (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.) I understand in Mobile Safari this is YES on iPad and NO on iPhone and iPod Touch.
I don't know about android, but Safari on the iPhone or iPod touch will play all videos full screen because of the small screen size. On the iPad it will play the video on the page but allow the user to make it full screen.