play ogg over mp4 in firefox only - javascript

Because of firefox not playing my mp4, I made ogg files as remplacement. but it doesn't work as wanted because now, obviously, every other browser play .ogg by default
<video class='vid-bg' muted loop playsinline autoplay>
<source src='src/tata.ogg' poster='src/palm_bg.jpg' type='video/ogg'>
<source src='src/tata.mp4' poster='src/palm_bg.jpg' type='video/mp4'>
</video>
but the quality and the size of mp4 is better. So I inverted the ogg source tag and the mp4 one, but then firefox show blank content and stick on trying to load/read the mp4
I would like to say that if the browser can't read/load an mp4, it plays the ogg instead
(every chrome and edge and ie9+ reads my mp4 with no problems)

Related

How to fix no sound issue for mkv video in reactjs

I have a video file in MKV format, i want to play that file in the browser without converting, how can i play this file format in browser?
<video width="320" height="240" controls>
<source src="movie.mkv" type="video/mkv" />
Your browser does not support the video tag.
</video>
when I use this, I can't hear sound.
I can see issue for .mkv format video.
.mp4 format is fine.
who can help me about this issue?

Autoplay Video in Chrome with Data-Saver enabled

I would like to autoplay a small video on chrome with data saver enabled. When the data saver is enabled chrome is blocking all html5 autoplay and play initiation via. script.
<video autoplay muted controls>
<source src="file.mp4">
</video>
Nevertheless there are some html5 players which still work. So it is possible and the question is how.
For example https://www.cb-1100.de/forum/viewtopic.php?f=27&t=1144 (below the first post)

Internet Explorer HTML5 video starts only after some time

I'm facing the problem that a video does not start to play, which I added to an HTML5 page:
<video id="videobcg" preload="auto" autoplay="true" loop="loop"
muted="muted" volume="0" poster="http://test.com/poster.jpg">
<source src="http://test.com/texas.mp4" type="video/mp4">
<source src="http://test.com/texas.webm" type="video/webm">
<img src="http://test.com/texas.jpg" />
</video>
In Chrome and Firefox it works fine; the video starts in one second.
In Internet Explorer I have to wait some time for video to start.
In Safari it does not start at all.
How to fix it?
Sometimes, with MP4 files, the information regarding the length etc. of the file is at the end rather than the start of the file, so some browsers need to download the entire thing to get this information in order to play the file.
Try running QTIndexSwapper 2 on the file which will move the required information to the start of the file, if it needs to be.
It's worth a try.

How to play any format of media file in the Microsoft's SMF HTML5 Player

The HTML5 media player of SMF Framework has just a few media codecs like ogg vorbis, and mp4, so is there any way to play a media file of say, flv format or mkv or mp3 format?
And also, is there any way with which we can play local media files if the above case is satisfied?
Because of the browser support of video codecs in HTML5 Video, you can use only a few codecs in those. Also not all browsers support all video codecs. So you have to provide one H264 video in the mp4 Container (IE, Safari, Chrome) and a Ogg Theora video. You can transcode your Videos with a lot of free desktop tools like this one. You have to provide the different files like that:
<video id="myVideo" class="pf-video" width="480" height="320" controls="controls" poster="../media/bigbuck.png">
<source src="../media/bigbuck.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="../media/bigbuck.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
Hope I could help you.

HTML5 Video "Black Screen" on iPad

I'm building a website that has videos embedded within them. This website needs to cater for iPad users as well but I'm having trouble with the ol' video tag at the moment. I have a video that plays fine in browsers but not on an iPad unfortunately.
I'm just getting a black screen with the iPad, and no error message to speak of.
Here is my code for the video:
<video id="movie" width="790" height="250" controls >
<source src="anim/intro.ipad.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="anim/intro.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="anim/intro.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>
The videos were all created following tutorials about HTML5 video. They were all encoded using preferred iPad settings on Miro Video converter.
Just incase this matters (I'm not sure it will) I'm testing the video on an iPad simulator.
No matter what I do, I just can't get the video to play:
Are you sure you got the encoding right?
Try this to test it:
<video src="anim/intro.ipad.mp4" controls>
Your browser does not support the video element.
</video>
is your .htaccess file serving up the particular video files correctly?
Ensure your server is using the correct mime-types. Firefox will not play the Ogg video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Reference:
Video for Everybody
Also, are you modifying the video element by using positioning? I've found that this creates this black video screen too.

Categories

Resources