I'm trying to make a HTML5 webapp that simply plays a sound over and over and over again, on my iPhone. I don't know any Obj-C to do it natively.
What I have works fine, but the sound only plays once:
<!DOCTYPE html>
<html>
<head>
<title>noisemaker!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<audio src="noise.mp3" autoplay controls loop></audio>
</body>
</html>
Is there a way to either bypass the QuickTime audio screen and loop it in the webpage, or get the QuickTime audio screen to loop the sound?
I found that the "loop" attribute does not seem to fully work in the latest implementation of the HTML5 audio element on the iPhone (iOS 4.0). I found this to be a workaround:
<audio src="noise.mp3" onended="this.play();" controls="controls" autobuffer></audio>
I found that you have to not put "loop" in the above, or the "onended" event seems not to trigger (i.e. "loop" is partially implemented).
Note that "autoplay" is intentionally disabled on the iPhone.
It also seems that the "volume" attribute is not fully implemented at this time as well.
Note that with iOS 4 audio is played without the full-screen QT player.
Have you tried using key/value pairs for the attributes. I know you SHOULD be able to just specify the attr, but just to play devil's advocate.
Try:
<audio src="noise.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
iPhone OS 3.0 doesn't support the <audio> tag completely - all it will do with it is play it in full in the QuickTime style.
What about:
<audio src="noise.mp3" autoplay="" controls="" onended="this.play()"></audio>
You can do it with an old-fashioned embed tag, but I have no idea if Mobile Safari will honor its loop attribute.
Playing media like video or sounds are not allowed (so far). If you want to play video or audio, the iPhone will open it in an external (default) player.
When the player is open, you do not have any control over the webpage untill the user shut-down the external player or the video/sound has stopped by itself.
Related
(sorry for the big images not sure how to resize in this markdown deriv)
I have some video in a webpage, using html5 video tag.
On android, the video will remain inline on the page, allowing me to have other content around it such as subtitles in the HTML.
But on the iPhone when you hit play the video jumps out full-screen, destroying any other features.
Is there any way to prevent this take-over?
On Android, or normal web, we don't have this problem.
FYI tags using are (jade)
video(width="100%" controls="controls" autoplay="true" id='videoPlayer' class='video-player')
source(src="#{videoUrl}" type="video/mp4")
Before play
After click to play
While not originally possible in Safari on iOS using the native HTML <video> tag, Apple finally added support for this a while back by adding support for specifying a playsinline attribute on video elements.
e.g. <video … playsinline />
I appreciate this question is old, but someone had down voted it and it was unanswered.
When I change the orientation of my iPad from the portrait to landscape mode my page looks zoomed.
Currently I am using this meta tag in my site
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0;">
This allows me to zoom my site on iPad and iPhone but has the zooming problem in orientation.
So I tried using the below mentioned meta tag, here I am not getting the orientation problem but not able to zoom my site.
<meta name="viewport" content="width=device-width, user-scalable=1.0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0;">
And I tried all the things which are mentioned in the link. Nothing is working for me.
This is a Mobile Safari bug. It was a broadly known issue and has been corrected in iOS 6. Use your previous meta-tag and you should be good now.
http://filamentgroup.com/examples/iosScaleBug/
Also, I strongly advise against using maximum-scale=1.0, specially for tablets. This is bad for accessibility, and, quite frankly, an annoying feature.
I'm using a simple HTML5 video tag to reproduce an mp4 video in the iphone browser but it always open the video player on the iphone.
Is there a way to play the video inside the browser?
<video src="http://video-js.zencoder.com/oceans-clip.mp4"
autoplay="autoplay" <!-- Boolean attribute. Omit to prevent autoplay. -->
start="00:00:00.00"
loopstart="00:00:00.07" <!-- 7 seconds -->
loopend="00:00:00.19"
end="00:00:00.27"
playcount="4" <!-- play 4x -->
controls="true"
width="640"
height="480"
>
This is my code I'm using, and works well in a normal browser but in the iphone it allways opens in the video player.
Thanks!
To the best of my knowledge, iPhones always open HTML5 video in the native player (to avoid postage-stamp sized videos). iPads will play it within Safari using the same code. I don't believe there's a way to override this.
Use playsinline
<video … playsinline />
I am displaying some content in a UIWebView on both an iPhone and an iPad (same content, two different apps). On the iPhone, the content fills the entire 320px in width, but on the iPad, it does not - it seems to only be about 240px across.
I don't have control of the content, but I did find this in the source:
<meta name="viewport" content="width = 320" /><meta name="viewport" content="initial-scale=1, user-scalable=no" /></head>
Can anyone suggest why this wouldn't be working on an iPad app, and if there's anything I can do about it without being able to change the HTML? I'd rather not manipulate it through javascript either, if possible.
I'm not sure exactly what is going wrong, or what effect you are trying to achieve, but I usually use a tag like this in my UIWebView-based views:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
I've created an HTML5 video player (very simple) that works perfectly on the iPad and the browser.
However, when I open it on the iPhone, I only get a play button which, when pressed, opens the native video player on a new window, on top of all my stuff.
That means I lose access to my custom controls and time tracking (written in Javascript), since the video is now running isolated.
Is there any way to override Apple's control of HTML5 video on the iphone and get it working like on the ipad?
Cheers
I filed a bug with Apple.
After a couple of weeks they got back to me saying, very simply, that I should add "webkit-playsinline" to the video tag on the HTML, as well as adding the "allowsInlineMediaPlayback" property on the UIWebView.
So in the end, this is what it looks like:
HTML
<video id="player" width="480" height="320" webkit-playsinline>
Obj-C
webview.allowsInlineMediaPlayback = YES;
And all works just fine :)
It's virtually undocumented and the only place I could find a reference to "webkit-playsinline" was in the iAds reference, where it says: "iAds JS only".
Until iOS Safari implements inline video support, you need to write video decoder in a web supported language. There are existing implementations of video decoders, such as Broadway for H.264 (video), jsmpeg for mpeg1, and ogv.js (video and sound support).
Keep in mind that the process of decoding a video is computationally heavy. Expect a relatively slow FPS (±20).
For your reference, these guys have prepared a demo of a video that you can play on your iOS device.
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
You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
You can use iphone-inline-video to take care of the playback and audio sync (if any), and it keeps the <video> working as it should.
Do you have an app created or is this for mobile safari? If you have an app and use UIWebView you should set UIWebView's allowsInlineMediaPlayback property..
In iOS 10 adding 'playsinline' attribute to the HTML5 video tag did not prevent fullscreen playback on an iPhone UIWebview until I also added the 'controls' attribute. This is how I got it working:
<video width="100%" height="240" controls playsinline>
<source src="movie.mp4" type="video/mp4" >
</video>
With, of course, _webView.allowsInlineMediaPlayback=YES; in the ViewController also.
There are some work arounds, I'm working on a library to allow this functionality automatically. However, until Apple sets safari to
webview.allowsInlineMediaPlayback = YES;
then we will have to use hacks for the same behavior.
You can check out the project here: https://github.com/newshorts/InlineVideo to see if it meets your needs.
Just add following to your config.xml:
<preference name="AllowInlineMediaPlayback" value="true" />
Otherwise UIWebView will neglect the webkit-playsinline attribute.
You can easily allow this by adding this to your config.xml:
The UIWebView should then respect the webkit-playsinline attribute.