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.
Related
I'm looking for a little more direction, I've researched other similar issues here, but can't make it work for my isssue.
The following code works in Chrome, but not Firefox. Both browsers are updated to their current versions.
<video width="576" height="432" autoplay muted="muted">
<source src="http://files.enjin.com/632721/Video/My_Movie.ogv" type="video/ogv">
<source src="http://files.enjin.com/632721/Video/My_Movie.webm" type="video/webm">
<source src="http://files.enjin.com/632721/Video/My Movie.mp4" type="video/mp4">
</video>
I'm not sure what I may be missing to make it work in Firefox. I've given up on Internet Expoder (and don't care about IE anyways)
The source page is www.reallybadplayers.com If you want to see how it's implemented in each browser.
Future thanks to any help I receive.
The mime type of http://files.enjin.com/632721/Video/My_Movie.ogv is binary/octet-stream
The mime type of http://files.enjin.com/632721/Video/My_Movie.webm is also binary/octet-stream
You need to serve the files with the appropriate mime type for them to work. For ogv that's video/ogg, or webm it's video/webm and for mp4 it's video/mp4
How you set the mime type depends on the server you're using to serve the files. You'll need to read the documentation for that server.
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'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 serving a video via the HTML5 video element. I'm finding conflicting information about the appropriate MIME type for m4v video. Most demos set the type attribute to video/mp4 in the source tag in the markup. Some articles I've read indicate video/m4v for the web server Mimetype, while others indicate video/mp4. Which is correct?
See for example, this article indicating video/m4v mimetype: http://html5center.sourceforge.net/make-your-html5-video-play-on-mobile-devices
And this article indicating video/mp4: http://www.coolestguyplanettech.com/use-html-5-video-on-all-browsers/
The standard media type is video/mp4.
The standard mp4 container format is commonly used for both AAC audio, and H.264 video + AAC audio. These have different media types, audio/mp4 and video/mp4, however often you want different applications for audio and video and on some systems it is only possible to associate a default application with a file extension. Therefore it has become popular in some circles to use the extensions .m4a and .m4v for audio and video(+audio), respectively, in an mp4 container. However this does not affect the media type, which already distinguishes these using the audio or video prefix.
A twist, however, is that Apple started using their own media type, video/x-m4v, for videos from their store, which are in an mp4 container and use a .m4v extension. This is set to open the video in iTunes by default. Sometimes that is necessary because the video uses DRM, AC-3 Dolby Digital audio, or other capabilities that are not commonly supported in an mp4 container, but which are supported by iTunes for files with a .m4v extension. If you rely on such capabilities then you may want to use this media type instead of the standard one.
Media types with no x- are standardized in an RFC and tracked by IANA. No media type with the name video/m4v has been standardized. Non-standard media types have a x- prefix.
I only write HTML5 for special projects, but I've had a problem which I was able to solve quite by accident. In my blocks, I was writing the video code like this:
<source src="Videos/myvideo.mp4" type="video/mp4">
<source src="Videos/myvideo.webm" type="video/webm">
Here was my problem: If I put the mp4 line first, Google Chrome would play the video part, but there would be no sound. If I put the webm line first, Google Chrome would play the video and sound correctly, but Apple Safari would not detect the video at all. Even if I added the codec information in the type= statement, it had no effect.
I was about to cave in and try to use Flash, but I happened on the solution, mostly by accident. In the line for mp4, I replaced the type="video/mp4" with type="video/m4v". It cured the problem completely! Note: I did not change the video file extentions from mp4 to m4v -- I only used m4v in the type= statement.
I couldn't find any documentation to tell me to do this, I just got interested in the difference between .mp4 and .m4v file extentions, and started playing around. I use Linux (Xubuntu) and I had created my videos as both webm and H.264 mp4 files, using Openshot Video Editor. Maybe the inner workings of Openshot caused this to be an issue, but anyway -- that's how I solved this problem. My mp4 videos play perfectly. I hope this helps somebody else -- MinnesotaJon
Answering this 8 years later with actual testing in Brave Version 1.22.70 Chromium: 89.0.4389.105 (Offizieller Build) (64-Bit) and Firefox 86.0.1 (64-Bit) on Linux.
<video controls="" controlslist="" preload="metadata">
<source type="video/m4v" src="https://example.com/v.m4v">
</video>
Does NOT work.
But video/x-m4v and video/mp4 both work with the m4v file I am testing with. I guess it's best to use x-m4v based on the accepted answer.
Actually that totally depends on which video container you are using. Most browsers support the webm and/or mp4 file formats. Serving a combination of these two sourcefiles ensures browsers kan view the file. There's also the .ogg format if you wish to include it.
Not so sure about the m4v format, but it sounds like it's not one commonly used on the web. Anyway, I'd say serve m4v with a video/m4v MimeType and mp4 as a video/mp4 MimeType.
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.