I have yet to find any examples of a MP4 played using the tag for HTML5. All the examples that I have found play using alternative code for Flash or other formats. In case my test video was not suitable I downloaded from a working example online but on my web page it does not play. The code is simple enough:
<video width="640" height="360" controls autoplay>
<source src="test/big_buck_bunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I have tried my test page in the latest Chrome and Firefox web browsers, but each gives the same message... "No video with supported format and MimeType found".
Chrome and Firefox do indeed support HTML5 video and the video object code is correct. So if the test page is not working the next step is to check that the server displaying the test page does indeed support MP4 files.
If you are using Apache put in your Directory directive:
AddType video/mp4 .mp4
If you are using Windows Server, instead of editing the site which can create an unwanted web.config file in your root, add the MimeType to the server. That way MP4 will be applied to all sites on the server:
Go to IIS Manager > Mime Types and add a new entry for
.mp4 video/mpeg
Click to save and then restart the server.
Related
I am trying to embed a video in my html page but it is not loading on the iPhone (all I get is a crossed out play button). It loads fine on the desktop and Android. It is not a browser issue because I get the same error using both Chrome and Safari on my iPhone.
<div id="video_container">
<video width="400" height="400" controls preload="none" poster="/static/img/tag_logo.png">
<source src="/static/videos/movie.mp4" type="video/mp4"></source>
</video>
</div>
Interestingly I have tested out my code with the video from the video.js sample project. If I replace my current source tag with this the video loads:
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"></source>
However, I also downloaded the video from the video.js site, but it does not load on my iPhone
<source src="/static/videos/oceans-clip.mp4" type="video/mp4></source>
Codecs for the videos I am trying out all have AAC and H.264 codecs and are mp4s
I have also tried converting my video files to iPhone ready mp4 files using Miro Video Converter but still no luck with loading on the webpage
I am testing on localhost and am using nginx and flask
After more testing: according to the Chrome inspector I am getting response headers back for my video url GET request which explains why it plays on the desktop web. However, for iPhone, the Safari inspector says that I am not getting response headers back. And on Android, I do not get response headers back either, but for some reason the video is still able to play in the webpage on my Android device.
Any help would be appreciated
It could be your host server setup. For example when I use Go Daddy, SVG files won't display on my site. You can either check out the config or add a file that allows the MIME type. More on MIME types here: http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types-with-iis7-web-config.aspx
Just change the video extension to .mov.
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.
I'm developing a WordPress site using XAMPP. I am using the html5 video tag in the header to display the video. I have the videos on the C:\ drive - not in the XAMPP installation. C:\WebVideo is the path.
I am testing in the five major browsers:
Firefox 27.0.1 which says "No video with supported MIME type found"
IE9 which just displays a big black box.
Chrome Version 32 displays the control bar as does Opera 17.
Safari 5.1.7 shows the header without a hint that video is supposed to be displayed.
So, the only clue I have is the MIME types.
I do have an .htaccess file located in the C:/xampp/htdocs/wordpress folder. This is the content of that file:
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm
I know the file is being read because when I put a bunch of nonsense in the file I get internal sever errors. When the nonsense is removed Wordpress functions correctly.
Here is the HTML I am using:
<video width="320" height="240" controls="" preload="" style="width:30%; position:absolute; float:right; ">
<source src="C:/WebVideo/my-vid.mp4"></source>
<source src="C:/WebVideo/my-vid.ogv"></source>
<source src="C:/WebVideo/my-vid.webm"></source>
</video>
The video itself is not broken it plays fine.
I've been all over the web for about 2 hours looking for some fix and come up empty handed. Anyone have any ideas?
As mentioned in comment, Safari requires QuickTime to be-installed to playback video via <video> tag (Windows only).
Also, it is suggested to provide alternative video source for fallback purpose. Even better, use libraries that has Flash player fallback, such as videoJS.
I have a mp4 video which is downloaded from some external site. The video is playing well in that tutorial site. But not in my site. This issue is only in ie9 browser.
source
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
I have downloaded the mp4 file and also ogg file which is not important for the ie9. In the following link the video is working fine.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all
The same source and videos only i'm using but the video is not playing.I have checked the permissions also. Please help me to resolve this problem
First load up the page and press F12 to bring up the developer tools , then pop over to the console tab in the console , get reference to the video object using the script below (If the video element is not the first video element then you will need to adjust the array value ).
document.getElementsByTagName("video")[0].error.code
The code that is returned let you know what’s gone wrong,
MEDIA_ERR_ABORTED : 1
The fetching process for the media resource was aborted by the user.
MEDIA_ERR_DECODE : 3
An error has occurred in the decoding of the media resource, after the resource was established to be usable.
MEDIA_ERR_NETWORK : 2
A network error has caused the user agent to stop fetching the media resource, after the resource was established to be usable
MEDIA_ERR_SRC_NOT_SUPPORTED : 4
The media resource specified by src was not usable.
In IE9 if you get error code 4 then there are two common issues:
INCORRECT ENCODING
IE9 supports H.264 in an MP4 container and WebM if the user has the codec installed on their machine. To support IE9 you will need to ensure that you have correctly encoded your video. For H.264 video I use Miro (a .net application on windows that wraps up FFMPEG) or if I want a specific baseline or setting I use Expression Encoder.
DIRECTORY
Are you placing the media files in the same directory holding this html?
If not, set right path to files.
MIME TYPE
You need to make sure your sever returns the correct MIME type when it returns a file. If the file is MP4 then the files MIME type should be video/mp4. If you want to check the MIME type then use the F12 developer tools (press F12 in IE9) and then navigate to the Network Tab. Press Start Capturing and refresh the web site.
GOOD LUCK
Finally i make my video work by the following way.
I found the problem by using the Jef Rechards and nmaier answers. I have faced two problems
1) My video was encoded with mpeg4 instead of h264. So i have encoded using ffmpeg libx264 codec .
2) The mime type of my video was text/plain even given the type="video/mp4" in video source. I have added the mime type by added the following code in my .htaccess file
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Now the video is playing well in ie9
Ok, this is just guessing, but in order for html5 video to play, the server needs to serve the files with the correct MIME or IE9 (and other browsers) will refuse these files.
MSDN:
Beginning with Internet Explorer 9, any audio or video content needs the correct mime type set on the server, or the files won't play.
MDN:
If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).
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.