|
HTML - Different Video And Picture Problem
I have the png over an embedded video and the center of the png is transparent, but because the the cursor doesn't recognize the video play button behind it, I can't click on it. Is there a way to have the png in the foreground, but use recognize the link behind it?
Similar TutorialsHi and thanks in advance to anyone who can help me with this silly problem. The text on the top is normal text with a margin. (Like a <p> tag). The text on the bottom is in a <pre> tag. I highlighted it to show how it overflows beyond the margin. Is there a style I can apply to the pre tag such that it stays in the white box? Hi, I`ve got a little Prob on my Site. If you take a look at the left Side, you`ll find a hidden PREFERENCES Menu. In it are 8 Buttons with Image Swap Function. 3 Buttons doesen`t work and I don`t know why?! They a NEWSLETTER, UMFRAGE and FORUM! Sorry for my english, but it`s a German Site... LINK Thanks for your help! I've been using Visual Studio 2005 to create a website, and my embedded videos will not play. They play fine when I start the website through VS 2005, but if I just open the files through IE, they videos don't start. VS shows the site through IE as well, so I'm not sure what the problem could be. Here's some code: <tr> <td colspan=14 align = center> <EMBED width="512" height="429" src="../../Videos/1.1-video.wmv" ></EMBED> </td> </tr> <tr> <td colspan=14 align = center> <a href="../../Videos/1.1-video.wmv" target='_blank' onmouseover="launch='white'" onmouseout="launch='#999999'" style="text-decoration: none"> <font id="launch" size="3" face="Bookman Old Style" color="#9999"> <b>Launch in External Player</b></font> </a> </td> </tr> The second part of the code launches the video in an external player correctly. When I click on Error Reason, it gives me this: You've encountered error message C00D11B1 while using Windows Media Player. The following information might help you troubleshoot the issue. Cannot play the file Windows Media Player cannot play the file. You might encounter this error message for one of the following reasons: Your sound device is not functioning properly. Try using Device Manager to check the status of your sound device. You are trying to play a file on the Internet and the server might be temporarily unavailable or there might be a network issue. Try again later. You are trying to play an MP3 file that contains compressed ID3 headers. The ID3 header is a portion of the file that stores the song's album information (for example, the song name, artist name, album name, and genre). This information is sometimes called a "tag." I'm having trouble with embedding multiple videos to the same player. I'm not using asx files, but rather wmv to make a selection-list. I found a site that solved my due problem and the thing works. however!! The URL in the code refers to youtube videos, and that's great and all, but I needed 'em to link to my own media files. so I changed the URL's to those on my server, and here's the problem: when doing it offline with the files on my harddrive I can add as many files I want to without it complaining, but the second it goes online or I link to wmv files on the internet it can't seem to get a connection. It only works if I have but a single <div> entry typed. As soon as I add more the thing bugs. I even tried changing "application/x-shockwave-flash" to "application/x-mplayer2" Please!! Any solution to this?? What am I doing wrong?? Example with ref's to youtube-videos, below. <div id='videoPlayback' style='width: 435px; height:350px; background-color: #800000;'></div> <div id='selectDemo2' style='display: none'> <object width="320" height="285"> <param name="movie" value="http://www.youtube.com/v/c6SHsF1n9Qw"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/c6SHsF1n9Qw&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="320" height="285" autostart=0 showstatusbar=1> </embed> </object> </div> <div id='selectDemo2' style='display: none'> <object width="320" height="285"> <param name="movie" value="http://www.youtube.com/v/-is63goeBgc"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/-is63goeBgc&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="320" height="285" autostart=0 showstatusbar=1> </embed> </object> </div> <A HREF="#" onclick='return playVideo("selectDemo1","videoPlayback")'>RvD2: Ryan vs. Dorkman 2</A> <BR> <A HREF="#" onclick='return playVideo("selectDemo2","videoPlayback")'>Beatboxing Flute <q>Peter and the Wolf</q></A <BR> <script type="text/javascript">function playVideo(sourceId, targetId) { if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);} if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);} targetId.innerHTML=sourceId.innerHTML; return false;}</script> I've finally figured out how to get my video started, but it won't loop. Also, the video won't work in IE. I'm trying to load this video without forcing my viewers into installing plugins, if possible. http://www.prestigekitchensandbaths.com/test/ Here's the code I'm using to make it work. Code: <div id="transitions">
<object data="transitions/home.avi"
type="video/x-msvideo"
width="850"
height="420">
<!param name="src" value="transitions/home.avi"> !Works with IE, but craps out Firefox :(
<param name="autostart" value="true">
<!param name="background" value="transparent">
<param name="loop" value="true">
<!param name="movie" value="transitions/home.avi">
</object>
</div>
Hello guys, I have embedded this video on simple html page. I want that video to float in the middle of the screen. It looks OK on FireFox, but it appears on the left edge when played on Safari. (I have not checked it on IE.) What is wrong with that code? here is the link to that page: http://www.icebergfilms.com/cineDemo.html and here is that code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title>cinematography Demo by IcebergFilms</title> </head> <body bgcolor="#000000"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="256" width="320"> <param name="src" value="http://www.icebergfilms.com/demo1.mov"> <param name="autoplay" value="true"> <param name="type" value="video/quicktime" height="448" width="768"> <table width="768" height="548" align="center"> <tr> <td><embed src="http://www.icebergfilms.com/demo1.mov" align="middle" height="448" width="768" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></td> </tr> </table> </object> </body> </html> Thank you so much for any advise. I tried to embed a wmv video in my web page, using this code: <HEAD><meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="imagetoolbar" content="false"> </HEAD> <BODY bgcolor="#000000"> <p align="center"> <img border="0" dynsrc="baby_girl.wmv" start="fileopen"></p> </BODY></HTML> I uploaded the wmv into a folder called just_like_daddy on my website called www.lovetoamuse.com On a blog I placed this link to the page: www.lovetoamuse.com/just_like_daddy To complicate matters, the video shows up on my computer, but when I try to see to it from the blog on another computer, it doesn't work. What code can I use to ensure it works everywhere, using the url www.lovetomuse.com/just_like_daddy Thanks Hi everyone! I'm new here! And i got a real weird problem! Like you can see on my image, i use a Spry Horizontal Menu and a Youtube Video. And when i use Firefox the Menu is over the video (Ok) But when i use other kind of browsers the video is over the menu, only able to see the 3 sub menus! I'm using javascript in the Spry Horizontal Menu and the iframe embed code in the youtube video. As already happened this to anyone! Someone know how to solve it? What code do you need to see? Please help Website URL - http://www.cae.eu5.org Hi. I'm using HTML 5 video to deliver .mp4's to my site. I recently added hotlink protection via my root .htaccess file: (I've replaced my website with "mysite.com" for security purposes: Code: RewriteCond %{HTTP_REFERER} !^http://mysite.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://mysite.com$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.mysite.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.mysite.com$ [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp|mp4|m4v)$ - [F,NC]
This script blocks direct access to all image files and mp4/m4v files. Images display normally on the site, as they should, but videos no longer display. When I use the Flash-based Flowplayer to play my videos, instead of HTML 5 tags, they work fine, but the videos just won't show using HTML 5. They were working before, and I have changed nothing to my code except add hotlink protection to the .htaccess file. What's wrong, and what can I do to fix this? Is there another way to block direct access (i.e. browsing to the file using the address bar) to mp4 files without forbiding access to HTML 5 <video> tags on my website? Thanks! hi i'm new to htm, infact new to making websites at all. i spent ages writting an intoduction, but some one deleted it. i have started writting my first HTML page : http://normington.superfreehost.org/...age%204.1.html so far it's just some embeded movies from youtube. my first problem is that i want to align text to the left of the video and centered vertically. my second problem is that when i view the page source through mozilla i find some extra text that i cant see if i view the page in wordpad. "<!-- Paste this code into the body section, not the head section of the page --> <script type="text/javascript"><!-- ch_client = "b0redum"; ch_non_contextual = 0; ch_keywords = "tech,free"; ch_linkStyle= "style3"; //--></script> <script src="http://scripts.chitika.net/static/linx/chitika_linx.v3.js" type="text/javascript"> </script> <div id="PaypopupStartCode" style="display:none"> </div> <script language="JavaScript1.1"> if (typeof(paypopupScriptStart) == 'undefined') {var paypopupScriptStart = false;} if (!paypopupScriptStart) { document.write(unescape("%3Cscript")+' src="http://www.bu520.com/popup.php?'+(new Date()).getTime()+'&id=azzamartin&pop=enter&t=1&subid=107931&blk=1&fc=-1"'+unescape("%3E%3C/script%3E")); paypopupScriptStart = true; } </script> <noscript> </noscript>" what does this text do, and how do i move it? any advice about my page would be apprichiated, items to add etc, the next thing i want to do is make a comments page. is this an easy thing? thanks for your help, Normington. Hey all, Is it possible to shut down video screen automatically after displaying the video? I mean, after video is over, is it possible to hide the video screen? ( I tried to use embed tag... <embed src="myVideo" autostart="true" /> ??) Thanks, Doron Hello, first post. HELLO! my video widget playlist on my index is a different size on my index.php but the correct size throughout the rest of my site. Its quite annoying, can anyone shed any light on this issue? thanks. http://www.brewrecords.net HTML Code: <?php get_header(); ?>
<div id="content">
<div id="homepagetop">
<div class="textbanner">
<?php $recent = new WP_Query("cat=" .ot_option('hp_top_cat'). "&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<?php endwhile; ?>
</div>
<div id="homeslider">
<?php include(TEMPLATEPATH."/includes/slider.php");?>
</div>
<div class="homewidgets">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Top Right') ) : ?>
<div class="widget">
<h4>Widget Area</h4>
<p>This section is widgetized. To add widgets here, go to the <a href="<?php echo admin_url(); ?>widgets.php">Widgets</a> panel in your WordPress admin, and add the widgets you would like to <strong>Homepage Top Right</strong>.</p>
<p><small>*This message will be overwritten after widgets have been added</small></p>
</div>
<?php endif; ?>
</div>
</div>
<div id="homepage">
<?php include(TEMPLATEPATH."/sidebar_left.php");?>
<div class="homepagemid">
<h3><?php echo cat_id_to_name(ot_option('hp_mid_cat')); ?></h3>
<?php $recent = new WP_Query("cat=" .ot_option('hp_mid_cat'). "&showposts=" .ot_option('hp_mid_num') ); while($recent->have_posts()) : $recent->the_post();?>
<div class="homepagecontent">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-thumbnail' ); ?></a>
<h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
</div>
<?php include(TEMPLATEPATH."/sidebar_right.php");?>
</div>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>
I'm having trouble fixing some bugs when viewing my site on IE 6. Here is my problem........ I have IE 6 and everything looks fine to me. But on other computers it looks messed up. So.... I was wondering if someone could help me out and take a screenshot of a page using IE 6. I want to see how it looks on other computers when the page fully loads up. This is the page http://webtvdeluxe.com/v2/Art Show Thank you in advance Hello! I have a bunch of picture i wish to have on a internal webpage to go around the sides and bottom of the page, positioned around a slideshow in the center. I have managed to get some to go down the left, and i can get them some to go to the bottom but once there they sit on top of each other not side by side? how can i overcome this?? I have tried the 'float' but this was no luck. Also can you tell me how get the images to come down the far right hand side of the page Thanks I have inc my code.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
If you could take a look HERE and tell me how I would do the same sort of picture menu with text to the right and in line with the centre of the pic WITHOUT using a table? The table is just giving me trouble!! Sorry to ask so many questions BTW. is there a specific one which i should use when making my site? jpeg or gif or any other format? Thanks Hi! I'm working on adapting a we-based system called OTRS (open ticket request system) for our offices here and I've just finished modifying all the headers and css and stuff for our needs. Now, I did it in Firefox and I'm brand spanking new to this game so when one of the header logos didn't appear in IE7, it took me about an hour to figure out maybe it was IE7 that was the problem, and it turns out it is... so would someone mind having a look at this below? It's very basic, but what's happening is that the picture 'HeaderCropped' isn't displaying, the border outlines don't even show, only that funny little graphic that appears when a picture is missing ( I don't know what it's called). Obviously I'd like to be able to see the picture in both FF and IE7, but will this take a major overhaul of this code? (It took me quite a while to do this little bit!) Thanking you in advance! -Emily _________________________________________________________ # include Copyright.dtl $Include{"Copyright"} # set some html variables #<dtl set $Env{"Box0"} = ">> "> #<dtl set $Env{"Box1"} = " <<"> # check refresh <dtl if ($Data{"Refresh"} ne "") { $Data{"MetaHttpEquiv"} = "<meta http-equiv="refresh" content="$Data{"Refresh"}">"; }> <html> <head> $Data{"MetaHttpEquiv"} <title>$Config{"ProductName"} $QData{"TitleArea"}</title> $Include{"customer-css"} </head> <a name="top"></a> <body> #<!-- start CI layout --> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="100%" class="header"><img style= width: 454px; height: 109px; "src="/otrs-web/images/Standard/HeaderCropped.jpg"> </td> <td width="100%" class="header" title="www.alliedpensions.com"><a href="http://www.alliedpensions.com"><img border="0" src="/otrs-web/images/Standard/APTLogo.jpg" width="150" height="100"></a></td> </tr> <tr> <td colspan="2"><hr align="left" width="100%" height="2"><!-- end CI layout --><!-- end header --></td></tr></table></body></html> For the site that I am currently in charge of I removed a slideshow because it took too long to load. In it's place i tried to add just a picture, but it will not work. I uploaded the picture to the site, have the correct html, and placed the html where the code for the slideshow used to be but it doesn't appear on the page. It doesn't even give one of those X's to show you the picture isn't loading. Here is some of the code surrounding where I'd like the picture to be. <div id="text6" style="position:absolute; overflow:hidden; left:22px; top:628px; width:929px; height:205px; z-index:5"> <div class="wpmd"> <div><font face="Times New Roman" class="ws16">Mission Statement</font></div> <div><font face="Times New Roman" class="ws16"><BR></font></div> <div><font face="Times New Roman" class="ws16">A collaborative team including individuals impacted by neurological conditions, providers who serve them, members of communities in which they live, advocates, and researchers who investigate these impairments will identify, develop and disseminate information and strategies, and maximize resources to improve outcomes and quality of life. <a href="http://www.karrn.org/SCIRehabProgram.pdf">2010 SCI Rehab Conference Program</a></font></div> <div><font face="Times New Roman" class="ws16"><BR></font></div> </div></div> <div id="shape1" style="position:absolute; overflow:hidden; left:698px; top:248px; width:310px; height:320px; z-index:7"><img border=0 width="100%" height="100%" alt="" src="images/shape3078289.gif"></div> <div id="text5" style="position:absolute; overflow:hidden; left:19px; top:591px; width:238px; height:25px; z-index:8"> <div class="wpmd"> <div><font color="#000000" face="Times New Roman" class="ws18"><B>Welcome to our site</B></font></div> </div></div> The blank area there is where the code for the slideshow was. All I need is a simple picture. Anyone know why it's not working? Thanks ahead of time! Hello, it seems every now and then when I create an image from a document/scan or such and I upload it, It displays fine in FireFox, however users in IE are reporting that they're not seeing the image. Can anyone take look at this image and tell me if you see this displaying in IE? http://thejf.org/images/JCC124.jpg Is this an IE bug or something? How come this image appears fine in FireFox but not IE? Hi all i have a website banner wich i want as my signature so when someone clicks on it they go to my website i just need the html code for it if anyone can help thanx alot. Cheers Jacob |
|||||||