View Full Version : HTML 5 help

07-21-2011, 02:04 AM
Hi all,

I am a still photographer and filmmaker. A client has asked me to investigate HTML 5 coding so that web videos that I produce for them can be viewed on mobile devices. I've put together a test page with info from w3schools.com.
Apparently this page cannot be viewed in I.E. 9 or on Droid mobile devices. It can be viewed in Firefox, Safari, Chrome, Opera 11.5 and on Apple iPads.
Any advice on how I can get the HTML 5 tweaked to be viewed in I.E. 9 and Droid devices will be greatly appreciated. Thanks.

Here's the code:

<title>html 5 ~ test</title>
<meta charset="UTF-8" />

<style rel="stylesheet" type="text/css">

body { background-color: #fff; margin-top: 40px; margin-left: 50px; margin-bottom: 100px;
p { font-family: optima, arial, times; font-size: 12pt; font-style: italic; color: #999; line-height: 20pt; margin-bottom: 40px; opacity: 0.8; filter:alpha (opacity=80);
div.border { border-width: 1pt; border-style: ridge; border-color: #777777; width: 800px; height: 675px; padding-top: 30px; padding-left: 45px; padding-right: 45px;
div.imagemain { height: 405px; width: 720px; margin-bottom: 40px; margin-top: 10px; margin-left: 0px; border: 2pt ridge #777; background-color: #333; /* for IE */
/* CSS3 standard */

div.logo { width: 600px; height: 56px; margin-bottom: 75px;


<div id=EchoTopic>
<center><div class="border">
<div class="imagemain">

<video width="720" height="405" preload="auto" poster="jpegs/placeholder.jpg" controls="controls">
<source src="media/roughcut_001rev_001.ogv" type="video/ogv" />
<source src="media/roughcut_001rev_001.mp4" type="video/mp4" />
<source src="media/roughcut_001rev_001.webm" type="video/webm" />
Your browser does not support the video tag.
<p>click on the 'play' button to begin video<br/>duration 1 min 45 sec


07-21-2011, 04:30 AM
HTML5 is not yet officially released by the W3C and probably won't be finished for another couple of years. Consequently, support for html5/css3 varies across browsers.

Try using the <object> element for browsers that don't support <video>