I'm having some trouble displaying HTML5 video in IE9, I added the different types to my htaccess
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
This is what I have as html
<video id="video" autoplay loop preload>
<source src="video/final_loop.mp4" type="video/mp4" />
<source src="video/final_loop.webm" type="video/webm" />
<source src="video/final_loop.ogg" type="video/ogg" />
Your browser does not support the <code>video</code> element.
</video>
I also tried converting the video to Theora ogv format and use
<source src="video/final_loop.theora.ogv" type="video/ogv" />
But this doesn't work either, I thought .ogg was supported in IE9?
Internet Explorer 9 support MPEG4 using H.264 codec. But it also required that the file can start to play as soon as it starts downloading.
Here are the very basic steps on how to make a MPEG file that works in IE9 (using avconv on Ubuntu). I spent many hours to figure that out, so I hope that it can help someone else.
Convert the video to MPEG4 using H.264 codec. You don't need anything fancy, just let avconv do the job for you:
avconv -i video.mp4 -vcodec libx264 pre_out.mp4
This video will works on all browsers that support MPEG4, except IE9. To add support for IE9, you have to move the file info to the file header, so the browser can start playing it as soon as it starts to download it. THIS IS THE KEY FOR IE9!!!
qt-faststart pre_out.mp4 out.mp4
qt-faststart is a Quicktime utilities that also support H.264/ACC file format. It is part of libav-tools package.
Are you trying to use this on IIS?
If so, you have to add the appropriate mime types to recognize your video files:
<configuration>
<system.webServer>
<staticContent>
<!-- Video -->
<mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
<mimeMap fileExtension=".webm" mimeType="video/webm"/>
</staticContent>
</system.webServer>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
</configuration>
Here's some markup that works for me in IE9 (in the root folder, i have a "video" folder with my files):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Video Demo</title>
</head>
<body>
<video id='movie'
autoplay
controls
loop
preload=auto
playbackRate="1"
width="800">
<source src="video/video.mp4" type='video/mp4' />
<source src="video/video.webm" type='video/webm' />
</video>
</body>
</html>
As others have mentioned, IE9 doesn't support OGV, only MP4 and WebM (with plugin). I encountered a lot of trouble even with the MP4, which should play natively, before finding out that one thing to consider when serving MP4 files for IE9 is the file meta information called moov atom embedded in the MP4 file itself. If it's located at the end of the file, where some encoders including ffmpeg places it, IE9 will not start playing the video unless the whole video file downloaded. Relocating the moov atom metadata to the beginning of the file enables progressive download of the MP4 file, and IE9 handles the video nicely.
There's a tool called qt-faststart to perform this operation. Worked wonders for me, compiling and using the Linux command-line version distributed with ffmpeg.
make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4
See this page; it provides a solution to the poster issue with IE9, and expands on video codecs:
Some simple CSS and conditional statements did the trick. I'm now of the opinion posters should be placed at the beginning (first frame) and end (last frame) of a video, as if they were album covers. In this way, an image at the beginning and end of the video will give the viewer SOME visual idea of why they should play the video (just like the reason you buy an album sometimes is because of the cover).
Please be aware that for IE9, the video source must be given in the 'src' attribute of the video tag itself.
I suggest that you detect IE9 specifically and add that property to the video tag. You need to do it specifically for IE9 because Firefox on OSX won't accept the MP4 video file in src tag.
Hope it helps!
IE9 does not support Ogg/Theora. It will support WebM if you install the codec.
On the official Microsoft website there is this code snippets for video on IE9
<video width="400"
height="300"
src="video.mp4"
poster="frame.png"
autoplay
controls
loop>
This content appears if the video tag or the codec is not supported.
</video>
Try with this code.
Related
I'm having some trouble displaying HTML5 video in IE9, I added the different types to my htaccess
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
This is what I have as html
<video id="video" autoplay loop preload>
<source src="video/final_loop.mp4" type="video/mp4" />
<source src="video/final_loop.webm" type="video/webm" />
<source src="video/final_loop.ogg" type="video/ogg" />
Your browser does not support the <code>video</code> element.
</video>
I also tried converting the video to Theora ogv format and use
<source src="video/final_loop.theora.ogv" type="video/ogv" />
But this doesn't work either, I thought .ogg was supported in IE9?
Internet Explorer 9 support MPEG4 using H.264 codec. But it also required that the file can start to play as soon as it starts downloading.
Here are the very basic steps on how to make a MPEG file that works in IE9 (using avconv on Ubuntu). I spent many hours to figure that out, so I hope that it can help someone else.
Convert the video to MPEG4 using H.264 codec. You don't need anything fancy, just let avconv do the job for you:
avconv -i video.mp4 -vcodec libx264 pre_out.mp4
This video will works on all browsers that support MPEG4, except IE9. To add support for IE9, you have to move the file info to the file header, so the browser can start playing it as soon as it starts to download it. THIS IS THE KEY FOR IE9!!!
qt-faststart pre_out.mp4 out.mp4
qt-faststart is a Quicktime utilities that also support H.264/ACC file format. It is part of libav-tools package.
Are you trying to use this on IIS?
If so, you have to add the appropriate mime types to recognize your video files:
<configuration>
<system.webServer>
<staticContent>
<!-- Video -->
<mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
<mimeMap fileExtension=".webm" mimeType="video/webm"/>
</staticContent>
</system.webServer>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
</configuration>
Here's some markup that works for me in IE9 (in the root folder, i have a "video" folder with my files):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Video Demo</title>
</head>
<body>
<video id='movie'
autoplay
controls
loop
preload=auto
playbackRate="1"
width="800">
<source src="video/video.mp4" type='video/mp4' />
<source src="video/video.webm" type='video/webm' />
</video>
</body>
</html>
As others have mentioned, IE9 doesn't support OGV, only MP4 and WebM (with plugin). I encountered a lot of trouble even with the MP4, which should play natively, before finding out that one thing to consider when serving MP4 files for IE9 is the file meta information called moov atom embedded in the MP4 file itself. If it's located at the end of the file, where some encoders including ffmpeg places it, IE9 will not start playing the video unless the whole video file downloaded. Relocating the moov atom metadata to the beginning of the file enables progressive download of the MP4 file, and IE9 handles the video nicely.
There's a tool called qt-faststart to perform this operation. Worked wonders for me, compiling and using the Linux command-line version distributed with ffmpeg.
make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4
See this page; it provides a solution to the poster issue with IE9, and expands on video codecs:
Some simple CSS and conditional statements did the trick. I'm now of the opinion posters should be placed at the beginning (first frame) and end (last frame) of a video, as if they were album covers. In this way, an image at the beginning and end of the video will give the viewer SOME visual idea of why they should play the video (just like the reason you buy an album sometimes is because of the cover).
Please be aware that for IE9, the video source must be given in the 'src' attribute of the video tag itself.
I suggest that you detect IE9 specifically and add that property to the video tag. You need to do it specifically for IE9 because Firefox on OSX won't accept the MP4 video file in src tag.
Hope it helps!
IE9 does not support Ogg/Theora. It will support WebM if you install the codec.
On the official Microsoft website there is this code snippets for video on IE9
<video width="400"
height="300"
src="video.mp4"
poster="frame.png"
autoplay
controls
loop>
This content appears if the video tag or the codec is not supported.
</video>
Try with this code.
I am using mediaelement js..
on my .htacces I have these..
AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm
and on my index.html I have this on my <head>
<script src="/js/jquery.js"></script>
<script src="/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="/js/mediaelementplayer.css" />
and the code is
<video width="600" height="450" preload="none" autoplay preload="auto" >
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="videos/Sequence1.mp4"/>
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="videos/Sequence1.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="videos/Sequence1.ogv" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=&file=videos/Sequence1.mp4" />
</object>
</video>
unfortunately.. its not playing on mozilla browser.. it keeps on loading but not playing..
and using the ctrl+shift+k on mozilla.. I found these error.
--
[18:47:12.942] Specified "type" attribute of "video/mp4" is not supported. Load of media resource videos/Sequence1.mp4 failed. # http://thesuperheroblueprint.com/
Please help me.. I really need to fix this so bad.. Here is the website..
MP4 type isn't supported on Firefox! It's only supported in Safari 3.0+, Google Chrome 5.0+ and IE 9.0+! For Firefox you'll need .ogg file or .webm video files as sources! Here is an image containing all supported video formats in HTML 5:
And for audio support see this pic:
UPDATE:
Firefox now supports MP4 H.264 (AAC or MP3)
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
Note: MP4s encoded with a high profile will not run on lower end
hardware, such as low end Firefox OS phones.
Firefox gives the error because it doesn't support video/mp4, it's nothing to worry about, something else is causing the problem. You could start by removing one of your two preload attributes although I don't think that's the main problem either.
If you load the webm video directly in Firefox it takes about 30 seconds and after it loads up the play point is right at the end of the video. If you load the ogv file directly it appears to play just fine. I would therefore conclude that there's something wrong with the encoding of your webm file, I'd try encoding it again with some different options.
As a side note, if you can't work out what's up with the encoding, there's really nothing in the video that requires it to be a video. It's basically a video of a slideshow, you might be better off implementing it that way, it would certainly reduce the bandwidth required.
Below is the code I am using for the video tag. I basically copy and pasted it off of the Video.js website (then updated with my own file names). At first I could get Chrome to work but not Firefox or Internet Explorer. Then I changed the "webm" tags to "web". This fixed issue with Firefox, but I still can't get any playback with IE9. It just shows up as if it trying to load. Right now I am simply trying to test it out using local files in the same root folder, so I don't think it is an issue with waiting for it to download. My video files range from 8.1 to 8.4 meg.
If anyone has any ideas one how to get this to play, it would be greatly appreciated. Thank you in advance.
The following is in the head tag:
`<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf"`
</script>
The following is in the html tag:
`<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="bdg-vid-poster.png"
data-setup='{}'>
<source src="bdg112412hr.mp4" type='video/mp4' />
<source src="bdg112412.web" type='video/web' />
<source src="bdg112412.ogv" type='video/ogv' />
</video>`
I'm not sure why you changed the name from webm to web - webm is the proper extension to use. That line should read:
<source src="bdg112412.webm" type='video/webm' />
Do you have valid video files for each of the three video types (mp4, web, and ogv)? What happens when you drag and drop the mp4 directly into IE9? Try the webm in Chrome and the ogv in Firefox.
If you are not certain your video files are valid, try downloading the sample files here. (See the "Download Video" links under the video).
Also helpful for me was the preload="auto" had to be preload="none" or else it waited to load the entire video before playing...a real drag...
Check the mime-type configured on the server.
I had problems with mp4 and IE9. And i just had to change the myme-tipe from video/mpeg to video/mp4.
Works fine on Chrome. Moreover, I'm using an ogg file so that's not the problem. I'm running on the latest version 9.0.1. HTML5 audio is supposed to be supported by both Chrome and Firefox.
<audio id="audio">
<source src="audio/Your_Hand_In_Mine.ogg" type="audio/ogg" />
<source src="audio/Your_Hand_In_Mine.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Most servers (including those used by GoDaddy) by default don’t serve the appropriate MIME Types for OGG files. That being the case, you’ll need set the appropriate MIME Types for OGG files if you want HTML5 audio players to work correctly in Firefox. So for an Apache server, you would need to add the following to your .htaccess file:
AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg
Evidently, other browsers will guess the MIME Type based on file extension if a MIME Type isn’t served.
If you want more info about this, check this page on the Mozilla Developer Network: https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media
http://support.mozilla.org/en-US/questions/758978
I found this useful in my case, since I had the proper mime types and still no luck:
You can't play MP3 files with such a code in Firefox.
See https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
<audio controls="controls">
<source src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/BajeLaCalle.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
You will have to use a normal object element to play that song in Firefox.
You can look these as an example:
<object data="music.mp3" type="application/x-mplayer2" width="xxx" height="xxx"><param name="filename" value="music.mp3"></object>
<embed type="application/x-mplayer2" src="file.mp3" height="xxx" width="xxx" >
try using some Audio libraries to deal with HTML5 audios. Because libraries handle various problems regarding html5 audios. Some libraries provide automatic fallback for flash audio if the browser is not supporting HTML5 audio. One of the best library out there is http://www.schillmania.com/projects/soundmanager2/
The solution is to properly convert the ogg file into mp3 or vice versa. The encoding was wrong when I just renamed the .ogg file to mp3, silly me. I used software called "Audacity" and "Switch" to accomplish this.
[See the updates! - Works on Android/IOS browsers but no where else. FireFox, Chrome, Opera, Safari all fail. Even though they are definitely HTML5 video tag ready]
Simply trying to stream a video using html5 tag. All I get is the video player controls and nothing else. This is so simple I assumed it should just work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie title</title>
</head>
<body>
<video id="movie" preload controls>
<source src="test.mp4" />
</video>
</body>
So where could I be going wrong? I've tried a lot more than this small snippet. I've tried other peoples example snippets. I've tried many videos, many formats (mp4, flv, ogg). I've tried viewing it in Chrome, Firefox, Android Embedded browser, Opera, IE9.
I can stream the file from the URL in programs like VLC without any issues.
I am beginning to think Apache2 might be the issue here although I figure the fact I can stream the URL from VLC without issue would suggest Apache2 is not the problem.
Any help appreciated. I'm pulling on hair here.
Update:
Whenever I try and access the URL of the video directory from within Chrome it seems to give me this error: Resource interpreted as Other but transferred with MIME type undefined
That error is definitely a server side problem, apache2 must not be configured properly somewhere?
If I access even a FLV file directory from the URL within my Apache2 server it gives this MIME type undefined error. It the video controls. Whenever I click play it spams the MIME type undefined a few times.
Update2:
Verified my .htaccess is being read
Added the following to my .htaccess:
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
Still not working, still see the MIME TYPE UNDEFINED in Chrome.
Update3:
Firefox and others can view the URL/test.mp4 without issue but NONE can get the video tag to work properly.
Update4:
Android can get the video tag to work now. The .htaccess change seemed to fix that. However not one single desktop browser can for whatever reason.
Firefox and Opera don't support MP4, and Chrome will drop support for it soon. It's a good idea to also add a WebM source.
Try adding the type attribute to the source declaration:
<source src="test.mp4" type="video/mp4">
Here is my html code from my site www.pi-corp.net. This allows for playback on all commercial browsers with fallback to flash.
<div class="video-js-box" style="width: 316px"><br><video class="video-js" width="320" height="240" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", {"url":"http://pi-corp.net/picvideo/PIChmi.mp4
","autoPlay":true,"autoBuffering":true}]}' /> <img src="http://pi-corp.net/images/PIC_no_playback.png" width="320" height="240" alt="Poster Image"
title="No video playback capabilities." /> </div> </object></video>