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.
Related
We have a embedded background movie on giardinohotelgroup.ch (if you click on a small movie, the whole movie starts)
On desktop everything works as expected (the topbar is overlapping the movie and the links are still clickable)
The problem is, the same functionality doesn't work on iPad/iPhone.
The links are clickable as long the movie didn't started. As soon the user pushs the playbutton the links are not clickable anymore.
Do someone know why? Should not be a z-index issue because the links are not behind the movie.
iOS does not allow interaction with any elements above a video when the native controls are used, which we do in the current version of our player. On the iPhone, when they hit play it will automatically go into full screen and there is no way to prevent that.
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.
I use Contao 3 an the youtube content element, which basically is the mediaelement.js Plugin.
As soon as I add an preview image, which is seen, before we click on the video to start playing.
On desktop computers it works fine.
On mobile phones / Tablets (Iphone, Ipad) i doesn't work. We can't press play or start the video. As soon as I remove the picture, it works.
Are there any known problems with this?
thx
I have a very rare problem on iOS (iphone).
i developed the site yolieva.de with a videoclip which also runs on ios. but it plays in the background because on top is the navigation with z-index. but it is not accessible from ios. kind of disabled because of the videoclip. you may want to try it with an iphone and you see you cant click through the site…
how to solve this? i want to keep the navigation above the video
I think this has something to do with how iOS deals with the videoclip, so I am not sure that you can do anything about it directly.
Why don't you make the div containing the flash player (id player) smaller on the iphone?
In fact, on the iphone your flash video is not shown in place, there is anyway a change of view, so there is no need of having it full screen either. Of course, you should make your flash player div smaller only for iOS, not other browsers, where it is fine that it is full screen...
Both on Gingerbread 2.3 and iOS 4.2+ the HTML5 <audio> tag generates an interface with next, and previous buttons.
How do I hook into those controls?
It doesn't appear to be one of the HTML5 Media Events according to
W3Schools
HTML5 Spec.
Safari Developer Library: Controlling Media With JavaScript
What JavaScript events do they emit or do they send HTTP ICECast messages?
(No HTTP headers are sent on the button click)
For an example with screenshots, see https://coolaj86.com/demos/sandbox/html5-audio-tag.html
On Android:
if you have gingerbread or better you'll see the controls in the webapp by default.
On iOS (iPhone, iPod, iPad):
Begin playing the music sample on your iPod/iPad/iPhone
Then click the button to "background" the app.
Double click and swipe from left to right in the lower menu to access the player controls.
Note: play/pause control does work more or less as expected (setting the appropriate Content-Range HTTP header helps)
As for iOS
From the webkit-help mailing list:
These Next/Previous buttons are not
part of the standard HTML5 media
player controls.
On iOS at least, they are simply there
because the same controls are used for
audio playback in web pages as other
audio playback on the device. For web
pages, they just go to the start and
end for the track. You can't modify
this behavior from JS.
AFAIK, mobile phones (android/iphone) open the default player when you attempt to play any media file using the new HTML 5 specification.
There's no way to control those buttons since the actual playback is done via the media player application.
I don't know if intended, but so far, http://www.schillmania.com/projects/soundmanager2/demo/page-player/ works with the NEXT button while you are CURRENTLY PLAYING any audio. If the audio finishes, the NEXT button stops working. And the PREVIOUS button doesn't go to previous song, but restarts current song.
I don't know if Scott (the creator) has coded this, or not. I've tried debugging that page JS files, and didn't find any next/prev logic done.
Clearly, it should be possible. It's working kind of buggy and there is no documentation, but let's build it!
What do the buttons do?
When playing:
Next: go to last ms of the audio, so it triggers onfinish event.
Prev: go to first ms of the audio, means nothing, plays again from start.
When not playing: (depends on if audio stopped or never played)
Next: Nothing
Prev: Nothing
:/ So far, that's the info I have. I'm trying to monitorEvents without success, it should be triggering some event.