When adding an audio element to a website in earlier Firefox versions you could set the width of the audio element like this:
<audio controls style="width: 500px">
<source src="x.mp3" type="audio/mpeg">
</audio>
However now this is not possible any longer. No matter if I set 500px or 600px the player always has the same width. This was not a problem in earlier Firefox versions.
Is there something I did wrong or is it a Firefox bug?
In Chrome for example everything works.
It's a bug with the new firefox, i just tried out on version 55 it worked and then I upgraded to version 56 and now it doesn't, u may have to wait for them to fix the bug for the time being, or u can send them a bug issue.
If any update I'll edit my reply but for now you can consider sticking with other browsers.
Edit: I have just sent them a bug report. should be fixed anytime now, be sure to check and update your ff browser.
It appears that it will be fixed in FF57 - it's not showing up in the betas, so whatever was broken, it's already been hunted down and corrected.
Here's the bug report I posted (couldn't find another one): https://bugzilla.mozilla.org/show_bug.cgi?id=1409552
Related
I have gone through practically every single stackoverflow question concerning this. I still having found an answer.
I was told to add playsinline and it should do the trick but still nothing. I use videojs and I assume it's practically the same thing as using a normal html5 embed video.
I have done all that could be done. Resetting network settings,adding playsinline,adding autoplay muted and loop, using 3 different browsers namely chrome, opera and safari. This works on some ios devices but not all no matter the browser. These are mp4 video formats.
<video-js class="vjs-big-play-centered" controls preload="auto" playsinline id="vid1"><source src="" type="video/mp4"></video-js>
This is practically how my code is. I do not know what else to do as this is really stressing me out in finding the answer. Please some angel help me out...
Alright just to answer my own question.
I found out that when the attribute preload='auto' is used, ios devices/browsers load it a bit different from andriod phone.
Also this was inconsistent. It worked sometimes but majority of times it didn't.
After so many research, I was able to fix this by changing this to preload='none'.
I hope this would help someone else out...
I am having some strange issues with Safari 15.0.
I have put a jsfiddle test up here: https://jsfiddle.net/batdan420/3jrvgc2p/3/
You should hopefully be able to replicate the issue by visiting the url in Safari 15.0 and also see that it is not a problem on other modern browsers.
The issue seems to be to do with the video element starting out as position fixed.
This has worked on past versions of Safari (and other browsers) for many years but when I updated Safari, I found that the sites I am using the code on no longer displays the video when the page loads...
The above example should make it easier to diagnose/confirm the issue but if you want to see the code without going to the test here is the line of code that is causing the issue:
<video style="left: 0;top: 0;height:100%;position:fixed;width: 100%;z-index: -20;" autoplay loop muted playsinline>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
</video>
I was able to fix the issue by REMOVING the position property from the css (that is currently inline for testing purposes) and THEN using javascript/jquery to set the css of the video element to position fixed AFTER the document is ready but this is not the most ideal solution.
The issue does NOT seem to happen on current versions of Chrome (94.0) or Firefox (93.0).
Perhaps there is something wrong with my code? or is this an issue with Safari 15.0?
I just had the same issue with Safari desktop. The solution was just to put the video tag inside a wrapper which has the fixed position as Safari seems to be unable to handle it directly on a video tag.
This doesn't work in Safari:
<video style="position: fixed" src="..."></video>
This works:
<div style="position: fixed">
<video src="..."></video>
</div>
On the page there is a HTML tag Video, which broadcasts the video from the interlocutor (WebRTŠ”).
<div id="remoteVideoContainer">
<video id="remotevideo" autoplay="autoplay" controls="" loop="loop" preload="true"
height="500" width="100%">
</video>
</div>
And css related to this part:
video {
display: inline-block;
vertical-align: baseline;
}
After upgrading Chrome to version 67.0.3396.87, I had a very strange bug - a black box (or two) whose size is depending on the size of the window (for some sizes it disappears). There is also a hole in full screen mode. What could be the problem?
Here is inline mode:
And here is full screen:
In earlier versions of Chrome there was no such problem. It also does not exist in other browsers.
Try to create video element not from HTML but from JS. For example:
var el = document.createElement('video');
el.setAttribute('controls', 'true');
....
I think its helps.
This is interesting, on the latest chrome canary build and can't replicate this issue. The only solution you have is to wait for the next chrome update. The problem isn't in your code, it's on the browser that I can guarantee is fixed in the upcoming update.
Like Sethu says, it seems to be chrome, not your code.
Is there a chrome beta build you could try which might have a fix by now?
If not maybe you could roll back to the previous chrome version.
I'm having a problem playing audio in Safari or Opera. The following code does not work in either:
<audio controls>
<source src="http://fallowproduction.com/music/Paradigm%20E%20-%20Once%20upon%20a%20Dubstep2.mp3" type="audio/mpeg">
</audio>
Here's the jsFiddle for easy access to the code: http://jsfiddle.net/panq7/1/
Considering it's really simple, I'm mystified as to why. Is this a normal problem? Or is there something else going on? I looked up playing mp3 problems with Safari and while I found no solution, I found a bunch of complaints.
Edit: I fixed the Safari problem by adding an option for an embed tag. Still, it's not the ideal fix, as Safari is supposed to support the <audio> tag, which it does not, apparently (someone let me know if it works in their version of Safari). However, Opera apparently does not support the <audio> tag, or the <embed> tag. This is contrary to the browser specifications, as mentioned later by another member of StackOverflow.
Opera does support <audio> however, when using MP3, there seems to be limited support for different sampling rates. To solve this problem, I detect support for OGG and detect the Opera browser and fall back to OGG. It's not perfect because I would prefer to simply detect if there is MP3 support and go with that, however Opera reports that it does support MP3, so it's not enough to just check that.
You could also simply use supported MP3 formats for Opera. I believe the following is supported:
32kHz/44.1kHz/48kHz frequencies,
16kbps-10Mbps bitrate
The reason may be the missing closed tag /> in source line.
Wolfgang
Sometimes the HTML video on the topmost portion of my site doesn't run even though after it has been completely downloaded. I am using Safari 5.0.6 on iMac. On other browsers as well, sometimes it works fine and at times, it only starts working when I refresh the page.
Can you guess what may be causing this ?, or how I could try fixing this ?
Got the same issue in chrome, autoplay can be emulated by the next way (using jQuery's selector):
<video ..... oncanplay="$(this)[0].play()" >...</video>
Well, I opened your site on my browsers. It's working just fine on Chrome 15 and Firefox 7 [Windows7]. May be you should try it on newer browsers.