Does anybody know if iOS7 Safari for the iPhone has problems with the poster attribute in a video tag?
I've been having issues with my application though it works for Chrome (iPhone, iPad, laptop) and iOS7 Safari (iPad only). While videos plays fine, iOS7 Safari for iPhone doesn't render the poster image.
Per HTML5Test.com, iOS7 Safari for iPhone supports the video element and provides Poster image support. But, using the sample code from http://www.w3schools.com/tags/att_video_poster.asp, you'll notice the poster image doesn't load for Safari on your iPhone (but it works fine on Chrome).
Also, per Apple (see "Showing a Poster"):
"Setting a poster image normally has a transitory effect—the poster image is shown only until the first frame of the video is available, which is typically a second or two. On iOS, however, the first frame is not shown until the user initiates playback, and a poster image is recommended, as shown in Listing 1-2."
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html
Just want to make sure I'm not missing something simple before I use a hack to get around this.
I got this working by using a PNG instead of a JPG.
Weird thing is, the JPG worked in iOS Safari locally (via a POW server on local wifi) but when pushed to staging the poster image didn't load. Both the local and staging code were referencing the same file on S3.
Changed the file format to PNG and it loads fine.
Related
I have read this post: How to support both iPad and iPhone retina graphics in universal apps and know that all I need to place ~ipad at the back of the name of the image to have it read properly. I have done this.
The problem is that the image appears correctly in the simulator. I can see that it reading the correct image from the size. But same image is appears as the iPhone Version in the device. Not sure why this is happening.
Need some guidance on this...
Every time I've had the proper image in the simulator, and image not showing up on the device, its been the same thing: UpperCase lowerCase mismatch on the name. i.e. You are asking for myPicture of type png, and your file is named MyPicture.png.
The simulator doesn't mind the case difference, but the device won't recognize the improper name.
I have a website with a video in the header that is set to auto play when the page loads. It works great on all web browsers except for iPhone and iPad. I recently discovered that the iPhone won't allow auto play, which explains why when I open it up on the iPhone there is a black box with a line through the play button where the video should be. I can't even get it to load on the iPad. I haven't been able to test on Android or the other mobile devices since I don't own any of them. Btw: I am using Video.js.
Here's what I'm trying to do and need some help: Since my video has to auto play, I want to have the poster image display rather than the video if a particular device like the iPhone won't allow auto play. Is this possible?? I tried, but I can't get the poster image to show though. Instead, it just shows that ugly black box with play button with a line through it. I need help getting the poster image to display instead. I thought this would happen automatically but it isn't. Does anyone know how to do this? I even wondered if there's a way to write a fallback statement that says something like this: "If no auto play then display image." I've seen fallback statements for Flash, so why not have one for a device that doesn't allow auto play. I'm trying to get the code right, but I'm not a php expert so I need some help. Your help is appreciated thank you.
Have developed an app and deployed to the TV. Now I want to have the Single-Wide behavior (partially covering the screen over an underlying input, channel), but am unable to do so. Here's what I've done:
a) Put
body, html {background-color:transparent;} in the CSS file
b) config.xml - tag changes:
<fullwidget>n</fullwidget>
<dcont>y</dcont>
<movie>y</movie> (since my app could contain some html 5 video feed)
When I deployed, the background just showed black. However, there is a HDMI input from my laptop to the TV which shows fine. The ESPN app works fine with that input, just my app doesn't. Pretty sure I'm missing something regarding how to initialize the background program, screen.
PS:Using 2012 Emulator and 7500 Series 60" device for testing
Make sure you have in config.xml
<srcctl>n</srcctl>
Like in Firefox (Desktop version) I can take using Fireshot
and in Android mobile I can take using Dolphin Screen Cut
I already know that we take screendump using wake+home it doesn't take screencapture of whole webpage including the area under the scroll and it would be difficult to take multiple screenshots by pressing wake+home and scrolling in between but with this there will be small overlap between shots and thee combine screenshot will not be precise
Barry — Webpage screenshot does the trick. You can capture full length webpage screenshots and save them to Camera Roll or Copy to clipboard for pasting into any app that supports pasting in images.
After-all I found the solution
This app worked for me perfectly
Website Screenshot (iPhone app)
You wouldn't be able to do this in Mobile Safari.
If you're developing an application (and since this is stackoverflow I'll assume that's what you're talking about) and using a UIWebView you could do this - you would need to:
Calculate the total height of the webpage you want to capture
Use a UIWebView with the height obtained above to display your webpage at actual size
Render that UIWebView as an image in an off-screen buffer.
Webpage Capture for iPhone | iPad : https://itunes.apple.com/us/app/webpage-capture/id348797820?mt=8
I am currently using iwebkit and phonegap together. Once everything is compiled and tested on an idevice, I can click a video link and get it to play. It play full screen but it uses the ios web video player (the one that doesn't have the "done" button" and the top and has a bar that spans the bottom of the screen. I can then press the full screen button to have it use the regular ios media player but when i click done from that, it doesn't take me back to the part of the app before the video, it just takes me to the full screen video in the web player. I hope someone can help me solve this and I hope I was able to describe my problem in a clear way. I've spent 2 hours searching and have come up with nothing.
I'm having the same problem. iOS 4.3.x introduced this problem as far as I can tell. There's a few comments about it on Apple's developer site but so far I haven't found any solution. Part of the problem seems to be Phonegap because I experience the exact same thing you describe when running the compiled app. However, if I simply browse to the same HTML pages it seems to work fine. Note - I changed from directly linking to video files to using the HTML5 tag. Using the tag works better than direct linking in Phonegap -- the videos still open in the player but when you click the Done button it returns to where it was. Keep in mind that if you do this the video will be on the inline in the page and paused but when you click the play button it opens in the player. The only problem I've found with this solution is that it won't rotate when you change from portrait to landscape when running in the phonegap app but it does rotate when browsing to the video in mobile safari. Not sure if any of that helps. I would be interested in what you've been able to work out since you posted.