Hello. Never done this. It seems strait forward. Let me know if there are any things I’m missing in regards to how I plan on doing it please? I was just going to youtube embed it into my site but there is quite a bit of quality loss. Hoping there won’t be with html 5?
So I have a .mov. Going to convert it to the 3 different video types (H.264, Theora OGG, and WebM) needed by using this free software http://easyhtml5video.com. Then use this code to embed it. Is this all correct??? Any better ways???
<video width="320" height="240" controls autoplay poster="video.jpg">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Your code is only referencing two of the three formats you are going to convert it to and so will not work for browsers that only support the one you left out.
You made a mistake by including autoplay in there—not a coding mistake, but a moral mistake.
These days, you only need the mp4 and webm formats.
In my experience, embedding a YouTube video does not affect its quality, though. You can set what quality the YouTube video runs at by default in the video parameters. E.g.
So I’m clear!? Html5 video just needs the simple video tag and source stuff. It does not need js to function? Correct? Sort of. The browser uses its own built in js to play it with its controls. Turning js off makes it not work. So I assume that’s what’s going in. Is that right?
No it doesn’t need JS to function (unless the browser is implementing it internally through JS as a temporary patch until proper native support can be implemented).
I believe you guys may be mistaken. Html5 video test pages with all three media types, and no js in the source, fail to play the video if js is turned off. I think (I may be wrong) that the browser uses it’s own built in js engine to display the controls. And without the controls no worky. Anybody know??
Perhaps they have just patched it into Safari using JavaScript until they find out whether it will be a part of the final HTML5 standard and will build it in properly if it still exists when HTML5 finally becomes a standard.
OK here is the code i’m using for now. After days and days and more days of testing this is what seems to work the best. Using a m4v file first is how easyhtml5video generator does it in its code. Regardless of conversion type and method, when using mp4 my video would hang on my iPhone under 3g conditions. Using mv4 instead with a mp4 fallback seems to cure it. I haven’t been able to make the m4v version hang yet in my testing. Easyhtml5 withholds the type in the source on the mp4 - I don’t know why but i did too.
<video width="776" height="556" poster="image.jpg" controls autoplay loop>
<source src="virtual-tour.m4v" type="video/mp4">
<source src="virtual-tour.webm" type="video/webm">
<source src="virtual-tour.ogv" type="video/ogg">
<source src="virtual-tour.mp4">
<p>Sorry, your web browser does not support the HTML5 Video. You may <strong>Download the Virtual Tour instead:</strong> <a href="virtual-tour.m4v">M4V format</a> | <a href="virtual-tour.webm">WebM format</a> | <a href="virtual-tour.ogv">Ogg format</a> | <a href="virtual-tour.mp4">MP4 format</a></p>
On a MAC I used handbrake to convert the m4v and mp4. All other programs tested desaturated it a bit. Handbrake did not. I used Miro video decoder to convert the WebM - but gives horrible results on the Ogg extension so had to look elsewhere. I used cloud convert.org to convert the ogv/ogg extension - using 2500 video bitrate settings. Large file but anything less was very unacceptable quality.
Any idea why when the video is in fancybox the buffering indicator (the line shows that it is loading faster than being played) does not indicate? Just a solid white line. When I load it outside of fancybox the buffering indicator shows as expected.
Note it plays either way. Just no buffering indicator in fancybox one. Strange. Google lights nothing on it.
