I have searched around quite a bit but have not solved my problem.
I have a video tag running as follows:
<video
class="ne"
src="{{ page | video_url }}"
muted="true"
volume="0"
controls
width="720"
height="480"
poster="{{ page | video_poster_image_url }}"
type="video/mp4">
</video>
I am using Jekyll for the URLs. They work fine.
The site is live at switzerlandllc.com. Click any video in FF and it shows an image and an X. Chrome and other browsers work fine.
If you grab the source of a video and load it in a new tab it plays fine. At least it does for me.
I have added:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
to my htaccess file. I suspect that I don't need the .ogv or .webm.
I don't understand why loading the video URL will play the videos fine but loading the video into a video tag fails.
Any ideas?
This is caused by the limited support for the MP4 format within the video tag in Firefox. Support was not added until Firefox 21, and it is still limited to Windows 7 and above. The main reason for the limited support revolves around the royalty fee attached to the mp4 format.
Check out Supported media formats and Media formats supported by the audio and video elements directly from the Mozilla crew or the following blog post for more information:
http://pauljacobson.org/2010/01/22/2010122firefox-and-its-limited-html-5-video-support-html/
I can confirm that mp4 just will not work in the video tag. No matter how much you try to mess with the type tag and the codec and the mime types from the server.
Crazy, because for the same exact video, on the same test page, the old embed tag for an mp4 works just fine in firefox. I spent all yesterday messing with this. Firefox is like IE all of a sudden, hours and hours of time, not billable. Yay.
Speaking of IE, it fails FAR MORE gracefully on this. When it can't match up the format it falls to the content between the tags, so it is possible to just put video around object around embed and everything works great. Firefox, nope, despite failing, it puts up the poster image (greyed out so that isn't even useful as a fallback) with an error message smack in the middle. So now the options are put in browser recognition code (meaning we've gained nothing on embedding videos in the last ten years) or ditch html5.
Related
I have searched a lot for this and found a lot of posts but none could help me.
I am trying to show a mp4 video like this
<video width="640" id="video1" controls="controls">
<source type="video/mp4" src="~/Content/Videos/HelpVideo.mp4" />
Your browser does not support HTML5 video.
</video>
But it always shows Error: Unsupported video type or invalid file path in IE11.
It works perfectly in firefox and chrome.
Even in IE11 when I right click on video and select Copy Video URL option then also it returned correct video URL which I get able to download and play properly.
The strange thing is when I try the same video in a sample project having only one html page and the same video in the same folder, it works in IE11 also!!
So can it be related to wrong path or something? I am using MVC4
I tried #Url.Content("~/Content/Videos/HelpVideo.mp4") for path but that also didn't work for IE.
I also tried adding mime type in project web.config file as well as applicationhost.config files
Edit
Just found in the network pan of developer tool of IE11 that mime type is going wrong for my videos, mime type is going application/octet-stream while it should be video/mp4
When I check this microsoft website for video support, http://ie.microsoft.com/testdrive/graphics/videoformatsupport/default.html it shows the correct mime types for videos i.e. video/mp4
So now the exact problem is known.
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.
I'm having an issue with getting local videos working for the HTML5 Video element.
If I try and view a local OGG or WebM file directly, in Firefox 16.0.2 it works, but in chrome 22 it does not work!
However, if I view an OGG file on another webserver, it works correctly.
For example this file
http://www.quackit.com/video/pass-countdown.ogg
Works correctly for me, but if I save it onto my own server as
http://test.jammaloo.com/pass.ogg
Then it works in Firefox, but Chrome will not play it.
I believe the mimetype is being set correctly, can anyone help me track down the issue?
First of all try with adding support for more video types
Link - http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html
video id="sampleMovie" width="640" height="360" preload controls
<source src="HTML5Sample_H264.mov" type='video/mp4;' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg;' />
<source src="HTML5Sample_WebM.webm" type='video/webm;' />
video
Second check your .htaccess file for content type - add mime type for webm, ogg, mp4
Link - http://docs.sublimevideo.net/troubleshooting
Link - http://www.htaccess-guide.com/adding-mime-types/
These solved my problem of playing video in HTML5 video tag. Hope it helps you too.
As i checked in the CHROME your content is not getting loaded with correct "TYPE"
If applicable (and nothing works) you can use- http://www.longtailvideo.com/players
I have the following HTML5 video code on my homepage and it acts strange in Firefox 11.
<video width="900" height="508" autoplay="autoplay" controls="controls">
<source type="video/webm" src="http://www.mysite.com/MovieClip.webm"></source>
<source type="video/mp4" src="http://www.mysite.com/MovieClip.mp4"></source>
</video>
When the homepage on my site loads, I see in the place of the video the following error message:
"No video with supported format and MIME type found."
However, when I open up the media path "http://www.mysite.com/MovieClip.webm" directly, in a new tab, it loads the media just fine (using the internal Firefox HTML5 video player)!
Then, right afterwards when I go back to my homepage and refresh the page, it now loads the video just fine! Any ideas on why this is happening and how to fix?
Thanks in advance!
Be certain that your web server is configured to deliver WebM video as MIME type "video/webm". You can quickly and manually check if this is the case by telnetting to your web server and issuing a HEAD request:
telnet www.mysite.com 80
[after connection...]
HEAD /MovieClip.webm HTTP/1.1
Host: www.mysite.com
And finish the request with 2 carriage returns. The HTTP response header should contain a "Content-Type:" line. If it doesn't say "video/webm", Firefox won't accept your WebM file.
Regardng to Multimedia Mikes answer. If your server delivers the wrong mime type to the videos just put a htaccess file with following content into your videos directory:
AddType video/mp4 mp4
AddType video/ogg ogg
AddType video/webm webm
This worked out well.
If, please rate his answer ;)
Greetings
func0der
I am not entirely sure this will solve your problem, but we also have noticed erratic behavior with .webm movies in Firefox 11 (only on Windows): The video element's playhead automatically jumps to the end of the movie, even if you open the file explicitly, i.e. without a surrounding HTML page. This of course renders all autoplay settings unusable.
Our solution was to change the order of the sources, so that Firefox would prefer .ogg files over .webm - there was no need to change anything else in the HTML code.
I have an annoying problem regarding the <audio> tag and FF/Chromium as media won't be played back when I would expect it to. Opera seems to handle it correctly.
We have audio media to be played back using the corresponding HTML5 <audio> tag. The <source> tag includes media in an audio-only OGGÂ container.
However, the file-extension ogg is not in the src-attribute, so src-links look like http://localhost:1234/a/b/cdefg/Xyz (Restful API using redirection to get the actual media file).
The following code is the part of the web page that should display the HTML5 player:
<div class="mainContent">
<audio id="aud1" height="360" width="640" autoplay="false" controls="controls" tabindex="0">
<source type="audio/ogg" src="http://localhost:1234/a/b/cdefg/Xyz"></source>
Your browser does not support HTML5.
</audio>
<div class="divider"></div>
<a class="homeLink" href="/index.html">Take me back to the Homepage</a>
</div>
The media being played back is definitely a audio-only OGG file.
I have tested this code on Ubuntu 10.04 FF5.0, Chromium 12.0.742.91 (87961) and Opera 11.50 with the following results:
FF: doesn't play back
Chromium: doesn't play back
Opera: OK
I've integrated a small script to display different attributes of the HTMLMediaElement (attributes: networkState, readyState, see) yielding the following results:
FF => networkState: NETWORK_LOADED (media source finished loading), readyState: HAVE_NOTHING (no media available for playback)
Chromium => networkState: NETWORK_LOADED (media source finished loading), readyState: HAVE_NOTHING (no media available for playback)
Opera => networkState: NETWORK_IDLE, readyState: HAVE_ENOUGH_DATA
(Note that the descriptions for the different states are from the Safari Dev site: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html)
If I insert a src which directly points to an audio-only OGG file (like http://en.wikipedia.org/wiki/File:Tromboon-sample.ogg), then it works as expected.
It seems as if FF and Chromium seems to have issues with links not including the final file name?
Does anyone have an idea or hint about this?
Cheers,
Chris
I know you already fixed it, but make sure you didnt miss any MIME types:
HTML5 <video>
.ogv
video/ogg
.webm
video/webm
HTML5 <audio>
.oga
audio/ogg
.mp3
audio/mp3
HTML5 <video> <audio>
.mp4
video/mp4
.ogg
application/ogg