I have a video and I want to display it on a webpage. I have saved it in several formats, an for IE i am using an MP4 file encoded with H.264.
I have tried both the video and the HTML code on my PC, and it works, but what I upload it to the server it doesnt (it says the media type is not compatible). I have tried accessing the video from the HTML page on my PC, and it gives the same error, so I think the error may be on the server sending an incorrect MIME TYPE (I have already specified "video/mp4" on the video tag).
Do you guys know how can I fix it?
<video controls autoplay poster="images/logobig.png" style="width:610px;">
<source src="videos/1.mp4" type="video/mp4" />
<source src="videos/1.ogg" type="video/ogg" />
<source src="videos/1.webm" type="video/webm" />
Your browser does not support HTML5
</video>
Finally I solved it, adding
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
to .htaccess
Related
I'm trying to play a video in a tag on a plain html page. I have a video in Premiere which i have tried to export both as webm and mp4 (h264) which is located in the same directory on the FTP server as the html file. No matter which codec i render in, the player stays blank (white) and GET errors appear in the output console:
GET Errors
As you can see the video files are clearly in the same directory on the FTP server:
Files on FTP server
The GET error has been replaced with a 404 error sometimes when using different presets with both webm and h264. As far as i know webm and h264 are especially suited for html5 web-players, adobe has tons of different presets, so I really don't get why this has to be such a tricky problem to solve. It is impossible to find someone else with the same problem and this irritates me even more.
We use Azure as web hosting, so if there are any default setting prohibiting video display or similar, tell me!
[EDIT]: Here's the html code for video_presentation.html:
<video width="100%" height="100%" controls>
<source src="course_introduction.webm" type="video/webm">
<source src="course_introduction.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
PLEASE HELP!
And thanks in advance.
Try This
For multiple video clips as you have mentioned above, for maximum HTML5 video browser compatibility you need to make 3 different versions of your video. You can embed multiple HTML5 videos into web pages in a HTML5 video element, below is the HTML5 Video markup example for multiple videos:
<video width="640" height="360" controls>
<source src="ftp or http://path/course_introduction.mp4" type="video/mp4" />
<source src="ftp or http://path/course_introduction.webm" type="video/webm" />
<source src="ftp or http://path/course_introduction.ogv" type="video/ogg" />
</video>
enjoy!!!
You might need to add the mime types to the sites .htaccess file:
AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm
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).
HTML5 video wont play videos and I cannot play them directly from the server but they play in firefox and opera locally. I cant figure out what Im missing. Took this tag straight from w3c
<video width="500" height="300" controls>
<source src="video.ogv" type="video/ogg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
ERROR is "No video with supported format and MIME type found"
EDIT: Error when accessing video directly in firefox is...
"Video playback aborted due to network error."
Add the following lines to your web-server's ".htaccess" file:
AddType video/mp4 mp4 m4v f4v f4p
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
This clears up supported format/MIME type issue.
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!