HTML 5 Video Novice

by **GrimChili** » Thu Oct 11, 2012 8:29 pm

Hello All!

Well i've decided to join a web forum as I've recently got back into some web stuff... Its been a while!

I have been trying to get a simple test working for some video at work and am failing miserably...

Im a total novice, I know some basic HTML, CSS, etc but yeah!

I've been trying to use that video for everybody bit of code and its killing me as I need to get it full screen in all browsers, i phones etc etc but I'm way out of my depth here lol! I've got it playing in some of the browsers others not, I'm currently testing on opera firefox and safari but it needs to work across the board... From my whole day at work spent trying to find an answer to this I just need to slay the beast... or am I asking what everyone else is asking?

Super simple code -

Code: Select all: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML 5 Video Test</title> <link rel="stylesheet" href="css/main.css" type="text/css" />    </head> <body id="index" class="home"> <div> <video controls="controls" poster="wrong.jpeg" width="640" height="360"> <source src="vidtest.mp4" type="video/mp4" /> <source src="vidtest.webm" type="video/webm" /> <source src="vidtest.ogv" type="video/ogg" /> <object type="application/x-shockwave-flash" data="vidtest.swf" width="640" height="360"> <param name="movie" value="vidtest.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashVars" value="controls=true&poster=wrong.jpeg&src=vidtest.mp4" /> <img alt="" src="wrong.jpeg" width="640" height="360" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download video:</strong> <a href="vidtest.mp4">MP4 format</a> | <a href="vidtest.ogv">Ogg format</a> | <a href="vidtest.webm">WebM format</a> </p> </div> </body> </html>

Also the test is live on http://www.milcon.me.uk

so... If anyone can help me out with this stuff Id be forever greatful!!!

Thanks People!

GrimChili!! :html5:

by **JAB Creations** » Thu Oct 11, 2012 8:45 pm

If you're going to support anti-standard browsers with H.264 it should be loaded after all compliant video sources.

In example...

Code: Select all: <video controls="controls" poster="wrong.jpeg" width="640" height="360"> <source src="vidtest.webm" type="video/webm" /> <source src="vidtest.ogv" type="video/ogg" /> <source src="vidtest.mp4" type="video/mp4" /> </video>

Unfortunately it's a political issues; major corporations are looking to make money by creating a monopoly codec with H.264 (e.g. a variation of the MPEG codec) which would close the web and see companies like Google charged probably hundreds of millions of dollars for posting video content so to preserve innovation you should not support royal and license burdened codecs.

Also if you're going to serve the document as XHTML 5 you should serve the correct mime which is application/xhtml+xml. Here is working PHP code to put in your headers that will produce fallback text/html for non-XHTML capable browsers...

Code: Select all: <?php $mime = stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'); if ($mime) {header('Content-Type: application/xhtml+xml');} else {header('Content-Type: text/html');} ?>

If you don't know server-side code then create a file named "_0_header.php" (headers must always be served first before ANY output including spaces and line-breaks otherwise they are not sent and error messages are sent) and include it.

In example...

Code: Select all: <?php include('_0_header.php'); ?> <!DOCTYPE html>

By coding to a higher standard you'll be able to produce more in less time instead of fumbling over small things like missing quotes. Firefox and (to an extent when it doesn't use the HTML parser for XHTML, intentional bug on their part) Opera will correctly break the page and display an XML parsing error message which is very useful to track down issues and correct them. This is provided you test things locally first.

by **GrimChili** » Thu Oct 11, 2012 8:58 pm

Hey JAB Creations thanks for replying so quick mate!

Really appreciate it!

Its gonna take me a while to totally understand what im doing mate and in turn understand most of that jazz you've just written down there man, however, I actually read what you wrote about H.264 earlier today... It may be a necessary evil when this particular project is for work, need to be able to full screen on all the common browsers, and work in phones etc, my boss wants everything future compatible, prrf i got some serious learning to do! forgot how little i knew lol! however I read also that if I was to drop it down the order in the code it would stop working on the iPad/iPhone? know anything bout that?

Im beginning to think embedding from vimeo would be easier... What u think?

Thanks Again

Grim Chili!

by **JAB Creations** » Thu Oct 11, 2012 10:20 pm

Not a problem, I mostly mod against spam though there are some things I can help out with.

If you drop the MP4 down in order does testing it break in Safari on Apple mobile devices? If so that's a blatant anti-competitive measure and an intentional bug on behalf of Apple. I don't have money or mindlessness to buy and thus test this out so let me know with a reply please.

Vimeo would be an acceptable option and you could still fallback using the video element as alternative content when the Flash plugin is not present...

Code: Select all: <object data="example.swf" style="min-height: 20px; min-width: 100px;" type="application/x-shockwave-flash"> <video controls="controls" poster="wrong.jpeg" width="640" height="360"> <source src="vidtest.webm" type="video/webm" /> <source src="vidtest.ogv" type="video/ogg" /> <source src="vidtest.mp4" type="video/mp4" /> </video> </object>

by **GrimChili** » Thu Oct 11, 2012 10:32 pm

Hey mate,

What I mean't about the thing with Ipad and .mp4 is mentioned on here somewhere...

http://designfestival.com/implementing-cross-browser-video-playback-in-html5/

Well i gots to call it a night, if you got anymore advice mate id be happy to hear it, fortunately I still need to make the video first so I've got some time! So just for the record, there's really no way to get it to support on everything right? short of using some other player or something? ugh my brain is fried haha!

Thanks again!

Grim Chili

by **JAB Creations** » Fri Oct 12, 2012 1:29 am

Again test the Apple product first, if true it's blatantly political and I have nothing but doubts about it being a legitimate bug. Going with a third party provider using a Flash object with video element as fallback seems the most reliable way to go.

by **zcorpan** » Fri Oct 12, 2012 10:35 am

Fullscreen isn't supported everywhere yet. Opera supports it in 12.10. If you want fullscreen support in browsers that don't support the Fullscreen API, you should probably use Flash and fall back to <video> if Flash is absent.

I'd recommend against using XHTML and instead recommend validating. Validation catches more issues, using XHTML punishes end users when an error gets through.

If you use the type="" attribute on the source element, it doesn't matter much which order you put the sources; the browser will download the first source it supports and skip those it doesn't. It makes sense to put better-compressed formats first so browsers that support multiple formats choose the better one (i.e. WebM and MP4 before Ogg).

Old iPhone had a bug (you can speculate about it being deliberate, though I doubt it) where it only looks at the first source element. If you care about old iPhones, you need to put MP4 first.

HTML 5 Video Novice

HTML 5 Video Novice

Re: HTML 5 Video Novice

Re: HTML 5 Video Novice

Re: HTML 5 Video Novice

Re: HTML 5 Video Novice

Re: HTML 5 Video Novice

Re: HTML 5 Video Novice

Who is online

Who is online