HTML5 video not playing now I've put it live - html

Developing a site with html5 video, the video works fine in my localhost - MAMP and plays as it should, when it should however I've just put it live in a dev.example.com sub-domain and it is just showing the paused first frame of the video.
I have put the following in the .htaccess file:
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
An example of the code used for one of the videos is -
<video id="myVideo" autoplay muted loop>
<source src="manu_apollo2.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="manu_apollo2.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="manu_apollo2.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
If you link to videos directly through with the file extension on the domain then they load and work as normal.
Not sure if I'm overlooking something important, I believe I've encoded the videos correctly.
Anything glaringly obvious to anyone...
Many thanks!

Related

How to embed a video in HTML that works in IE

I'm trying to embed some videos in my HTML. However, the video doesn't work in IE 10 and says invalid source. Here's what I have:
<video width="320" height="240" controls>
<source src="banana.mp4" type="video/mp4">
<source src="banana.ogg" type="video/ogg">
Your browser does not support this video!
</video>
I'm not even getting the message saying that the video isn't supported. Could this be a problem with my video?
Here's a fix that appears to be working for people. Simply install Windows Media Player if you don't have it. Also your video file must be in the same folder as your HTML page on the server
try adding:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
to .htaccess hope it could help :)
or you can view this link :
MP4 html5 video not working on IE10
I used this in one of my project
<video width="640" height="360" controls="controls" autoplay="autoplay">
<source src="videopath" type="video/mp4">
<object data="" width="640" height="360">
<embed width="640" height="360" src="videopath">
</object>
</video>

HTML5 video wont play

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.

video js init error

I use the videojs as a html5 video player. but when the page was load, some errors like(firebug):
Video Error Object { originalEvent=Event error, type="error", timeStamp=
But the video is played normally after this, but I am afraid this will cause some unknown problems.
I use the videojs like:
<video id="my_video_1" class="video-js vjs-default-skin" preload="auto" width="640" height="480" data-setup="{}">
<source src="movie.mp4 " type='video/mp4'>
<source src="movie.ogv" type='video/ogg'>
</video>
Someone said that add this to htaccess file of /var/www/, or add them to apache httpd.conf file,
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
But it doesn't work yet.
What's the problem?

HTML 5 video cannot play on Firefox 7

I want to embed a video in the webpage, I use the following code:
<!-- Video Section-->
<video controls="controls" width="640px">
<source src="media/videos/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="media/videos/video.webm" type='video/webm; codecs="vp8, vorbis"'/>
<source src="media/videos/video.ogv" type='application/ogg; codecs="theora, vorbis"'/>
</video>
So I can play this video on Safari, Chrome, but cannot on Firefox. I think Firefox support both ogg and webm video, so I don't know what's the problem. I only saw a gray block with a cross mark inside.
p.s. I used to use type='video/ogg', it didn't work, so I change to this type='application/ogg' based on googled suggestions, but this still doesn't work.
Thanks!
probably server settings. if you're on apache, check your mime.types file and see if or set these
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

.ogg video not playing in firefox

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!