HTML - How Do I Specify The Placement Of A Flash Video On A Page?
I want to have a FLASH video overlay an image (the first frame of the video). How to I do this?
I've tried using the <NAME> tag and the <ID> tag. Neither works, or I'm not coding them correctly. To view the video I'm working with click on this URL: http://RDStouffer.net/geyser/ The above directory contains three items - geyser.jpg, index.html and geyser.swf Here is the relevant HTML code-- <IMG SRC="geyser.jpg" WIDTH="320" HEIGHT="240" BORDER="0" ALT="Sawmill geyser"> <OBJECT CLASSID='clsid27CDB6E-AE6D-11cf-96B8-444553540000' WIDTH='320' HEIGHT='240'><PARAM NAME=MOVIE VALUE='geyser.swf'><PARAM NAME=QUALITY VALUE=HIGH><PARAM NAME=BGCOLOR VALUE=#FFFFFF></OBJECT> How do I modify this code so the SWF video clip plays on top of the geyser.jpg image rather than next to it? Thank you for your help. [Where did this grinning green lightbulb come from? More important, how do I get rid of it?] Uncle Richard Similar TutorialsI am having a problem with my site on IE 6. It's weird because I downgraded my browser to IE 6 so that I can detect these kinds of problems but it looks fine on my computer but weird on others. Heres my issue.... On IE 6, after the movie loads up, it stops loading the rest of the html after the video. So right after the video,the rest of the coding won't load. It works on every other browser but I want to try to get it to work on IE 6 because a lot of people still use it. Here is one of my video pages http://webtvdeluxe.com/v2/videos/Jones%20vs%20Trinidad/ It anyone can help me out, that would be great. Thanks in advance Hi! I have exported an flash movie to a html file. The file is located at http://magnetik.eu/files/ratas If move around the menu you will notice that is a line break at the top. Right between the flash file and the top of the browser. Any idea how can I get rid of it? Thank you Hi I have a Flash video player that brings up IE's yellow warning bar, and whne you click to allow it, it won't play even after you say 'yes, play it'. It only happens in IE7 It's at http://www.directhometherapy.com.au Any ideas how to allow the player? Thanks for taking a look. Shaun 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... Finally finished this book! Book does not mention much about integrating sound, animation, video and flash, can I cover each of those here or do you guys have an easy to understand link for these please? I assume that this should not be in the Flash section as it seems as the threads there are discussing problems within the Flash program, not putting Flash videos on your webpage. Anyway, I put my flash video on my website and it has black borders on the left and right sides of the video. I would like to remove them, but I don't know a whole lot about flash video parameters. Could anyone tell me how to do this? Here's my code for the index page: Code: <!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> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems."/> <meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12"/> <title>AV Avenue</title> </head> <body> <ul id="stoplight"> <li id="stoplight1"><a href="index.html"></a></li> <li id="stoplight2"><a href="aboutus.html"></a></li> <li id="stoplight3"><a href="contactus.html"></a></li> </ul> <div id="stoplightbottom"> <img src="Images/Home Page/StoplightBottom.png" alt=""/> </div> <div id="smartboard"> <img src="Images/Home Page/Smartboard.png" width="180" height="180" alt=""/> </div> <div id="featuredpartner1"> <img src="Images/Home Page/AviSPLLogo.png" width="140" height="60" alt=""/> </div> <div id="featuredpartner2"> <img src="Images/Home Page/UnitedVisualLogo.png" width="140" height="60" alt=""/> </div> <div id="featuredpartnertext"> <span class="blackfont2 comicsansms">SMART Board Partners</span> </div> <div id="specials"> <img src="Images/Home Page/MaySpecials.png" alt="Check out our special services for May!"/> </div> <div id="text2"> <img src="Images/Home Page/Text2.png" alt=""/> </div> <div id="avsign"> <img src="Images/Home Page/AVAvenueLeftSign.png" alt=""/> </div> <div id="states"> <img src="Images/Home Page/States.png" alt=""/> </div> <div id="contractorstext"> <span class="blackfont1 comicsansms">Technology Systems Contractors Power Limited Technicians</span> </div> <div id="company1"> <img src="Images/Home Page/Company1.png" height="30" width="100" alt=""/> </div> <div id="company2"> <img src="Images/Home Page/Company2.png" height="30" width="100" alt=""/> </div> <div id="company3"> <img src="Images/Home Page/Company3.png" height="30" width="100" alt=""/> </div> <div id="company4"> <img src="Images/Home Page/Company4.png" height="30" width="100" alt=""/> </div> <div id="company5"> <img src="Images/Home Page/Company5.png" height="30" width="100" alt=""/> </div> <div id="flashmovie"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="400" id="AV_Ave" align="middle"> <param name="movie" value="AV_Ave.swf"/> <param name="quality" value="high"/> <param name="play" value="true"/> <param name="bgcolor" value="#000000"/> <param name="loop" value="true"/> <param name="wmode" value="window"/> <param name="scale" value="showall"/> <param name="menu" value="true"/> <param name="devicefont" value="false"/> <param name="salign" value=""/> <param name="allowScriptAccess" value="sameDomain"/> <object type="application/x-shockwave-flash" data="AV_Ave.swf" width="600" height="400"> <param name="movie" value="AV_Ave.swf"/> <param name="quality" value="high"/> <param name="play" value="true"/> <param name="bgcolor" value="#000000"/> <param name="loop" value="true"/> <param name="wmode" value="window"/> <param name="scale" value="showall"/> <param name="menu" value="true"/> <param name="devicefont" value="false"/> <param name="salign" value=""/> <param name="allowScriptAccess" value="sameDomain"/> <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> </object> </object> </div> </body> </html> and here's my CSS: Code: * {margin:0; padding:0;} html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } textarea { overflow:auto; } ul#stoplight { margin: 0px 840px; width: 0px; height: 0px; list-style: none; } ul#stoplight li { display:inline; } ul#stoplight li a { float:left; text-indent:-9999px; text-decoration:none; } ul#stoplight li#stoplight1 a { width:178px; height:82px; background:url(Images/Stoplights.png) no-repeat 0 0; } ul#stoplight li#stoplight1 a:hover { background-position: -221px 0; } ul#stoplight li#stoplight2 a { width:178px; height:63px; background:url(Images/Stoplights.png) no-repeat 0 -82px; } ul#stoplight li#stoplight2 a:hover { background-position: -221px -83px; } ul#stoplight li#stoplight3 a { width:179px; height:66px; background:url(Images/Stoplights.png) no-repeat 0 -145px; } ul#stoplight li#stoplight3 a:hover { background-position: -221px -144px; } body { background-image: url('Images/GradientBackground.png'); background-repeat: repeat-x; } .arial {font-family: Arial;} .tahoma {font-family: Tahoma;} .verdana {font-family: Verdana;} .comicsansms {font-family: Comic Sans MS;} .underline {text-decoration: underline} .blackfont1 {font-size: 16px;} .blackfont2 {font-size: 24px;} .whitetext1 {color: #F2F2F2; font-size: 30px;} .whitetext2 {color: #EBEBEB; font-size: 17px;} .whitetext3 {color: #DBDBDB; font-size: 18px;} #background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: visible;} #stoplightbottom {margin: 211px 840px; position: absolute; z-index: 1; visibility: visible;} #featuredpartnertext {margin: 230px 980px; position: absolute; z-index: 1; visibility: visible; width: 300px;} #smartboard {margin: 270px 1020px; position: absolute; z-index: 1; visibility: visible;} #featuredpartner1 {margin: 460px 960px; position: absolute; z-index: 1; visibility: visible;} #featuredpartner2 {margin: 460px 1110px; position: absolute; z-index: 1; visibility: visible;} #specials {margin: 550px 1020px; position: absolute; z-index: 1; visibility: visible;} #text2 {margin: 650px 155px; position: absolute; z-index: 3; visibility: visible;} #avsign {margin: -5px 50px; position: absolute; z-index: 1; visibility: visible;} #states {margin: 90px 540px; position: absolute; z-index: 1; visibility: visible;} #contractorstext {margin: 30px 530px; position: absolute; z-index: 1; visibility: visible; width: 250px;} #company1 {margin: 210px 250px; position: absolute; z-index: 1; visibility: visible;} #company2 {margin: 210px 350px; position: absolute; z-index: 1; visibility: visible;} #company3 {margin: 210px 450px; position: absolute; z-index: 1; visibility: visible;} #company4 {margin: 210px 550px; position: absolute; z-index: 1; visibility: visible;} #company5 {margin: 210px 650px; position: absolute; z-index: 1; visibility: visible;} #contactinfo {margin: 270px 170px; position: absolute; z-index: 2; visibility: visible;} #contactimage {margin: 270px 170px; position: absolute; z-index: 1; visibility: visible;} #greenbackground {margin: 230px 170px; position: absolute; z-index: 1; visibility: visible;} #greybackground {margin: 230px 170px; position: absolute; z-index: 1; visibility: visible;} #aboutusheader {margin: 240px 260px; position: absolute; z-index: 2; visibility: visible; width: 600px;} #aboutusparagraph {margin: 290px 180px; position: absolute; z-index: 2; visibility: visible; width: 630px;} #list1 {margin: 400px 190px; position: absolute; z-index: 2; visibility: visible; width: 200px;} #list2 {margin: 400px 400px; position: absolute; z-index: 2; visibility: visible; width: 200px;} #list3 {margin: 400px 610px; position: absolute; z-index: 2; visibility: visible; width: 200px;} #flashmovie {margin: 240px 200px; position: absolute; z-index: 2; visibility: visible; width: 300px;} My website is www.avavenue.com. Thanks a ton to anyone who helps out . hello I tried to publish a flash video so I could use it as a website background. everything works great in dreamweaver, but when I transfer all my files to my schools server the video no longer works. does anyone have some ideas? Ill provide files if needed. Thank you-Micah www.allontheside.com The flash video works fine in safari, and firefox but internet explorer doesn't even recognize it as a flash file.. any1 have any suggestions? Hello! I am trying to replace my existing flash videos with newer ones. These newer videos I converted from Quicktime to swf. I replaced the video file name with the newer video file name and it uploaded fine. There are a couple problems though. It doesn't have the Play, Stop, etc controls at the bottom and it is on a loop. Here is the link to the new video: http://www.swingmangolf.com/isokinetics.swf Here is the code with the new video: <table width="158" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><br /><br /> <td height="126" align="center" valign="middle"><script> //<!-- AC_RunFlContentX ("src","Isokinetics.swf","quality","high","width","550","height","315","wmode","transparent","autost art","false"); //-->1 z </script></td> </tr> </table> How do I get the controls to show up and to stop it from playing over and over!?!?! This is really strange. If I write my code like this, --------------- <td style="height: 100% width 16px; background-image: url('widgets/gen_72.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td></tr> <tr><td width="16" height="17"><img src="widgets/gen_76.1.gif" border=0 width=16 height=17 alt=""></td> <td style="height: 17px width 100%; background-image: url('widgets/gen_69.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td> <td style="width: 16px height 17px; background-image: url('widgets/gen_75.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="17" alt="widget></td></tr></table> --------------- my page displays correctly. But if I simple move the end tags for the table like this, ----------------------- <td style="height: 100% width 16px; background-image: url('widgets/gen_72.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td></tr> <tr><td width="16" height="17"><img src="widgets/gen_76.1.gif" border=0 width=16 height=17 alt=""></td> <td style="height: 17px width 100%; background-image: url('widgets/gen_69.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td> <td style="width: 16px height 17px; background-image: url('widgets/gen_75.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="17" alt="widget"> </td></tr></table> ------------- the page adds an extra table image below the table. Just adding a space before the </td> tag throws off the results. How can this be? I've never had a web page do this before. Can someone explain this to me? It simply doesn't make sense? Am I doing something wrong that I'm not seeing? Thanks How to add .swf and video to html page with disabling scrollbars and stretching the .swf and video to the whole page? I am using these codes for creating projects for sale purposes, I am also asking for permission for using these codes for my projects! looking 4wrd. I have placed the code as below <object> <embed src="videos/kyaw.avi" width="380" height="265" autoplay="False"></embed> </object> in using visual studio 2005. video not working or playing on my page. But when i use the notepad for the program it was working. It is quite strange to me and I just novice(started html). pls any advice or coding ,.///... help me that is the web site i doing http://mayrum.co.uk/Myvideo.aspx pleaseeeeeeeeeeeeeee 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 saw some web pages where the video inside came from youtube The whole page was from their own site but the window that showed the video was from youtube. almost like a window into youtube for just that 1 part of the page can this be done with just html? area maps? I really need to do this. My host server gives problems when I embed a video, It would be great just to use youtube please help -marksmolen@mail.com Hello, Can anybody post a code that will let me embeed remote .FLV video into web page by using IFRAME? Thanks Hello all! I need some help to make a link on my webpage which can open a Youtube-video in a new empty window. Youtube.com offers to types of linking the video-code: a) a regular URL-link for opening the video in a regular youtube-page (with all menus and ads) Example: http://www.youtube.com/watch?v=_i_VvpQbYj4 b) an embed-code which will show the video anywhere you want on your webpage. Example: <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/_i_VvpQbYj4"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/_i_VvpQbYj4" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> So I guess we have to combine these two methods for solving the problem? Perhaps I can make an empty html-page called "\videopage.html", and then make a link-code which opens the videopage.html showing the video embedded? Like this: 1. Make a file called "\videopage.html" 2. Make a link on my webpage with the unknown code. 3. When a user clicking on my video-link, it opens the page called "\videopage.html" and plays the video. 4. I have many videos linking from youtube, so I think I have to re-use the page called "\videopage.html" many times. 5. This means the "\videopage.html" needs to be empty all the time, and just be 'called on' by the code. Can anyone help me? I hope a clever HTML-coder can make this work... Anyone with ideas? Best regards, Stereoid Can anyone help me with this please? Im really new to html and I wanna make a website. >.> Anyway I want to make the website in flash because im way better at flash and I won't have to learn as much. So what I wanna do is 1. make the website in flash (just attach the file/image or something) 2. When you click on a certain thing it will link to another page on the site and there I'll have a movie/game attached there. Thanks a lot in advance Hi, I am a newbie and trying to develop a web site with HTML over IIS. I have inserted a flash (swf) object into the html code and am able to see the object displayed via IIS (right-click virtual directory and browse). However, it does not show if I try to access the same page via IE with http://localhost/Other. Only the text gets displayed. What could be the reason. Thanks. please help. i used html <object> tag and i embeded a .swf flash file inside my html page... everything worked great until here.... now i want to let the visitor of my page to be able to navigate through my .swf file through my own navigation bar buttons that i want to put above the .swf file... i want my visitor to be able to press the avigation bar buttons to play and stop and forward and backward and rewind and so on... i dont want my visitor to press the right mouse button when he over the flash object to navigate i want to have my own navigation static bar above the flash.... what solutions there is to this problem....? what is the best solution ? best regards. |