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.
Related
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.
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.
Does HTML video tag works in IE browser. I have a little demo here. Its working in Firefox. I need to make it work in Internet Explorer as well.
<div class="content flowplayer is-splash is-closeable" id="vid1">
<video id="mainVideo" src="http://www.w3schools.com/html/movie.webm" tabindex="0">
<source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4"></source>
<source type="video/webm" src="http://www.w3schools.com/html/movie.webm"></source>
</video>
</div>
Do you have any suggestion ?
Webm should play in Iexplorer 9 and higher. It won't work in older Iexplorer versions, unless you use Google Chrome Frame (or anything simular). Another option is to use Flash as a fallback option.
If that's not the issue, some servers need an .htaccess file to play video's online. The htaccess file should contain:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
If that's not the issue, check if the Webm is alright. You could use Miro Video Converter It's free fast and good.
You need Google Chrome Frame to work in IE 6,7,8
For IE9 you need WebM support
Check this out
you could potentially look at http://www.flowplayer.org as an alternative, native support, but then falls back based on browser and version
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'm using jPlayer and it's working in all browsers except IE 9. If i open the page from a local location as '\192....\index.html', everything works... but if i open the page from the domain name 'http://dominename/... index.html', the video doesn't works.
Anyone knows how to solve this problem?
had a similar issue on safari with mp4 files. sounds like either you didn't upload your video to the right path (but I guess you checked it several times) or your server has problems with the mime types on ie. did you set mime types in your source like.
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
or set mime type via .htaccess file
AddType video/mp4 .mp4
AddType video/mp4 .mov