10 replies to this topic

[mrdee]

Hi,
It seems like HTML5 is beginning to take off.

I received the latest update of my HTML Editor (Coffeecup), which now seems to support HTML5.

However, after reading thorugh the PDF document about HTML5 and CSS3 that came with it, and trying out a simple command, it does not seem to do what it promises at all.

I used the <video></video> command to try and display a video on a web page and laid it out as follows:

Quote

<video src=”SV_A0010.mp4” controls poster=”poster.jpg” width=”400” height=”500”>
<a href=”SV_A0010.mp4”>Download this movie.</a>
</video>

I obviously uploaded the video file to my server.

However, when I tried to run that page, In IE8, I saw a link "Download this movie", and when I clicked on it, the film clip played externally.
In Firefox, a square came up that showed the controls for a second and then they disappeared, only to leave me with a dark gray square with a faint, big X in the middle.

In Google Chrome, a small portion of what looked like a "Play" button appeared, but nothing further happened.

I know that not all browsers are fully ready for HTML5 yet, but I had expected a bit more from it, also, examples that some specialised sites put on display DO seem to work.

Can anyone help me further in telling me whether my browser is at fault or whether my code is wrong?

Thank you in advance.

[rpgsearcherz]

Well in terms of a file playing externally, that happens when the browser doesn't support the code you're using, or the program you need to launch it with doesn't support being embedded in your browser.

I don't know enough about HTML5 and the new markup to really give any more information than that.

[truefusion]

I'd be surprised if Internet Explorer 8 even supported one HTML 5 element. Don't expect anything from Internet Explorer until at least Internet Explorer 9. If i'm not mistaken, the VIDEO element was introduced to so web designers could create their own UI theme for the web browser media player rather than having some other design that doesn't match their site. I have not done any research on how to actually implement the VIDEO element, so i cannot help you on that, but i would suspect there to be some attribute that you specify that is used to designate or provide the geometry of the buttons so when the user clicks on a certain area, the relative function would be called. CoffeeCup, like any HTML editor, should be able to provide you with a list of supported attributes for that element.

I'm sure HTML 5 is still a draft, so more things may be introduced or changed or removed, and so i would assume the only HTML 5 elements that CoffeeCup supports is whatever has been made final in the draft. Its move to support HTML 5 elements (and CSS3), i would assume, is mostly for future-proofing their software and to reduce their work in that area in the future.

[Saint_Michael]

Last I knew IE8 barely supports HTML5 and only covers various parts of CSS3, however, expect IE9 to fully support HTML. So, you will have to use XHTML standards in order to run videos or design a javascript that identifies which browser is being used and display that layout.

Right now IE9 is not in public beta testing and so you have to wait sometime later this year for, even then it will be awhile before anyone switches to IE9. So it is best to stick with XHTML standards for video.

[Little Asterisk]

Hi,

Hate to interrupt (joking, of course I love to interrupt ), but Chrome and Firefox should render the Video element correctly. If they're not, that means something is wrong with your code.

Now, I'm not too familiar with this element, but after a short search on Google I came to this assumption; your code is wrong. Again, I don't know that much about <video>, but here's what I can tell from your code:

1. Why is there a controls attribute empty?

2. Can you actually put an anchor tag in between a video element? (I mean, is it allowed?)

3. Try one of these solutions (okay, not actually a question, but rather an answer ):

<video style="width:480px;height:270px" poster="media/bbb480.jpg" durationHint="4:44">
<source	src="media/bbb.flv">	
<source src="media/bbb.ogv"/>
</video>

<!-- According to the site I'm about to mention, that way you can 
make a fallback for browsers that don't support Flash videos -->

And the second one:

<video height="270" width="480" src="media/bbb.ogv" poster="media/bbb.jpg" durationHint="0:4:44"></video>
<!-- This one is a skinnable video, but you get the deal. 
Just replace the source and other attributes as desired. -->

These examples can be found at http://www.html5video.org/demos/ (the actual site being http://www.html5video.org/).

(Offtopic: I suggest you take a look at the video they're using as a demonstration, it's killer and made totally in Blender! Reminds much of professional Pixar and similar work)

If that doesn't work, you should check your CSS for some collisions between different selectors and elements. Perhaps the problem lies there.

My final idea: do a blank page, with only the basic declarations and insert the video tag there (something like this):

<!DOCTYPE html>
<html>
<head>
<title>Test</title>

