Log in

View Full Version : with HTML5


Jay Dog
02-10-2014, 04:31 PM
Hi,

I've found out that we have a package in school that converts video into HTML5 format and put this video on the school website:

http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/drama/video/Video HTML5 Test 1.html

The code to it is very simple:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video HTML5 Test 1</title>
</head>

<body><video id=0 controls width=640 height=360>
<source src="1.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="1.webm" type='video/webm' >
<source src="1.mp4" type='video/mp4'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
</body>
</html>

Now in Dreamweaver, it works fine in the Live View format, and when I save the work and look at the page from my computer it works fine too.

I've looked at it in Chrome and it works fine as well there but the problem is that we currently use Internet Explorer 9 on all our school PC's and it doesn't work on that. I don't undertsand though how it can work on my Dreamweaver preview and when I see it in its folder on My Computer yet online it doesn't as I assume that it's using IE9 in DW and my Computer.

Is there a short and simple solution to allow me to show videos using HTML5 (we're not using Flash as a lot of people use Ipads in school) but still using IE9 as I've asked the IT technician about IE11 and he says it's not going to happen pretty soon.

Many thanks for any help on this project.


Jay Dog
traq
02-10-2014, 04:59 PM
Now in Dreamweaver, it works fine in the Live View format …
Never use DreamWeaver as a preview tool*. It is not a browser. No one will ever browse your finished site using DreamWeaver.
How DreamWeaver renders your website is completely irrelevant (and, as you have discovered, it is also misleading).

* I would go as far as to say "never use DreamWeaver" at all (nor any other similar program), but one step at a time. : )


I've looked at it in Chrome and it works fine as well there but the problem is that we currently use Internet Explorer 9 on all our school PC's and it doesn't work on that. I don't undertsand though how it can work on my Dreamweaver preview and when I see it in its folder on My Computer yet online it doesn't as I assume that it's using IE9 in DW and my Computer.
As I understand, DW uses its own rendering engine. If by "look at the page from my computer" you mean you're opening the webpage as a file, then you would be using whichever browser you have set as the default on your system.

In short, always preview your work in real web browsers. I start with Chrome, double-check in FireFox, and then start with cleanup work in the various versions of IE.


Is there a short and simple solution to allow me to show videos using HTML5
Check out HTML5 Video For All (http://shapeshed.com/HTML5-video-for-all-well-almost/). It's the same approach as you have above, but includes a flash fallback for older versions of IE.
Actually, this is the example (http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/) I was thinking of: better markup, no conditional comments.

Something else I would suggest is including a download link in your "unsupported" message; that way, the video is available even to user with browsers that don't support video at all.
Jay Dog
02-11-2014, 02:56 PM
That's great man! Thanks. Just one thing, is there a simple way of stopping the autoplay?

It's been a while since I've done anything with Flash and I do recall having to add some Actionscript to the Flash file but is there an even simpler way of doing it with the code?

Also I've noticed the controls disappear in IE9, is this something I need to sort out in Flash?

Thanks,


Jay Dog