HTML5 Video does not work in IE9 - html

I’m having a problem getting HTML5 to work in IE9. It showed up as a failure to execute the video tag. It works fine in Firefox, Opera and Safari but I just got a blank screen in IE. This is the code:
<video width="320" height="240" controls="controls">
<source src="video1.mp4" type="video/mp4"/>
<source src="video1.ogg" type="video/ogg"/>
</video>
Then I ran the HTML5 compatibility test at http://html5test.com and I also got a blank screen in IE, so it’s more than the video tag that’s at issue.
Then I tried running an .mp4 sample video online ( http://archive.org/details/Pbtestfilemp4videotestmp4 ) - it does not run within the browser, but opens in VLC player! In Firefox, Opera and Safari, it runs in the browser.
I’ve reinstalled IE – no good. When I check the IE version, it says Internet Explorer 9, but after "Version:", there's a blank.
Any ideas?

I had a similar issue and it turned out that my server wasn't returning the correct MIME type for the video object. Check out this guy's info - http://blogs.msdn.com/b/thebeebs/archive/2011/07/20/html5-video-not-working-in-ie9-some-tips-to-debug.aspx
I just added this code to my .htaccess file and it worked immediately -
AddType video/mp4 .mp4

use [HTML5Shiv] to enable HTML5 tag for Internet Explorer. And add WebM video format to the sources

Related

Html video not opening Firefox

This is the code I tried:
<video controls="" src="C:\Users\SIVA\Videos\The.Boss.Baby.2017.720P.Bluray.X264-[Yts.Ag]-1-1-1.m4v" type="video/mp4">
</video>
It works well on Chrome, Edge, IE, but not in Firefox. Instead it shows:
No video with supported format and mime type found.
But it supports youtube videos. How can I fix the issue in Firefox?
The firefox cannot open .m4v file, however, you can wrap it to the object tag to let some plugin deal with it.
See the answer to the question in mozila support for more details.

video tag not working in desktop firefox, but work on mobile firefox

I have two video tag, one work fine but second give me error,
no video with supported format and mime.
This is First video tag. Which work fine and take this e.g from This Link.
<video loop controls class="popvideo">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
Second video tag which is not working on desktop but work in android firefox version, and throw me error.
<video class="popvideo" loop controls id="v1">
<source src="https://video.twimg.com/amplify_video/771965608854446080/vid/480x360/J-cvquAduyhPHJmg.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
<!--<source src="https://video.twimg.com/amplify_video/771965608854446080/vid/480x360/J-cvquAduyhPHJmg.mp4" type="video/mp4;">
if i do this too nothing happen, i still get error-->
Your browser doesn't support HTML5 video tag.
</video>
i have add this to my .haccess but none helped.
AddType video/mp4 mp4 m4v f4v f4p
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
So my question is why this is happening? if you will say Fire fox don't support mp4 then i will tell first example is taken form respected site only.
The second source that you commented out that you said "also doesn't work" has an error in it - If you look at it, there's a semi-colon before the quotes, after the mp4. When you remove the semi-colon, your video plays fine.
It then becomes:
<video class="popvideo" loop controls id="v1">
<source src="https://video.twimg.com/amplify_video/771965608854446080/vid/480x360/J-cvquAduyhPHJmg.mp4" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
The 'No video with supported format or mime type" error was logged as a known bug with firefox a long time ago, and fixes were suggested and it is marked as fully resolved. Have you updated to the latest desktop version? The bug was 990623 - the solutions suggested were to reload (after updating ff), by pressing ctrl+shift +r and if that didn't work, to just right click on the video and choose 'View Video', and that would play the video. The ultimate solution is to restore Firefox, it seems the issue was caused primarily by conflicts with add-ons etc. It's not ideal, because you'll have to re-install any add ons but it works (see screenshot)
So to sum up, your issue is not the video itself, it's more a firefox issue...
Hope this helps
fiddle
Check your type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" attributes from Video Codecs
<source src="https://video.twimg.com/amplify_video/771965608854446080/vid/480x360/J-cvquAduyhPHJmg.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
Check all browser support for HTML-5 video HTML 5 Video - Browser Support
I assume it means the codec which is required to decode (and thus play) the video is available on the phone, but not on your desktop. Try another video or encode yours with an open source codec which supported by Firefox out of the box.
Also, note that the filename extension is practically meaningless for videos - it is merely a container format. The actual encoding of the contents in the container is what matters - and it, in turn can vary wildly.

Audio Tag Not Working in Safari

I recently uploaded some radio I worked on to my site, and it plays fine in both Chrome and FireFox, however when I test it in Safari, it simply says “loading.”
This is the code I’m using:
<source src=“x.ogg" type="audio/ogg">
<source src=“x.mp3" type="audio/mpeg">
Your current browser does support this audio.
Any ideas why this would be happening?
Actually, Safari do not support only Ogg file-format for this tag.
Please, check if you have x.mp3 file in same directory, as your .html file.

HTML Video autoplay not working in Firefox

I have a website built with bootstrap and loading video in a dialog:
<video width="760" style="background-color: white;" preload controls autoplay>
<source src="....." type="video/mp4" />
</video>
Shows and works fine in IE, Chrome and Safari.
In Firefox auto play worked a few times, and now does not work at all.
No errors in console and video plays just fine manually using controls.
I have also tried script approach (without autoplay attribute):
oncanplay="$(this)[0].play()"
And works flawlessly on all browsers except Firefox.
Can anyone see what could be wrong?
I have tested this on all browser its working perfect with javascript event
<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.mp4.webm" type="video/webm" />
<source src="video.mp4.ogg" type="video/ogg" />
Your browser does not support the video tag or the file format of this video.
</video>
The problem has an easy solution: changing the order of the videos, listing first the .mp4 source and next the .webm source made the auto-play videos run on Firefox, Explorer and Chrome, this of course is valid if you have multiple video sources.
A side note: Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed. Partial support for Firefox refers to the lack of support in OSX & some Linux platforms, for Android Firefox it refers to the inability of hardware acceleration.
This worked for me for the firefox browser, but it have to be muted.
<video
width="100%"
height="100%"
onloadedmetadata="this.muted = true"
autoplay
>
<source src="assets/videos/Helpline_Video.mp4" type="video/mp4" />
</video>
First check your web page here for test
http://html5test.com/
Second inspect via code inspector and enter them in the browser to check if the are working fine or not. Or drag and drop video file over the browser to check if its working or not.
Thirdly try checking MIME Types
AddType video/mp4 for .mp4 .m4v
AddType video/ogg for .ogv
AddType video/webm for .webm
Fourthly check you html5 converter it has often problem with format conversion I had same problem year back when I was working html5 video. Changing it fixed the issue for me.
Last but not the least; Add a flash fall-back!
<object type="application/x-shockwave-flash"
data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"
height="227" width="220">
Firefox Video Issue: Troubleshooting
Make sure that the server sends the video files with a correct and supported MIME type to make it work in Firefox.
link
Use source URL relative to ROOT, not Web page
Eg: src="/complete/folder/path/video.ogv"
Version of mozilla.
Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container.
Firefox 4 supports WebM.
link
From Firefox 66 and aboew, you must click the unblock button on the right of browser bar to unblock Autoplay Video and Audio

Inconsistent behaviour of HTML 5 video across desktop browsers

Someone I know has asked that I convert the videos on his webpage from using FlowPlayer to using native HTML 5 video.
To start off, I read that 3 formats are sufficient to cover the main desktop browsers (Chrome, Firefox, IE and Opera). Starting from .avi, I used Miro Video Converter to get videos in .mp4, .ogg and .webm as can be seen here:
To further help with cross-compatibility, I decided to use VideoJS.
The mark up seemed straightforward too:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="500px" height="300px"
poster="something.png">
<source src="something.mp4" type="video/mp4" />
<source src="something.webm" type="video/webm" />
<source src="something.ogv" type="video/ogg" />
</video>
Here was what I found on the browsers (latest versions of all):
Google Chrome v30.0: no problems whatsoever. It picked .mp4 which was the highest quality of the three formats. Great.
Opera v12.16: again, and a little surprisingly, no problems. Same behaviour as Chrome.
IE 11: It's all downhill from here. IE 11 waits for the entire video to finish buffering and then starts playing only audio. So it was audio + the poster.
Firefox v24.0: Unlike IE, it doesn't wait for the entire video to buffer but like IE, it plays only audio and no video. I read somewhere that Firefox does indeed support .mp4 playback as long is it is a Windows 7 or higher OS. I am using Windows 8.
I then did some reading up on Apache. The headers stated that Firefox and IE were both recognizing the mp4 as just that as opposed to some other MIME type. Even so, I added the following to my .htaccess:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
That didn't make a difference.
I then swapped the order of the source tags so that the .ogv video came first. Now, the video played in Firefox too but the .ogv is not nearly as high quality as the .mp4.
The page in question is this: http://keyrecords.com/Artist%20Pages/haggard.html
I am linking to the page above for illustration purposes only. On the page above, .ogv comes first, so yes, I know it plays in Firefox.
So my question is this: what do I need to do to get Firefox and IE 10/11 to play the .mp4? It is safe to assume that these are the latest version of each of the browsers running Windows 7/8 machines.
EDIT: MediaInfo gave me this information about the file (does it look right?):
I managed to solve the issue by using the HandBrake converter.
I gave it the existing .mp4 and asked it to give me a new .mp4 with the following specs:
This new .mp4 works in all 4 browsers without issues :)
Something about the way Miro Video converter converted the files caused IE and Firefox to see the audio track only but not the video track. This was rectified by reconverting using HandBrake converter.