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.
Related
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).
I have the following code to play HTML5 video on website:
<video autoplay loop poster="">
<source src="http://www.domain.com/uploads/videos/video.mp4" type="video/mp4;">
<source src="http://www.domain.com/uploads/videos/video.webm" type="video/webm"/>
<source src="http://www.domain.com/uploads/videos/video.ogg" type="video/ogg"/>
<p> Your browser does not support HTML5 video. Please upgrade to a modern browser to view the video.</p>
</video>
I tried this on Firefox 3.6 and it shows a blank page instead of playing the video. Is there a way to fix this? Thanks.
Firefox 3.6 does support HTML 5 video, so the behaviour you are experiencing is correct.
Use JavaScript to detect when no sources have loaded and provide alternatives with DOM manipulation.
Your server is probably serving it as application/octet-stream.
Check your content types are correct:
.ogg application/ogg
.ogv video/ogg
.mp4 video/mp4
I don't know your server setup but if you are using apache add this to your .htaccess:
AddType application/ogg .ogg
AddType video/ogg .ogv
AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
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!
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.
I am trying to show some videos on a website using HTML5. On my local copy the video work perfectly on every browser (ie...Chrome - Version 19.0.1084.56, Safari - 5.1.7 and FireFox - 13.0.1.) However, once I push the video to the live site FireFox seems to stop working. All I get is text stating, "No video and supported format and MIME type found." I have look all over the web and can't not seem to figure this out.
So far I have tried:
1.) Changing the order of the video sources(Moving FireFox video type to the top).
2.) I have reloaded the videos to the live website.
3.) Added the 'Codecs' to the file time. Nothing seems to work. Am I missing something? The only difference I can see is the live site is (https://). However that shouldn't matter. Any ideas or help would be awesome!
<video width="685" height="451" controls preload="none" poster="/video/office_safety.jpg" id="video">
<source type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' src="/video/office_safety.mp4" ></source>
<source type='video/ogg; codecs="theora, vorbis"' src="/video/office_safety.ogv"></source>
<source type='video/webm; codecs="vp8.0, vorbis"' src="/video/office_safety.webm"></source>
</video>
maybe you need to add mime types to htaccess file:
#AddType TYPE/SUBTYPE EXTENSION
AddType audio/mpeg mp3
AddType audio/mp4 m4a
AddType audio/ogg ogg
AddType audio/ogg oga
AddType audio/webm webma
AddType audio/wav wav
AddType video/mp4 mp4
AddType video/mp4 m4v
AddType video/ogg ogv
AddType video/webm webm
AddType video/webm webmv