I prepared 3 video formats for my site:
/assets/video/background-purple.ogg
/assets/video/background-purple.webm
/assets/video/background-purple.mp4
on the site http://tekhy.net/
I use <video> tag for play the video:
<video webkit-playsinline autoplay="autoplay" loop="true" poster="/assets/video/transparent.png">
<source src="/assets/video/background-purple.ogg" type="video/ogg">
<source src="/assets/video/background-purple.mp4" type="video/mp4">
<source src="/assets/video/background-purple.webm" type="video/webm">
</video>
And I've setted the correct mimetype for my videos into .htaccess:
AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
AddType video/ogg .ogv .ogg
In Google Chrome and Chromium all works well, on Firefox Mobile works well too. On Firefox Nightly 21.0a works well.
But on Firefox 18.0.1 on Elementary OS Luna it won't work.
Firebug tells me that it can't decode webm and ogg/ogv media (mp4 is not supported by Firefox atm).
I've tried also with background-purple.ogv type="video/ogv" but the problem remain.
My webm video is:
Google/On2's VP8 Video (VP80)
Planar 4:2:0 YUV
Currently I've really not idea on how solve this problem.
Any suggestion?
I believe this problem is related to a bug stemming all the way up to FF 20, where a lot of the popular webm encoders are inserting negative timestamps and firefox can't play the video until it downloads the whole webm file:
https://bugzilla.mozilla.org/show_bug.cgi?id=868797
The fix is mentioned in the comments:
ffmpeg -i input.webm -codec copy -avoid_negative_ts 1 output.webm
The important encoding flag being -avoid_negative_ts 1
Seems I've found a solution:
I switched my ogv codec from VP8 to Theora and now Firefox can play video correctly.
I used this code for the source:
<source src="/assets/video/background-purple.ogv" type="video/ogg">
The MIMEtype is:
AddType video/ogg .ogv .ogg
And the codec is:
Xiph.org's Theora Video (theo)
I guess it could work also for .webm but I've not tested it.
Chrome is a bit buggy with HTML5 video. Do as Fez suggested, or simply just use .mp4 and .webm. WEBM is more stable in Chrome and you only need these two formats for browser compatibility. This also saves you time rendering your videos!
Related
So I've read countless posts about this issue as it seems to be a common one but I've tried everything and I can find.
Here is the html
<video toggle-play autoplay loop>
<source src="url.ogg" type="video/ogg">
<source src="url.webm" type="video/webm">
<source src="url.mp4" type="video/mp4">
</video>
I've added these MIME types to my .htaccess
AddType video/mp4 .mp4
AddType audio/mp4 .m4a
AddType video/mp4 .m4v
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
I've tried changing the order of the different sources. I verified the video is using the H.246 codec for video and AAC codec for audio. I also made sure that my server isn't Gzipping the files it gives me.
The video works on all other browsers and all versions of IE in windows 10. Unfortunately the client needs it to work in windows 7.
Here is a working copy of the video if you want to look at it
http://ac.anthonyvespoli.com/html/home/home.html
Starting to get pretty frustrated. At the moment a flash fall back is not an option. Please help :)
The format .ogg and .webm don't work in IE check http://caniuse.com/#search=video
but .mp4should ... try comment the other one .. anche check better if the codec is the codec MPEG-4/H.264
I found out that even though the codec was MPEG-4/H.264 that it was AC1 which apparently is not supported out of the box in windows 7. Converted the file to .avi and it works fine.
Sup guys.
Same issue here:
HTML5 video not playing in Firefox
except my background video is still not showing after I added
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
to my .htaccess file I created in the same folder as my videos
This is the page its supposed to play in:
http://wearerocketscience.com/wordpress/contact/
Please help :) TY
I saw this answer at Firefox won't play .webm and .ogv videos with HTML5
Taken from Fez Vrasta:
Seems I've found a solution:
I switched my ogv codec from VP8 to Tehora and now Firefox can play
video correctly.
I used this code for the source:
The MIMEtype is:
AddType video/ogg .ogv .ogg And the codec is:
Xiph.org's Theora Video (theo) I guess it could work also for .webm
but I've not tested it.
While the server seems to serve the correct mime types (webm and ogv play just fine when accessing directly) your <source> definitions are bogus:
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="http://wearerocketscience.com/wordpress/wp-content/themes/twentytwelve/videos/contact.mp4"
type="video/mp4">
<source src="http://wearerocketscience.com/wordpress/wp-content/themes/twentytwelve/videos/contact.webm"
type="videos/webm">
<source src="http://wearerocketscience.com/wordpress/wp-content/themes/twentytwelve/videos/contact.ogv"
type="video/ogv">
</video>
It is video/webm (not videos) and video/ogg (not ogv).
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
Using VideoJS I'm having issues with the webm format failing to play back in Firefox.
After researching this issue here I made the appropriate changes to my htaccess file. That fixed ogg and ogv playback, but not webm. I've tested the webm video file itself and it plays back fine in VLC player.
The mp4 format and flahs formats work great. Thanks in advance for any ideas on this.
htaccess:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .web
HTML excerpt:
<video id="abacus_holiday_video" class="video-js vjs-holiday-skin" loop autoplay controls
preload="auto" width="640" height="390" poster="my_video_poster.png"
data-setup="{ }">
<source src="abacus_holiday.webm" type='video/webm'>
<source src="abacus_holiday.mp4" type='video/mp4'>
</video>
.htaccess maps extensions to mime types. Your extension in the code i.e. on the end of the src attribute is .webm but your mime type mapping is .web so there is no match.
Either change/add a mapping in htaccess for webm i.e.
AddType video/webm .webm
or rename the file to .web.
The former seems best FWIW.
We're just getting started with html5 video, and cannot seem to get .ogg files to play in Firefox, any tips? Here is the source we are using:
<video width="640" height="360" poster="http://video.thewebreel.com/episode_001/episode_001.jpg" controls autoplay autobuffer>
<source src="http://video.thewebreel.com/episode_001/episode_001.ogg" type="video/ogg" type='video/ogg; codecs="theora, vorbis"'/>
<source src="http://video.thewebreel.com/episode_001/episode_001.mp4" type="video/mp4" />
</video>
The live example can be seen here:
http://thewebreel.com/2010/05/02/episode-1.html
However we are totally baffled, everything seems exactly right.
I uploaded your .ogg to my server suspecting it was a server issue and it's working fine on my server
I'm guessing it's because your web server is replying with
Content-type: binary/octet-stream
Try adding the mime types to nginx...
Open up the Nginx mime type configuration file, eg: /etc/nginx/mime.types
Add these lines after the last video mime type
video/ogg ogm;
video/ogg ogv;
video/ogg ogg;
In one of the links mentioned, the correct way to play ogg files is..
<audio preload="auto" controls="controls">
<source src="media/song.ogg" type="application/ogg">
</audio>
Thanks to the person who pointed it out here.
HTML5 video (mp4 and ogv) problems in Safari and Firefox - but Chrome is all good
The correct mime types to set on your server are
AddType audio/ogg .oga (audio oga file)
AddType video/ogg .ogv (video ogv file)
AddType application/ogg .ogg (for audio and video)
Sources:
http://wiki.xiph.org/MIME_Types_and_File_Extensions
https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media
Ogg videos play were playing on Firefox 3.6 but not 4.0.
Here's the solution: video autobuffer controls preload="auto" instead of video controls preload="none"
This works in Firefox 3.6 and 4.0 and now MSIE 9!