|
HTML - Intergrating Sound, Video And Flash E.t.c?
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?
Similar TutorialsHi 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 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 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 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... 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? I 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 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!?!?! I have a jailbroken iPhone 4 and I am trying to get a flash embed to display on it but I am having a lot of trouble. i have successfully used and enabled different flash objects elsewhere but this is the only one that wont run. so I know it will work. HTML Code: <head>
<title>iSwim</title>
</head>
<body>
<div style="width: 320px; height: 356px; margin-top: 80px; margin-bottom: 44px;">
<object width="320" height="356"> <param name="movie" value="http://listen.grooveshark.com/widget.swf" /> <param name="wmode" value="opaque" /> <param name="allowScriptAccess" value="always" /> <param name="flashvars" value="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" /> <embed src="http://listen.grooveshark.com/widget.swf" type="application/x-shockwave-flash" width="320" height="356" flashvars="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" allowScriptAccess="always" wmode="opaque" /></object>
</div>
</body>
Can anyone help me to make sure the flash displays right? what happens is the player loader displays at the top instead of the center and the control buttons are present before it loads. then after the loader fails it shows a "cannot connect" error. so I think the flash object is resizing inside its self. can anyone help me clean up this script so it will display correctly in iPhone safari (with flash enabled)? website is he smalldotdesign.zxq.net/iSwim.html that is where the HTML file is located that I am trying to get corrected. thanks in advance. i have a feeling this is going to be a tough fix. 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 can't seem to get a sound to play on my site. I can edit the code and execute it on my computer and it works fine. When I upload it to my page, it doesn't work. I use Firefox but also tried it with IE. I have tried both EMBED and BGSOUND. The sound is a very small WAV file. Where am I going wrong? Hello, Can someone please help me with this: I am trying to embed a sound into a text link...here is the code: <li><a class="last" href="index.html">Inchide Sistemul</a></li> ...when I click the link I want to play a sound, how can I modify the code to do that? Thanks http://pavel.free-site-host.com/ I have a couple of problems with this layout. First of all I have set up a script for mouse over sound over the nav, but when i mouse over nothing happens. Next I have set up another script that has random images but for some reason it has made the layout unaligned. Last, towards the bottom it has a blank spot for a search (for the web-site) could somebody explain how to create a search for the content inside the site. Thank you in advance Just wondering if anyone knows a good way to loop like a 3 second sound clip on a page? I want it to start as soon as the page loads and keep looping. Any help would be awesome. Thanks I am on myspace. I am trying to send a comment with a sound wav. I don't want a link I want a small player that will play the file. I want it to be Html but I don't know how to get it that way. I've tried everything . Help??! I was wondering how i add sound to my webpage, so that it plays when the user enters the page, but with a play and stop button. I have a sound problem with chrome. I have been added a song to my website using: <embed src="c1.mp3" width="200" height="100" autoplay="true" hidden="true" loop="1" volume="100"></embed> but is not working in chrome. On the other hand is woking in IE 6 What is the problem?? Is it possible to make a sound when the mouse goes over an image? maybe using some JS or something. Also on mouseout aswell I would like it to make some kind of beeping noise when the user hovers over an image but i dont want to go in to all that flash stuff etc... I have this alert box that I would like to add a sound after you click ok. Can this be done to the script I have here? Thanks //<![CDATA[ var alertmessage="Well this the last and finale Assignment for the JavaScript Level One Course" //Alert only once per browser session (0=no, 1=yes) var once_per_session=1 function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { // if cookie exists offset += search.length // set index of beginning of value end = document.cookie.indexOf(";", offset); // set index of end of cookie value if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function alertornot(){ if (get_cookie('alerted')==''){ loadalert() document.cookie="alerted=yes" } } function loadalert(){ alert(alertmessage) } if (once_per_session==0) loadalert() else alertornot() //]]> |
|||||||