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
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've read other answers on here regarding this issue but none help. I'm trying to use the HTML5 video in Safari, but it just won't show up at all. For reference view: http://www.shaun-pelling.com/malagnini/index2.html - (the video is found on the slider at the top, just click the slider arrow left once).
It shows up fine in all other browsers but Safari.
htaccess file:
<Files ~ "\.(mp4|m4v)">
AddType video/mp4 mp4
order allow,deny
allow from all
satisfy any
</Files>
AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm
HTML Code:
<video width="100%" controls="controls">
<source src="/malagnini/video/paradise.mp4" type="video/mp4" />
<source src="/malagnini/video/paradise.ogv" type="video/ogg" />
<source src="/malagnini/video/paradise.webm" type="video/webm" />
</video>
This is now solved. You need Quick Time installed to view HTML5 videos in Safari when on Windows.
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 having trouble making an HTML5 video play. It wont play in any browser and in Firefox, it says "no video with supported format and MIME type found". I have read several places that say to change the htaccess file on the server which I have done by adding:
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
AddType audio/webm .weba
AddType video/mp4 .mp4
AddType video/x-m4v .m4v
at the top of the file, but the problem is still there...
Here is the HTML code:
<video controls="" width="944" height="416">
<source type="video/mp4" src="video/julebord2.mp4"></source>
<source type="video/webm" src="video/julebord2.webm"></source>
<source type="video/ogg" src="video/julebord2.ogv"></source>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
Does anyone know what the problem could be?