I am working with jQuery mobile and using the HTML5 audio tag. I have a single button to trigger the playing of the audio on the page. I trigger the audio playback with the following:
$('#voice').live("click", function() {
$('#speech').trigger("play");
});
The audio tag is simple:
<audio src="path_to_media" id="speech"></audio>
When a page is first loaded the audio works perfectly however the audio tag and source on not updated on page transition, so going to another page with different audio and clicking play will play the same audio file as the first page unless of course I manually refresh the browser. Is there any way around this?
Can't specify your problem exactly however I've done exactly the same thing here: http://blog.colourbomb.net/?p=193
It performs fine on Desktop and iPhone but on Android I see the same behaviour you have, one solution is to delete the audio tag from the DOM, then create a new one and inject it giving you a new instance of an audio object that should be reset. Which platform are you seeing the issue on, do you get it happening in a desktop browser too?
Related
I'm using GoogleCloudStorage::serve() to serve .mp3 files via a website on Google App Engine with an HTML5 audio tag. Everything was working fine, but after an update for iOS, these devices were unable to play the audio in any browser.
I'm not sure why the code stopped working. Everything else still works fine on Android and Windows in all browsers.
It doesn't relay on Javascript or auto play at all. It's just a simple audio tag with the source being provided by GoogleCloudStorage::serve(), which works everywhere except recently on iOS.
Any input would be appreciated.
This is a shot in the dark because I don't know anything about serving audio files on iOS, but in case it helps...
About the same time you posted this question, a friend asked me to help him with his website. The website previously played audio, but around the time of your question, the audio stopped working on Safari on OS X.
The existing audio player that was being used was Flash based. I switched his website to playing audio using HTML5 and then it worked fine.
So you may want to check if you are playing audio in iOS with a Flash player and change it to HTML5 if you can.
Do you rely on autoplay? iOS disables autoplay, you really have to
let the user touch a button, or something.
Quote from Apple's documentation:
In Safari on iOS (for all devices, including iPad), where the user may
be on a cellular network and be charged per data unit, preload and
autoplay are disabled. No data is loaded until the user initiates it.
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not.
This plays the movie: <input type="button" value="Play"
onclick="document.myMovie.play()">
This does nothing on iOS: <body onload="document.myMovie.play()">
The Soundcloud widget works fine playing multiple tracks in succession. If I then hide that frame, play a youtube video in a youtube iframe, and then switch back to a new track in the Soundcloud widget, it loads but will not play (ignoring the autoplay setting and any widget.play() calls). I had this working on Chromecast with the developer preview SDK and the 1.0 cast receiver but now with the 2.0.0 receiver it's broken. Any ideas how to proceed?
Currently there is no supported mechanism in the SDK to play YouTube videos outside of the YouTube app. Note that in general, applications may not allow other senders launch or control their receiver side, for example Hulu+ may not like it if you wan to write your own app to launch and control that application on your Chromecast; if they decide to allow such model, they need to publish the steps (for example, they can publish their App ID and additional custom data that would link deep into their application). YouTube is no different in that respect.
ok, got this working so hopefully this is useful to others. Assuming only one is active and visible at a time, the trick is to destroy the prior widgets rather than try to reuse them. For YouTube this does not mean reloading the iframe_api but simply calling YTPlayer.destroy() and new YT.Player() next time around. For SoundCloud keep a handle of the iframe and then call iframe.parentNode.removeChild(iframe) to destroy and then create again next time.
YouTube web version can always play a video automatically on mobile Safari without a user's explicit action to the HTML video element. How does YouTube do this?
YouTube's actually done something quite tricky, if you click a video related to the current one or in the search, it doesn't actually load another page, it uses JavaScript to update the page to look like a different one, and then uses that same click handler to start the video, so the system thinks that it was user initiated. That's why if you enter the URL for a video straight into the address bar when not in YouTube it doesn't auto-start...
See http://jsfiddle.net/rCGSB/4/.
Using the seekTo method from the YouTube iframe api does not work in mobile Safari under iOS 6 using an iPad 3.
The video just starts playing at the beginning. Once the video is playing, the seekTo method works. However, as stated in https://developers.google.com/youtube/iframe_api_reference#Playback_controls for the seekTo method:
"Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (playing, video cued, etc.), the player will play the video."
So, the video should start playing at the specified time even if it's not playing. And since I am interacting with a click, the disabled autoplay under mobile Safari should not be the problem.
It works fine on all desktop browsers I tested (FF, Safari, Chrome under Mac OS).
Does this work at all under iOS? Feel free to edit and update the fiddle.
Being able to playback from a certain point in time in a YouTube video is something I've been interested in for a long time.
I've found that this bit of iframe-based markup works, at least on iOS 6:
<iframe width="480" height="270" src="http://www.youtube.com/embed/n1-OKPmQyh4?fs=1&feature=oembed&start=533" frameborder="0" allowfullscreen="1"></iframe>
The trick is the "start" parameter in the URL you're using for the iframe
I've also wanted the "autoplay" parameter to work, but from my understanding Apple prevents that from happening so as to avoid excess data charges for users viewing web content.
I want to automatically load local video and audio without clicking/swiping, etc. on a PhoneGap application on the iPad. I'm considering creating an objective-c plugin, would this be the correct way or is there another work around i.e. a plugin, javascript way etc?
Given that a phonegap app is basically a wrapped webapp, I think you may be out of luck, apple requires a user action to play media on the iPad (actually, audio, I don't know either way for video). Here's a source.
See the user controls or media playback controls section. Even though your data is local, the play action is disabled without an action