<!-- You can set the meta tags for noindex here, if you'd like to -->
</head>

<body>

<!-- Replace these tags with one of the two solutions I've already
mentioned. You can also try your old solution -->

<video style="width:480px;height:270px" poster="media/bbb480.jpg" durationHint="4:44">
<source	src="media/bbb.flv">	
<source src="media/bbb.ogv"/>
</video>


</body>

</html>

Hope some of my advice helps!

[mrdee]

Well, yes, Little Asterisk (thanks for interrupting ),
your advice is quite useful, I contacted support of the makers of Coffeecup (my HTML Editor), and it looks like they themselves are not really familiar with HTML5 themselves.
However, they referred me to a similar site as the one you got the code from (or maybe the same one, would have to check), and I used that code to make my video work.

Strangely enough, when I looked back at the support ticket this morning, I go to their own link, and it looks like they have changed the code or something, because it is not working properly anymore, which it did yesterday.


The best one is, evrything works in Firefox (have not tried other browsers yet, apart from IE8), but Internet Explorer won't have it, I have to click on the "Download" links to see the film.
It sends me straight to the Flash version, which at the moment is not working, probably because of an error in my script (no expert on Flash).

You can have a look at the test page here: http://www.vlaanderen-flanders.org.uk/videotest.htm
Mind you: I use Firefox, and it works perfectly in it.

Finally, here is the code I used to make it work:

[quote]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Wed, 07 Jul 2010 10:27:51 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Videotest</title>

<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- "Video For Everybody" v0.4.1 by Kroc Camen of Camen Design <camendesign.com/code/video_for_everybody>
=================================================================================================================== -->
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fix coming from Apple in OS4.0 -->
<video width="640" height="360" controls preload="none">
<!-- MP4 must be first for iPad! -->
<source src="SV_A0010.mp4" type="video/mp4" /><!-- WebKit video -->
<source src="SV_A0010.ogg" type="video/ogg" /><!-- Firefox / Opera -->
<!-- fallback to Flash: -->
<object width="640" height="384" type="application/x-shockwave-flash" data="flowplayer-3.1.5.swf">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="flowplayer-3.1.5.swf" />
<param name="flashvars" value="image=Pics/vl_leeuw.jpg&amp;file=SV_A0010.mp4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="Pics/vl_leeuw.jpg" width="640" height="360" alt="*BLEEP*"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="SV_A0010.mp4">"MP4"</a>
Open Format: <a href="SV_A0010.ogg">"OGG"</a>
</p>
</body>
</html>[/quote]

Like I said, the only thing not workingis the Flash version, a bit difficult for me to grasp without a full example.

[Little Asterisk]

mrdee, on 10 July 2010 - 11:11 AM, said:

Well, yes, Little Asterisk (thanks for interrupting ),
your advice is quite useful, I contacted support of the makers of Coffeecup (my HTML Editor), and it looks like they themselves are not really familiar with HTML5 themselves.
However, they referred me to a similar site as the one you got the code from (or maybe the same one, would have to check), and I used that code to make my video work.

Strangely enough, when I looked back at the support ticket this morning, I go to their own link, and it looks like they have changed the code or something, because it is not working properly anymore, which it did yesterday.


The best one is, evrything works in Firefox (have not tried other browsers yet, apart from IE8), but Internet Explorer won't have it, I have to click on the "Download" links to see the film.
It sends me straight to the Flash version, which at the moment is not working, probably because of an error in my script (no expert on Flash).

You can have a look at the test page here: http://www.vlaandere...k/videotest.htm
Mind you: I use Firefox, and it works perfectly in it.

Finally, here is the code I used to make it work:



Like I said, the only thing not workingis the Flash version, a bit difficult for me to grasp without a full example.

Hi Mrdee,

it's expected for the <video> tag not to work in Internet Explorer 8. Not that I know the exact specs, but Internet Explorer doesn't support most of the *new* HTML 5 and/or CSS 3 tags.

I've checked your site in both Safari, Opera and Chrome, where everything seems to work just fine. That should mean, your script isn't wrong or anything right now. I wouldn't worry too much about the markup, since I don't expect for IE (before its 9th version, that is) to fully support all the new features.

If, however, you'd like for all browsers to see your video, I suggest not using the HTML 5 tag, but rather JavaScript or YouTube embedding.

