I'm developing a web app for iOs device, but I have a problem with the html5 audio tag...
I designed a custom audio player, and I control the song with javascript functions.
With safari desktop the app works well, but on safari mobile it doesn't recognize the duration of the audio; the value of the duration property is NaN.
I have to play, stop and replay the audio for retrieve the correct value.
Probably the cause is that the media preload is disabled on safari mobile...
Is there a way to read the correct value at the first shot?
This is a bug in iOS... even inside the function that gets called on the onloadedmetadata event, you MAY STILL get NaN.
In my case, this happens at random when the user selects a new mp3 and the code dynamically sets the src property. The audio plays fine, yet SOMETIMES, the duration returns NaN, screwing up any progress indicator that depends on that value.
The medata is available after this event has fired:
loadedmetadata
More info
https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension
Related
I'm having issues with my videos not being played back in firefox. I'm attempting to dynamically update one video element's source to play multiple videos without re-creating the element every time my function is called.
E.g., first click makes the video source = video1.mp4, next click maintains that video player, but changes the source = video2.mp4 without recreating the element.
My reason for doing this is to only have to use one filetype for all browsers. I realize I could just make another source tag under the video element and give it a MIME type of video/ogg and it would work with HTML5 in firefox, but I want to have a universal format to take the burden off my users.
I can get this to work perfectly fine in chrome, but when changing to firefox the flash player only plays the first video source then
for some reason becomes undefined.
Firstly, I created a video element inside a lightbox. The lightbox is opened through a function which is called onclick of an anchor tag. When the lightbox is opened, I initialize a videojs player of the video, then set its source to the URL passed into the function. I then load the player, and play it. This works perfectly fine in chrome with HTML5, but in firefox the flash fallback works once then breaks.
I was reading about the problem and thought my problem might be the fact that flash converts the video element into a flash object, then when I try to reference the video with the same ID again, it isn't found because it doesn't exist as a video element anymore.
Here is a code sample: http://jsfiddle.net/7WTrh/12/
I tested in chrome, and it works, but firefox does not.
Thanks for the help in advance.
When you're changing the source, you need to make sure you're passing the mime type as well, so video.js knows what tech it needs.
myPlayer.src({ src: "vid.mp4", type: "video/mp4" });
HTML5 how to check if user has viewed the entire video? ie, without skipping through. It is straightforward on desktop based browsers, though iOS allows playback control even when you do not explicitly enable it. Therefore, simply listening to the 'ended' event is not accurate.
Try this in iOS. I can only test in Chrome and Firefox:
Use the seeked event
vid.addEventListener("seeked", function() {
}, false);
Additionally, if you only want to detect the user seeking forward, keep track of the playback position by listening to the timeupdate event and reading the currentTime property.
See this JSFiddle
Is there an alternative for phonegap that supports changing playback rate for media (esp. audio)?
it looks that they don't have a property for that:
http://docs.phonegap.com/en/1.0.0/phonegap_media_media.md.html
The audio and video elements in HTML5 supports changing playback rates according to the spec. Unfortunately, this doesn't work in all players. I've managed to make it work everywhere except on Android and I expect wide browser support to be available soon, since the android developer team is working on it.
If you get into the nitty gritty details, note that setting playback rate only works on all platforms after you have received a timeupdate event where the currentTime attribute has been set to a nonzero number, except on iOS where it only works if currentTime is zero (so to make it work cross platform, you have to set it twice).
How do you can detect which Event are in a HTML5 element available?
For Exampe is the Event "onvolumechange" on IOS and Android Devices unavailable but in Firefox and Chrome on Desktop its work. How can you detect it? I've tried it so
if("onvolumechange" in document) {
// DO ...
}
But it only works in Firefox.
According to the article, Everything You Need to Know About HTML5 Video and Audio, the easiest way to probe for support is along the lines of:
var video = document.getElementsByTagName('video')[0];
alert(video.canPlayType('video/ogg'));
The article goes on to say:
There are several levels of support. First, the video element might
not be supported at all. This is the case for Opera 10.10 and IE8. For
this case, you can just put content inside the video element and it
will be rendered (in the above examples, the content is just "video
not supported"). No need to do anything further for this case.
Second, the video element might be supported but the codecs you want
to use are not. Safari doesn't support Ogg/Theora/Vorbis, while Opera
and Firefox don't support MPEG-4/H.264/AAC. To detect this, you can
either use the canPlayType() method on a media element, or you could
have an onerror event listener; if a video fails to play because the
codec is not supported, an error event is fired.
As far as I can tell, there's no quick way to detect support for all the video related events (loadstart, progress, suspend, abort, error, emptied, stalled, loadedmetadata, loadeddata, canplay, canplaythrough, playing, waiting, seeking, seeked, ended, durationchange, timeupdate, play, pause, ratechange, and volumechange) without attempting to fire them first. In other words, try changing the volume and see if an error is returned.
Also note that the W3 has a nice page that demos event and property detection and firing of the <video> element at http://www.w3.org/2010/05/video/mediaevents.html
I'm building a customized audio player, most of if it done and working fine except for the total duration data that I can't seem to be able to fetch in Firefox. I'm using this simple API:
var total = audio.duration
where audio is the player of course.
This works fine on chrome and safari apparently, I'm getting the info correctly, but in Firefox it just returns NaN..
I tried different ways to select the player, pure JS byId, by tagName, or with jQuery, all return the same...
I can still seek into the song correctly and reach the end which doesn't make sense since the total duration is supposed unknown... O_o
If there are some courageous people with some time on their hands, here's my player object:
Player Script
You may try it yourself at fMusic Player
(little triangle on the right to open the player)
thanks in advance, any help will be appreciated^^
Have a look at pretty much the middle of this:
http://www.protofunc.com/jme/documentation/documentation-faq.html
The duration of the audio/video is NaN (not a number) and the timeline slider is disabled in
Firefox / Firefox keeps loading, but does not play the audio/video.
Make sure that your server sets the content-length and content-range
properties in his response-header.
Maybe it helps?