Jump to content
xisto Community
Sign in to follow this  
Followers 0
mrdee

Weird Html5 Behaviour Video plays (me up)

By mrdee, in Websites and Web Designing

Recommended Posts

mrdee    1

mrdee
Posted (edited)

Hi,
I was testing a bit of HTML5 today, and attempted to embed an .mp4 video into a web page, using CoffeeCup HTML Editor (which normally supports HTML5.

I used the following code:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="generator" content="CoffeeCup HTML Editor (http://www.coffeecup.com/)">    <meta name="created" content="Sat, 23 Apr 2011 10:50:37 GMT">    <meta name="description" content="">    <meta name="keywords" content="">    <title>HTML5 Video Test</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><center><h2>HTML5 Video Test!</h2><br /><video src="Video/SV_A0010.mp4" controls width="500" height="300"></center>  </body></html>

As you can see in the very first line, the DOCTYPE is set to use HTML5.
Then, for the embeddding iself, I do not see any syntax errors in the <video src=...... line, nor does CoffeeCup indicate any.

Yet, when I open the web page, no matter whether I use Firefox 4, IE 9, Google Chrome or Opera 12 (although I believe that one does not fully support HTML5 yet), the screen shows up, the controls show, but there is a grey X in the middle of he video screen, and, obviously, nothing plays when I click Play.

Also, the folder containing the film exists, the mp4 film exists and plays when played on its own, it is in the correct folder and the path to the folder/file is also set correcly.

Does anyone see something here I might have missed?

Thank you in advance.
Edited by mrdee (see edit history)

Share this post

Link to post
Share on other sites

darko100    1

darko100
Posted (edited)

It should work if you have HTML5 compatible browser. Did you tried it to encode it in .ogg? That might be the problem.Also MIME types could be the problem. Did you tried to add the Video/SV_A0010.mp4 in your URL bar and test if it shows something?If it doesn't show , then you should make a htaccess file defining the mp4 format and it's MIME type , video/mp4. Then try again and see if it works. If that again doesn't solve case , to convert mp4 to ogg you can use online converter , and http://forums.xisto.com/no_longer_exists/ is great one.Also , define sources. <source src="movie.ogg" type="video/ogg" /> is for Firefox/Opera , <source src="movie.webm" type="video/webm" /> is for Chrome.Plus , you have problems at your HTML. First DON'T USE CENTER TAG! Second , video tag is not closed. Third , don't use controls , use controls="controls" instead.

Edited by darko100 (see edit history)

Share this post

Link to post
Share on other sites

mrdee    1

mrdee
Posted

It should work if you have HTML5 compatible browser. Did you tried it to encode it in .ogg? That might be the problem.

I do have a number of HtML5 compatible browsers, but the code runs in none of them.Converting to .oog is an option, but is mainly to overcome (in)compatibility problems.

Also MIME types could be the problem. Did you tried to add the Video/SV_A0010.mp4 in your URL bar and test if it shows something?

Yes, added it to a URL and it played perfectly.

Second , video tag is not closed.

Where do you see that? 
<video src="Video/SV_A0010.mp4" controls="controls" width="500" height="300">
It does have a beginning and an end tag, or am I mistaken?

Anyway, thank you for your reply, but I do have the impression HTML5 is far from stable yet, or the browsers that are supposed to support it anyway.

Share this post

Link to post
Share on other sites

Quatrux    4

Quatrux
Posted

I guess it's due to the fileformat mp4? Different browsers yet support different video containers.. I guess with Theora+Vorbis+Ogg you would see the video..

H.264+AAC+MP4 is said to be supported on Safari, as it plays anything quick time can play :P

Also as I know Google Chrome will drop support for H.264 soon, due to problems with patents and licensing.. So I guess all these videos in html5 will need to use WebM or OGG

Also here is a good quote:

There is no single combination of containers and codecs that works in all HTML5 browsers.
This is not likely to change in the near future.

To make your video watchable across all of these devices and platforms, you're going to need to encode your video more than once

For maximum compatibility, here's what your video workflow will look like:
1. Make one version that uses WebM (VP8 + Vorbis).
2. Make another version that uses H.264 baseline video and AAC "low complexity" audio in an MP4 container.
3. Make another version that uses Theora video and Vorbis audio in an Ogg container.
4. Link to all three video files from a single <video> element, and fall back to a Flash-based video player.


Even though the quote doesn't look satisfying, I just hope that in the future projects like WebM which is an open, royalty-free, media file format designed for the web will succeed :)

I guess we will need good converting tools, which are free too, like ffmpeg to put videos online..

About HTML5 video: http://diveintohtml5.info/video.html

WebM: http://www.webmproject.org/about/

Share this post

Link to post
Share on other sites

darko100    1

darko100
Posted

I do have a number of HtML5 compatible browsers, but the code runs in none of them.Converting to .oog is an option, but is mainly to overcome (in)compatibility problems.


Yes, added it to a URL and it played perfectly.



Where do you see that? 

<video src="Video/SV_A0010.mp4" controls="controls" width="500" height="300">
It does have a beginning and an end tag, or am I mistaken?

Anyway, thank you for your reply, but I do have the impression HTML5 is far from stable yet, or the browsers that are supposed to support it anyway.
1. Just listen me , convert to .ogg , and read the whole post. I said you should specify sources for best compatibility.
2. Ermm you are beginner at HTML. Closing tags means for example <b> needs to be closed with </b> , img should be closed as <img src="blabla" /> so you can see that "/" at the end of the tag.
3. Codecs are mainly problem , but HTML5 is more than stable. It just needs to be cross-browser.

Share this post

Link to post
Share on other sites

mrdee    1

mrdee
Posted (edited)

1. Just listen me , convert to .ogg , and read the whole post. I said you should specify sources for best compatibility.

Yes, that is advisable, however, I saw it happening on Youtube, and the one doing it only embedded the .mp4 video, but he was using Google Chrome, that probably had something to do with the fact it worked immediately.

The film can be seen here.

2. Ermm you are beginner at HTML. Closing tags means for example <b> needs to be closed with </b> , img should be closed as <img src="blabla" /> so you can see that "/" at the end of the tag.

Yes, of course I know about the "pairs" of tags (<i></i>,<script></script>,<object></object> etc.), I had missed the absence of the "/>" at the end of the video tag, though. (To err is human).

 

3. Codecs are mainly problem , but HTML5 is more than stable. It just needs to be cross-browser.

 

As I said, it is probably because of the use of Google Chrome the whole thing worked, I started with literally taking his code, but had no luck with it.

Maybe the man making the HTML page in the film should have been a bit clearer about the use of the browser, and about the fact that certain codecs only work with certain browsers.

(Which is why the conversion is necessary, so ou can use one of the formats for older browsers too, browsers which do not yet support HTML5).

 

However, like I said, the man in the video could have been a bit clearer and could have explained things a bit further.

 

Finally, why do you object against using <center></center>?

That is exactly what happens in the video.

Edited by mrdee (see edit history)

Share this post

Link to post
Share on other sites

darko100    1

darko100
Posted (edited)

Yes, that is advisable, however, I saw it happening on Youtube, and the one doing it only embedded the .mp4 video, but he was using Google Chrome, that probably had something to do with the fact it worked immediately.The film can be seen here.

Yes, of course I know about the "pairs" of tags (<i></i>,<script></script>,<object></object> etc.), I had missed the absence of the "/>" at the end of the video tag, though. (To err is human).

It's OK , i tought you don't know HTML.

Finally, why do you object against using <center></center>?That is exactly what happens in the video.

Because <center> tag is not supported now. It's deprecated , old and bad.
Edited by darko100 (see edit history)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept