Today I've met an unpleasant issue. There is a website with a custom HTML5 audio player. After the page loads, I try to echo document.getElementById("myAudioId").duration, it is needed in order to make navigation possible. In every other browser it works just fine, the duration is showed, but IE11 works differently - it shows that duration equals Infinity. But as I noticed, when the song is buffered to the end, the duration magically appers and the navigation works. In other browsers everything works from the start. The content-length headers are set up. What could it be?
UPD: Other sites with HTML5 audio let me see the duration from the very start. The duration, I guess, is part of metadata and could be loaded even without preloading the audio file using preload="metadata", but it also doesn't work.
UPD2: I've also tried playing around with jsfiddle and created the same audio tag there with same MP3 audio - there was the same situation. But then I've inserted link to another MP3 there, from another site - and it worked!. More than that, I've uploaded this second song to the first problematic website and after that the song that worked perfectly couldn't also show me its duration and stuff. So now I think it's something on server side. But don't know what it is.
UPD3: Finally, I've been told that files are converted using FFMPEG to MP3 128bit, then they stop being OK. Now I need to find how should I convert MP3s so they are OK.
It works for me locally, but when uploaded to server, it does not.
It seems that player.duration do not work in IE 11:
https://msdn.microsoft.com/en-us/library/dn254962(v=vs.85).aspx
Related
Im building a new webpage with video background. The problem is that Firefox is the only browser that have problem with html5 autoplaying. If page was loaded atleast one time the video is working correclty, starts right after the page load automatically but.. if page is loaded for the first time in most cases the video in background doesn't start and show something like TV's snow.
Facts:
- I don't think its 'video' tag (tried many configurations thinking it might help),
- I'm also sure its not problem with video file - tried few videos,
- tried all formats - it happens with all of them: mp4, wemb, ogg, All at the same time and individually,
- it's not problem with my PC - been trying on windows, mac and linux,
- Its not plugin - i don't use any with FF.
Check it out here: http://strona5.nanit.webd.pl Just do it in private session and close window after every load so you'll see that its lottery.
Regards.
I've been trying to work on a project to he able to turn loop on and off for the MP3 playing on a we page. I was using <embed> and tried changing the loop= property using a javascript getElementByID, but while the image swap would work, the song would still stay on the mode it was on at page load.
Someone else used the idea to use the <audio> tag, and made a togglefor loop=, and said it worked. I tried, and would not work. I went and tried on an example site, and it worked for OGG, but not MP3.
I researched it, and the only thing I could find was that Firefox didn't originally support MP3s due to LAME copyrights/patents, but started supporting the MP3 format in version 9.
What's even stranger, is that sometimes the player controls show up, sometimes they don't. I have random other information show up on the page on load, so can't say if it's random when it shows up, or related: but even when the controls load, the play button never works, and it doesn't start on autoplay. However, in Chrome, it loads up fine.
So to condense, when in IE, it loads the text to say it's not compatible with my browser, meaning I can have an <embed> for if it doesn't work: I just tried it.
Firefox, on the other hand, acts like it WILL load it, and doesn't show the alt text.
I read about some people having trouble with OGGs, talking about a MAME type, but I don't really know anything about that stuff, yet...
I'd really like some ideas on what to do about this, because it doesn't ever even show the text to say it's not supported, it's like nothing's there in FF/CB, and MP3s SHOULD be supported for the past 4 full versions, which I'm assuming is why it doesn't say it's not supported.
Firefox doesn't support MP3 in <audio>, precisely because it's still patented... I have no idea what made you think it's supported in Firefox 9.
I'm using jQuery to dynamically write <video> objects, and running videojs to init them. After I play a video, SOMETIMES when I try to play it again, it just won't play, and from that point on, even after refreshing the page, no videos will play. Each time, the <video> object renders, but the video just doesn't play. Nothing is written to the console. There don't appear to be any errors. Restarting Chrome resolves the issue, but only momentarily. After playing a few videos, the issue comes back again.
I found that closing other tabs in Chrome does indeed fix the problem, so it appears to be some kind of memory issue.
I'm running Chrome 19.0.1084.46
Exactly how many video tags to you have? What do they look like? Do they include preload='none' attribute? Are the source videos all on the server?
I ask because if you have more than six video tags on a single page pointing to the same source server then you could be experiencing "connection starvation":
Chrome allows only six open connections to a single server (based on DNS name in the URL)
the html5 video tag's preload attribute default value is 'auto'
Chrome's auto behavior is to preload some data and leave the connection open ready to pull more data for the video
So, with more than six video tags on a single page pointing to a single server, the videos will not play. To resolve this particular problem, set the preload attribute to 'none'
Stu is correct. But sometimes, in my experience, Chrome ignores the preload="none" attribute and goes ahead and opens a connection anyway. I've had much problem with this when developing a site which had many smaller videos on it. The connections blocked the rest of the content (images, custom fonts (and when custom fonts are delayed, the text does not even render)) My solution was to build an own preloader which loads the images. This made sure I could control at least when the images (which was the most crucial aspect from a design point of view) was loaded.
That solved the problem with images not showing but the problem still remained. So the best solution is to set up subdomains pointing to the same server, like: v1.server.com, v2.server.com, and so on. This means you won't have to move your files and you get the benefit from enabling browsers to have more open connections. Watch out for increased dns lookup time though.
There is a known bug with Chrome. It will not play the same video in multiple tabs at the same time. This is probably what you are running into if you are a developer and happen to have your page open in two tabs at the same time.
The bug has been known for almost 5 years as of this writing. Feel free to visit the Chromium bug report and star the issue. Hopefully it will increase in priority for the Chrome devs.
In the meanwhile, a workaround is to use a random query parameter in your video src. For example, instead of <video src="vid.mp4">, use <video src="vid.mp4?_u=1253412">. This will break Chrome's caching mechanism and allow the same video to be streamed to two different tabs at the same time.
I had a similar but related issue which I can expand on slightly here.
I had 14 different small videos on a page but only 2 were available at a time. Setting preload = 'none' didn't fix the issue so I also used a data attribute to store the src, and remove the src for all videos that aren't currently being viewed.
It looks like Chrome downloads from the beginning of a file when scrubbing past the buffered/loaded duration, even though the 'seekable' amount claims to be 100%.
I put up a demo page hardcoded to a 59 min audio file stored on s3, but otherwise identical to the jPlayer demo:
http://beta.prx.org/jplayer_demos/demo-01-supplied-mp3-bm.htm
I'm testing on a Mac (10.6.8):
On Safari (5.1.4), if you scrub past the loaded/buffered duration, it initiates another request using the range header, and gets the audio from that point almost instantly.
On Chrome (17.0.963.79), when you scrub beyond the buffered/loaded duration, it sits and spins until it can load the audio from the beginning to the duration scrubbed.
Any idea how to make Chrome behave itself and use the range header when you scrub past the loaded part of the audio file?
I was driving nuts with this. I'm implementing a web player with jPlayer too and they talk on the dev guide about the "Accepts-range" HTTP header and how it mess with Chrome, but thanks to you I realised it's a HTML5 audio tag problem... so much time wasted.
FIX: add the parameter "solution: 'flash, html'" on the jPlayer constructor to change to flash by default.
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?