|
HTML - Html5 Video Tag, Cross Browser Issues
I have a nice little HTML5 demo that plays a video in a canvas that is not displayed.
As part of the demo, I copy "frames" from the hidden canvas into a resized canvas that is displayed. My "custom" code to manipulate the video frames works fine. What doesn't work depends on the browser, but also the source of the video. If the source of the video is on the local disk along with the html file, it plays fine and it loops fine in both Safari, Chrome. Opera and Firefox. If the source of the video is on the web, either as a local (to the website) where the html file is stored, or if the html file is local but the video is on the web, then Safari works fine. Chrome displays the video ONE time and then stops. The loop does not work. Remember, same code, works fine if all data is local. Changing the source URL of the video to a website is the ONLY change. Opera and Firefox do not display anything except the box rectangle when the video source is on the web. Firefox gives the error: Quote: Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///Volumes/Olorin/sliceNdice/demow.html :: processFrame :: line 34" data: no] No errors show up in Opera, but no video is displayed. The Code: (or a snippet, actually) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>HTML5 Video Deom</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var video;
var copy;
var copycanvas;
var draw;
var VID_WID = 640;
var VID_HIGH = 360;
var OUT_WID = 480;
var OUT_HIGH = 320;
function init(){
video = document.getElementById('sourcevid');
copycanvas = document.getElementById('sourcecopy');
copy = copycanvas.getContext('2d');
var outputcanvas = document.getElementById('output');
draw = outputcanvas.getContext('2d');
setInterval("processFrame()", 33);
}
function processFrame(){
//get video image
copy.drawImage(video, 0, 0);
// manipulate image here
draw.drawImage(copycanvas, 0,0);
}
</script></head>
<body onload="init()" style="margin:0px;">
<div><br/><br/></div>
<div style="display:none">
<video id="sourcevid" autoplay loop=loop>
<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.mp4" type="video/mp4"/>
<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.ogv" type="video/ogg"/>
</video>
<canvas id="sourcecopy" width="640" height="360"></canvas>
</div>
<div>
<canvas id="output" width="480" height="320" style="border: solid 5px #666666"></canvas>
</div>
</body>
</html>
Works if all files are local, shows box outline if all files are on the web: Code: <video id="sourcevid" autoplay loop=loop> <source src="BigBuckBunny_640x360.mp4" type="video/mp4"/> <source src="BigBuckBunny_640x360.ogv" type="video/ogg"/> </video> Fails: Code: <video id="sourcevid" autoplay loop=loop> <source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.mp4" type="video/mp4"/> <source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.ogv" type="video/ogg"/> </video> Note: Safari works in both cases, as long as all files and website are reachable. Chrome works to play the video ONCE, then stops. Firefox and Opera show an empty outline, but no video. I'm not a cross-browser expert. I will accept any and all possible solutions to try. In the meantime, I will continue to see if I can find the problem. Obviously, I want it to work from a website. Similar TutorialsHi All - Check out www.theSalve.org/flashVid.htm - Any ideas why the layout is different in Explorer and Firefox or even Safari and Opera for that matter. I realize I'm not using CSS. Don't know how to yet. Anything I can add to make it look the same on all browsers? Hi - Just wondering if anyone can help me figure out layout problems on the following page: www.marchgallery.com/comments.php I'm designing on a mac, and everything looks good in Safari. When I open up in Firefox, though, the comments are way below the intro text and the layout of the submission form is all messed up. I've never experienced this much difference in appearance between these two browsers. Maybe someone (nearly all of you) are viewing on PC? How does it look on that end? I'm really at a loss here. Any clues or suggestions would be much appreciated! Hey, I'm having a small problem with cross browser compatibility. In Internet Explorer my site looks exactly the way I want it to, no problems. However, in Firefox and Opera there is a space between the navigation and the content. I investigated my code and can't pinpoint the problem. Can you tell me what it is? So if you could just tell me the problem with no example, URL, or code that'd be great. I'm just kidding. The URL is TeamFlank.info. Here is some screen shots of it... IE: *click to enlarge* FF: *click to enlarge* Heya, I'm working on my new website design for http://nickerson.biz and all was going good. Came to the point where I check compatibility in all browsers. Figured everything would be fine since its 100% xhtml transitional valid. Turns out IE ****s it up real bad. Has 5 noticeable things that SHOULD NOT be happening. Site looks great in FF, but IE... I can't figure out whats going wrong. http://i42.tinypic.com/nntyly.png Ideas? View source to see coding, all seems fine. Hey, I'm having issues with coding a website to be cross-compatible with Firefox and Internet Explorer (views fine in Firefox). I'm a BS artist when it comes to web design, and I could really use some help. The site is at this address: www.thepynebros.com It views correctly in Firefox, however, Internet Explorer distorts the font sizes, and will not wrap the CuteNews script around the picture of the trees on the index page. Can someone help me out? What am I doing wrong? Hello, quick question here. I'm working on this site: (replace @'s with a's) v@rd@burstyn.com/version2/ The previous designer left it in a bit of a mess, and now that I've made some changes that appear nicely in my Safari browser, the tables are hugely misaligned when I look at a number of the pages in Firefox (i.e., water.html or rites.html). Any advice as to how to get the tables back under control? I've tried for a while but nothing seems to fix it. Thanks very much in advance. Hello, I designed this website http://www.aitputd.org/conference and found that it has compatibility issues when viewed with different browsers. e.g. The 'font' of the menu changes (becomes bold) when viewed in IE and Chrome browsers as opposed to FF3.5 Also The title 'sponsors' on the left does not stay at the center in IE and FF3.5 but seems good in Chrome. Is there a solution to address these problems?? Any help is highly appreciated. Regards, NP Guys, Please help me. Following website www.blaizekitchens.co.uk Looks fine in Mozilla But goes horribly wrong in iexplorer Can't work out what the hell is causing this! Can someone please point me in the right direction Cheers Damon Hi, Im tryin to use html5 video so my video can be watched by most browsers and cell phone OSs. Having an issue. the link working in Safari (on win) but not in FireFox http://beerdiaries.com/html5/html5.html any idea why? thanks I am a relative newcomer to HTML5, and love it, especially the ability to use video more easily. I am trying this out with the ability to gracefully degrade to Flash for those browsers that do not support the <video> element, and thought that this would work:- Code: <video width="640" height="480" controls>
<source src="videos/coots.ipad.mp4" type="video/mp4" />
<source src="videos/coots.webmvp8.webm" type="video/webm" />
<source src="videos/coots.theora.ogv" type="video/ogg" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="480" id="movie_name" align="middle">
<param name="movie" value="videos/coots.swf.swf"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="videos/coots.swf.swf" width="550" height="400">
<param name="movie" value="videos/coots.swf.swf"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
It seems to work fine in Firefox and Opera, but Chrome (surprisingly) seems to ignore it, as does (unsurprisingly) IE8. I have been puzzling over it for a couple of days now and can't see the solution. I know the solution will be quite obvious when I see it, but I am just to close to it at present to be able to figure it out... I have a "web site on a CD" application and wish to have users be able to play audio and video clips. I currently have MP3 audio and AVI compressed video but can convert to other formats. The CD is created via MacImage so that both PC and Mac formats are correctly encoded. I have an HTML audio player and separate HTML video player (see below), both of which pass the W3C Validator as "4.01 Transitional" and play without problem on Windows/XP with IE6/7/8 and on Mac with Safari/QuickTime. The players do not work when used with Firefox or SeaMonkey on XP and do not work correctly with Firefox on Linux. I am seeking HTML code that will cater for all users on all platforms (PC, Mac and Linux) with as many browsers as possible (at least 1 on each platform). My audio player code is: <object type="audio/mpeg" width="360" height="50"> <param name="src" value="AudioTest.mp3"> <param name="Autostart" value="true"> <param name="Controller" value="true"> <param name="ShowStatusBar" value="true"> </object> My video player code is: <object type="video/avi" width="480" height="360"> <param name="url" value="VideoTest.avi"> <param name="src" value="VideoTest.avi"> <param name="autostart" value="true"> <param name="controller" value="true"> <param name="ShowControls" value="true"> <param name="ShowStatusBar" value="true"> <param name="ShowDisplay" value="false"> <param name="AutoRewind" value="false"> </object> Does anyone have any suggestions? This page looks exactly like I want it to in Firefox but not in ie6 or ie7. In ie6 the fieldsets are different heights but I want them to be the same (as in firefox) and in ie7 some of the submit buttons are hidden. Can someone help me with this? Thanks... I've been designing this site on a mac, and have tested it on several mac compatible browsers without much trouble. I just tried it on IE and a some things are messed up. http://www.jonniedredge.com First, all my images look really grainy and gross in IE (not just the ones on the home page). Anyone know why that is? Next, on the home page is a .swf file that has a black background, but the background appears white in IE. Also that .swf is in a table cell that should make up just the top corner of that main div, with a height of 50 pixels. But in IE, and FF, this cell takes up about 2/3 the height of the div. Here's my CSS in case that helps: Code: /***************Body, etc.*****************/
body {
background-color: #000000;
font-family: times, serif;
}
#container {
margin: 0 auto;
width: 750px;
padding-bottom: 5px;
/***** for layout development background-color:#FFEEEE; *******/
}
a {
text-decoration: none;
color: inherit;
}
a:visited {
color: #b0b0b5;
}
a:hover {
color: #475890;
}
.blank {
height: 100px;
}
.blank2 {
height: 50px;
}
/***************Bottom Links*****************/
.linksBot {
border: 0px;
background-color: transparent;
color: #c0c0c8;
/***background-color: #CCFF66;****/
}
p.linksBot {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a.linksBot {
color: #c0c0c8;
text-decoration: underline;
}
a.linksBot:hover {
color: #475890;
}
/***************Banner*****************/
.banner {
padding: 0px;
margin: 0px;
margin-bottom: 75px;
background-color: black;
color: #b0b0b5;
font-size: 20px;
font-family: copperplate, times, serif;
}
td.current {
text-decoration: underline;
}
/***************Home*****************/
#home {
border: 0px;
font-family: copperplate, times, serif;
}
#main {
color: #c0c0c8;
width: 750px;
font-size: 20px;
text-align: center;
outline: 3px solid #222530;
border: 0px;
}
#pno {}
#welccell {
background-color: #444550;
width: 250px;
}
#welcome {
margin: 18px;
color: #d0d0d5;
font-family: times, serif;
font-size: 17px;
text-align: left;
vertical-align: top;
}
/**************Bio*****************/
#headshot {
float: left;
margin-right: 30px;
margin-bottom: 10px;
border: 5px solid #d8d8e0;
}
#bioContainer {
background-color: #6080a2;
color: #d8d8e0;
padding: 20px;
height: 300px;
}
p.bio:first-line {
text-indent: 2em;
}
/***************Audio*****************/
#audioContainer {
margin: auto;
width: 650px;
background-color: #6080a2;
color: #d8d8e0;
padding-bottom: 7px;
padding-top: 7px;
margin-bottom: 75px;
}
.audioClips {
background-color:transparent;
margin:auto;
width: 620px;
}
caption {
font-size: 46px;
line-height: 1;
text-align: left;
font-family: copperplate, serif;
}
.sngDesc {
font-size:13px;
}
.sngDesc:first-line {
font-weight: bold;
width: 300px;
font-size:15px;
}
.sng {
text-align: right;
}
/***************Video*****************/
#vidLeft {
float: left;
width: 225px;
height: 350px;
background-color: #6080a2;
color: #d8d8e0;
margin-bottom: 75px;
}
#vidOutCont {
float: right;
width: 525px;
height: 350px;
background-color: #6080a2;
margin-bottom: 75px;
}
.vidDesc {
font-size: 12px;
margin: 15px;
margin-top: 50px;
}
p.vidDesc:first-line {
font-size: 20px;
}
embed.vid {
margin-left: 22px;
margin-right: 23px;
margin-top: 32px;
}
#vidContainer {
background-color: #333333;
margin:auto;
margin-top: 32px;
width: 480px;
height: 286px;
}
/************Contact*************/
#contactPic {
float: right;
padding: 20px;
}
#contact {
padding: 30px;
height: 280px;
background-color: #6080a2;
color: #d8d8e0;
}
Ideas? This is my first site, so sorry if I'm a little slow with it. If you visit http://jacobkelleydesigns.com/other/SE/index.php in Safari, the menu is lined up correctly, yet in Firefox, the contact button drops below the other buttons, leading me to believe the width in the css is incorrect, but it works well in Safari. If I changed it to be wider, it'd work in firefox but not safari I'm assuming. Here is my style sheet. CSS What could be causing this? Hi all. I'm working on developing a site mostly for practice now, and I'm stumped by the prospect of cross-browser compatibility. My first inclination was to use javascript to write a stylesheet declaration for each browser type and then create each stylesheet so that it is styled for each particular browser. Then I discovered the horrendous rendering differences between even different VERSIONS of the same browsers. The most notable hiccup-fest I've encountered has been IE6 and IE7. IE6 seems to go berserk at just about every possible attribute for the div tag. This means that my styles for IE7 won't display correctly in IE6. So my question is pretty simple. Is the only way for me to make cross-browser compatibility a reality for me to create about 12 different versions of the same stylesheet? I'd really love to avoid that if possible. Alternatives would be much loved. Also, I'm currently using the XHTML 1.1 doctype. Would it be a big no-no for me to simply emphasize that my code conforms to the latest standards and any rendering errors are probably due to an out of date browser? I know this would alienate some users, but as the same time, I also feel that users should be encouraged to upgrade. Hey Would anyone be able to help me with these cross browser bugs please? 1. FF/IE8 pagination bug Firefox: IE8: (the tiny block behaves like an extension '2' block) The CSS: Code: ul {
border:0;
margin:0;
padding:0;
}
#pagelink li {
border:0;
margin:0;
padding:0;
font-size:10px;
font-family:Arial;
list-style:none;
margin-right:2px;
}
#pagelink a {
border:solid 1px #404040;
background-color:#272727;
margin-right:2px;
}
#pagelink .previous-off,#pagelink .next-off {
border:solid 1px #404040;
color:#dbdbdb;
display:block;
float:left;
margin-right:2px;
padding:2px 3px;
}
#pagelink .next a,#pagelink .previous a {
font-weight:bold;
}
#pagelink .active {
background:#97D5E2;
color:#0e0e0e;
display:block;
float:left;
padding:2px 6px;
}
#pagelink a:link,#pagelink a:visited {
color:#dbdbdb;
display:block;
float:left;
padding:1px 5px;
text-decoration:none;
}
#pagelink a:hover {
border:solid 1px #5F5F5F;
color:#fff;
}
Thats all for now. I entitled it 'bugs' because I'm bound to find others Thank you so much in advance for your time/help! *EDIT* Seems to happen to all non-active links: this site secretsoffitnessrevealed.com the menu bar links show up correctly in firefox but they show up vertically in IE and the home link doesnt work all together anything that wud fix it? heres the code HTML Code: <head>
<link rel="stylesheet" type="text/css" href="http://wiseones.50webs.com/Css">
<style type="text/css">
body { margin: 0px; padding: 0px; background-position: center top;}
p { font-size: 1; }
h1 {display: block; background-color: #D1CCC6; font-size: 12pt; Text-transform: none; color: black; letter-spacing: 0px; font-family: tahoma; }
h2 {text-decoration: none; font-weight: normal; font-family: tahoma; font-size: 11pt; color: #000000; text-transform:none; }
a:link, a:visited, a:active {
text-decoration: none;
font-weight: bold;
font-family: tahoma;
font-size: 12 pt;
color: #000000;
text-transform:uppercase;
}
a:hover {
background-color: none;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
color: #1B2B00;
text-transform:uppercase;
}
</style>
<title>Isometric Exercise Secrets Revealed</title>
<meta name="description" content="Energizing Isometrics is the complete health and fitness program which can be performed in only 5 minutes a day!">
<meta name="keywords" content="health,fitness,muscle,musclebuilding,strength,abs,sixpack,fatloss,weightloss,isometrics,sports,benchpress,weights,exercise,antiaging,physicalfitness,aging,youth,flexibility,strong,power,energy,nutrician,isometricsexercise,menshealth,womenshealth,isometric,workout">
<meta name="author" content="Energizing Isometrics">
<meta name="email" content="energizingisometrics@gmail.com">
</head>
<body>
<center><div style=" width: 652 px; ">
<!--BACKGROUND-->
<font size="1">
<body background="Untitled-2.jpg">
<!--TOP BANNER-->
<img src="http://i93.photobucket.com/albums/l77/Xtron12/best-viewed-in-frefox.gif"><BR>
<center><img src="http://i42.tinypic.com/rc20sj.jpg"><BR><img src="http://i42.tinypic.com/10qmow7.jpg"></center>
<!--MENU-->
<div style="position: absolute; left: 500; top: 155px; " <a href="http://secretsoffitnessrevealed.com/index.html">Home</a> :: <a href="scienceofisometrics.html">Isometric Science</a> :: <a href="http://secretsoffitnessrevealed.com/testimonials.html">Testimonials</a> :: <a href="http://secretsoffitnessrevealed.com/buy.html">Buy</a>
</div>
<!--CONTENT BOX 76334a</div>-->
<center> <div style="float: center; width: 800px; height: 970px; background-color: #EDEDED; padding: 0px; margin: 0px 0px; "><h1>About the Program</h1>
<h2>Energizing Isometrics is a complete exercise program which can be performed in as little as 5 minutes a day! Numerous scientific studies have confirmed that the isometric principle is a valid method for enhancing musculature and overall fitness. There are many books available which teach isometric exercises, however, Energizing Isometrics is the only comprehensive program which has been developed to maximize benefits in the least amount of time.<BR><BR>
There are endless devices on the market for developing muscle and losing weight, some with price tags in the thousands. Why use valuable living space in your home, or make monthly payments for an apparatus that will eventually end up in the garage. With Energizing Isometrics, your body is the only device you need!<BR><BR>
Years of research have gone into the creation of the Energizing Isometrics program. The end result of this research is a health and fitness regimen that incorporates all the new findings and understanding about isometrics. Using the other outdated methods on the market will mean poor results and slow progress. Energizing Isometrics teaches the most up to date method of performing this type of exercise, in the most effective and efficient way. This equates to fast results with a very simple program that is easy to follow and perform.<BR><BR>Health and fitness are not as difficult (or expensive) to achieve as most think, or as the infomercials would have us believe. Energizing Isometrics reveals the unique and powerful method for improving our strength and fitness levels in only 5 minutes a day.</h2>
<BR>
<img src="http://i43.tinypic.com/jgs10h.jpg"><BR><div align="center"><a target="_blank" href="http://lightfit1.fatsecret.hop.clickbank.net">
<img border="0" src="http://www.topsecretfatlosssecret.com/images_boats/banners/topsecretfl-468x60b.gif" alt="Click here to Top Secret Fat Loss Secret" /></a></div>
<BR>
<div align="center">
<a target="_blank" href="http://lightfit1.healthebiz.hop.clickbank.net"><img border="0" src="http://www.healthbizinabox.com/images_boats/banners/healthbiab-468x60.gif" alt="Click here to go to Health Biz In A Box" /></a>
<BR><BR><BR>© 1998 - 2009
</div>
<BR><BR><BR><BR><BR>
</div></center>
</body>
I have created a web page which is running acquratey on IE8 but not running acqurately on IE7 or other version. Dear jebus, why does firefox give me 10px margins, when internet explorer dosent, and how do i fix it: Code:
body {
margin:0;
padding:0;
background:#ffffff url(bg.gif) top right repeat-y;
font-family:Agency FB, serif;
min-width: 800px;
}
body a {
text-decoration: none;
}
#header {
background:#000000;
color:#0066FF;
margin:0;
padding:0;
height:110px;
}
#middle {
height:470px;
background-color: #543644;
width:100%;
bottom:0;
color:#ffffff;
text-align:center;
}
#footer {
position:absolute;
height:100px;
background-color: #000000;
width:100%;
bottom:0;
color:#ffffff;
text-align:center;
}
HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>how to kick children right in the face and not get arrested</title> <link href="new.css" rel="stylesheet" type="text/css"> <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> </head> <body> <div id="header"><h1>Purge* mind </h1></div> <div id="middle"><h1>Purge* mind </h1></div> <div id="footer"><h2>This is a footer</h2></div> </body> </html> Amen |
|||||||