html5 mp4 video on IE - path to file from AWS S3 - html

I am having an issue playing video on IE.
When i have the path to the mp4 video is local such as this, it works:
<video poster="myVideo.png" preload="none" controls="controls">
<source src="myVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="myVideo.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="myVideo.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
But if it's hosted on a URL path like this, IE does not play the video:
<video poster="https://s3.amazonaws.com/assets/myVideo.png" preload="none" controls="controls">
<source src="https://s3.amazonaws.com/assets/myVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="https://s3.amazonaws.com/assets/myVideo.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="https://s3.amazonaws.com/assets/myVideo.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
What could be the problem?
Fixed:
Ensure that, when you save your video file to S3, you must specify the Content-Type:
Also for IE's poster to appear, you'll need preload="none" inside the video tag:

Related

How do i make a video loop in HTML?

I am trying to make a looping iframe with no controls which will loop.
<iframe
src="yeet.mp4" allow="autoplay" controls="false" loop="true" style="display:visible" id="iframeVideo">
But it has controls on and is not looping. How do i fix it?
Just remove the loop="true" and leave it as an attribute without value like so
<video loop src="yeet.mp4" autoplay>
Your browser does not support HTML5 Player
</video>
The best way to go about this is via Javascript
<video width="320" height="240" autoplay loop>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
loop ="true" is no longer supported, as is autoplay="autoplay"

Video not playing on Apple products

I'm playing a video through the browser using:
<video class="video">
<source src="video.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
It's not working on Apple's through Firefox which I understand is because I'm using the H.264. How do I render to play on an Apple with Firefox as well?
<video class="video">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

html5 video stopped working in firefox v22

<video id="video" width="1024" height="576" autoplay="autoplay">
<source src="epm.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="epm.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="epm.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video
this code used to work, and still works in other browsers (Chrome and safari) what has changed in firefox ?
I suggest removing the codecs and let the browser figure out if it can play the video for itself, it's usually safest.

Videos not playing in certain browsers (I.E.10)

i am trying to get a video to play in all browsers, however while it works perfectly fine in chrome, in firefox it comes up with an error, and in I.E. 10 the video box loads up but does not run
here is the code :
<video id="myVideo" width="100%" controls="controls">
<source src="..\resources\Tutorial\video.ogg" type='video/ogg; codecs="theora, vorbis"' />
<source src="..\resources\Tutorial\video.mp4" type='video/mp4;'/>
</video>
how can i get my video to play in all browsers ?
Thanks guys :)
tried :
<video id="myVideo" width="100%" controls="controls">
<source src="..\resources\Tutorial\video.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="..\resources\Tutorial\video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="..\resources\Tutorial\video.ogv" type='video/ogg; codecs="theora, vorbis"' />
Video tag not supported. Download the video here.
</video>
but no luck either, same as above
Simple solution
the slashes above are the wrong ones, it should be / now all is fine in all browsers apart from I.E 10, no errors just does not run

Getting video to show up in IE and FF

I'm setting up oneweekfatloss.com but having trouble getting video to show up.
It works in Chrome and Safari, but not in IE and FF. I've created an mp4 and .ogv file.
Am I doing something wrong with my html?
<video width="720px" height="420px" autoplay>
<source src="https://s3.amazonaws.com/paleojumpstart/paleovideos/Paleo+Sales+Video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="https://s3.amazonaws.com/paleojumpstart/paleovideos/Paleo_Sales_Video-OGV.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object data="https://s3.amazonaws.com/paleojumpstart/paleovideos/Paleo+Sales+Video.mp4" width="720px" height="420px">
<embed type="application/x-shockwave-flash" src="https://s3.amazonaws.com/paleojumpstart/paleovideos/Paleo_Sales_Video-Flash.flv" width="720px" height="420px">
</object>
</video>
EDIT: I realized I hadn't set the permissions correctly on Amazon s3. That solved the FF problem. IE's still not working, though.
EDIT2: IE will play the video if I open the page locally, but not from my server.
See these pages for format compatibility: WebM, Mp4, and Ogg. FireFox only supports WebM and Ogg. IE does not support the standard <source tag. Here is a code excerpt from MSDN:
<video width="400" height="300" poster="frame.png" autoplay controls loop>
<source src="video.ogv" type='video/ogg; codecs="theora,
vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'>
</video>
You can test video format campatability on this page: http://ie.microsoft.com/testdrive/Graphics/VideoFormatSupport/Default.html