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" });
Related
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
i am coding on a custom player for quite a while now.
My plan was to use soundcloud as my backend. And the HTML5 audio Tag as my streaming object.
I also want to include a Canvas for a bit of visualisation. And thats were the problem starts.
For the Visuals to work on both Browsers, I need to load the audio into an arraybuffer via xhr request. But then I can't use the audio Tag anymore. Which is sad, because by now I know how to code all the functionality i need based on it.
I found the article on html5rocks about html5 audio and WebAudio being best friends.
There is also an example on how to use the tag with an frequency bar visualizer. BUT
this only works on Chrome, because Firefox - maybe some of you have noticed - will play .mp3 files but inside a video object. For the visuals to work I would need .ogg files for Firefox. But then i can't use soundcloud as my backend anymore.
So do i have to rethink the whole player - or is there a way to decode the audio on both browsers while using html 5 audio?
thank you very much.
That's an issue with FF (no MP3 support in <audio>). But can't you get a media stream from the element also? It shouldn't matter that it's a not an - audioContext.createMediaElementSource should work on that, too.
So I was recently trying to learn html5 stuff and got to the audio tag. It seems to work just fine on my PC's browser, Chrome, but not so much on my android (4.0, using both the stock browser and dolphin). It will play the audio once, but never again. Take this site for example:
http://www.stefanvignir.de/rimshot/
Very basic, it has a button that plays audio every time you press it, but not on my android. It only plays the first time you press it. How do you get around this? Just wait for mobile browsers to update?
I heard a workaround is to set audio.currentTime = 0; but that didn't seem to solve anything.
Apparently you can reset the source (audio.src = audio.src) and that will allow you to play it more than once, but it has to re-download the file. A workaround, I guess, but not acceptable.
Any suggestions? Thanks.
this works in desktop and andriod browsers for multiple presses - and you can wrap in a div etc for styling:
<a onclick="this.firstChild.play()"><audio src="1.mp3"></audio>play</a>
More than just the audio tag so you have more control over what the play button looks like. If you need more buttons you can change the code for pause etc
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 guess this in not only related to the <video/> tag… I’m working on a jQuery-based app that dynamically loads static HTML pages and injects them into the DOM. Amongst these, there is a page with flash video markup plus a HTML5 video fallback.
When I load this in FF and wrap it in $() (not adding it to the DOM yet!) for easy DOM selection, Firebug indicates that all resources (video files, SWF files, images, etc.) get downloaded, plus the HTML5 fallback starts autoplaying and thus creates a ghost sound: no video to see, but playing back somewhere in oblivion.
How can I prevent this all from happening? I've already tried with .text() and .html() but without success.