(For a more understandable look, http://css-tricks.co...zing-photoshop/ has a nice video player embedded using JavaScript - look at the source code, and search for

<script type="text/javascript">var s1 = new SWFobject

)

The particular site is using JWPlayer, and you can find out more about it on http://www.longtailv...jw-flv-player/.

P.S. The skins for the video player you're using (HTML 5) look different in different (Opera, Safari, Chrome) browsers, if that's a problem.

If you need anything else, ask! You already know I like to intrude and interrupt and a bunch of other things starting on "I".

Edited by Little Asterisk, 10 July 2010 - 11:30 AM.

[mrdee]

Thanks, Little Asterisk.
Any advice and help regarding HTML5 is more than welcome.

However, since it is a sort of "newborn baby", which is bound tocome across teething trouble soon, and since the web browsers do not fully support it yet (IE not at all, it seems), I am taking this time as an opportunity to learn to use HTML5, because the things I have seen in previews look very promising, it also look like you will be able to save yourself a lot of disk space and bandwidth not having to use Flash and all that.

Nevertheless, the URL I posted here is nothing but a test page.
I would certainly not post pages on a server yet using only HTML5, and run the risk of half of my visitors not being able to see them.

Also, at the time of writing this, a lot of the HTML5 commands (or rather, their outcome) do not make a lot of sense to me.

An example:

Quote

<header>
<h1>Website Name</h1>
</header>

This puts the text "My website" at the top in big, bold letters.

I wonder what that <header></header> tag can do to help, you still have to format your text inside the tags (in this case, they used <h1></h1>).

When I tried to put ordinary text within <header></header> tags, it came out as, well, ordinary text.

You would expect a tag like that to let you type in text, and to display it as some sort of header, wouldn't you?

The same goes for things like <nav></nav> and <article></article>, only to mention a few.

What is the use of having special tags, if they don't do anything, and inside them, you still have to format everything as you did in HTML4 and the likes.
It looks to me like they are just glorified comments, or tags, just made to tell you what a certain area of your code does (or is supposed to do).

Anyway, like I said, HTML5 is promising much, so I have began to test and am waiting until it really takes off.

[Little Asterisk]

mrdee, on 10 July 2010 - 12:00 PM, said:

Thanks, Little Asterisk.
Any advice and help regarding HTML5 is more than welcome.

However, since it is a sort of "newborn baby", which is bound tocome across teething trouble soon, and since the web browsers do not fully support it yet (IE not at all, it seems), I am taking this time as an opportunity to learn to use HTML5, because the things I have seen in previews look very promising, it also look like you will be able to save yourself a lot of disk space and bandwidth not having to use Flash and all that.

Nevertheless, the URL I posted here is nothing but a test page.
I would certainly not post pages on a server yet using only HTML5, and run the risk of half of my visitors not being able to see them.

Also, at the time of writing this, a lot of the HTML5 commands (or rather, their outcome) do not make a lot of sense to me.

An example:



This puts the text "My website" at the top in big, bold letters.

I wonder what that <header></header> tag can do to help, you still have to format your text inside the tags (in this case, they used <h1></h1>).

When I tried to put ordinary text within <header></header> tags, it came out as, well, ordinary text.

You would expect a tag like that to let you type in text, and to display it as some sort of header, wouldn't you?

The same goes for things like <nav></nav> and <article></article>, only to mention a few.

What is the use of having special tags, if they don't do anything, and inside them, you still have to format everything as you did in HTML4 and the likes.
It looks to me like they are just glorified comments, or tags, just made to tell you what a certain area of your code does (or is supposed to do).

Anyway, like I said, HTML5 is promising much, so I have began to test and am waiting until it really takes off.

Hi mrdee,

You're welcome.

As for the new HTML 5 tags, like <header>, <nav> and <article>, you're right that they don't do much as in text formatting. They, however, add up to the semantic (i.e. valuable, I don't know how to explain differently) meaning of your website.

For instance,

<div class="header">

doesn't tell you much about it when you see it's counterpart (i.e.

</div>

), while <header> and </header> do explain that a little better. You can then simply style your CSS using selectors like this:

header { display: block; color: #333333; -moz-box-shadow: 1px 1px 1px #e3e3e3; /* et cetera */ }

If you'd like for these elements to be rendered correctly in older browsers (for instance, IE 7), you could use this script (link on Remy Sharp's blog, http://remysharp.com...nabling-script/) which does the trick for you.

Again, hope that clears things up a bit.