|
JavaScript - Auto Hide Div After Video!?
I'm creating an interface. RIght now I have an introduction video in a div that is hidden when you click off of it. What I want to happen is for the div to automatically hide when the video is finished playing, so the user doesn't have to click on anything. I've tried multiple things and the div still just stays there until you click off of it. Also, I'm looking to have the div only show up on the user's first visit. This is an urgent matter. Any help is appreciated.
Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
// checks for first-time visitors
var firstvisit=getCookie("firstvisit");
if (firstvisit==null || firstvisit==""){
// here is where you would show the video container and start playing it
$('#mydiv').show();
document.getElementById('myvideoelement').play();
setCookie("firstvisit","true",365);
} else {
$('#mydiv').hide();
}
* * * *// check when video is finished, then hide mydiv
* * * *$("#myvideoelement").bind("ended", function() {
* * * * * $('#mydiv').hide();
* * * *$(".fancybox").fancybox();
* * * *});
});
</script>
script>
function getCookie(c_name){
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
*{
*x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
*y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
*x=x.replace(/^\s+|\s+$/g,"");
*if (x==c_name)
* {
* return unescape(y);
* }
*}
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
</script>
<script type="text/javascript">
document.onclick=check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('mydiv');
if(target!=obj){obj.style.display='none'}
}
</script>
Similar Tutorialshey all- i have been thinking about how i wanted to tackle this for a while now, and it is now "down to the wire"... so in my page i have two nav bars, one for js enabled and one for js disabled... they are styled accordingly (the js disabled is display:inherit; and the js enabled is display:none now i may need to tweak those styles after i get the script working, but that i can toy with after i get this working... anyways- my pages get the navbar inherited from a master page- so my thought was (to prevent loops) make a nav bar that had all js disabled links and a navbar that had all js enabled... then in my code i put in this script Code: <script type="text/javascript">
document.getElementById("Nav_Menu_JS_Content").style.display = "inherit";
document.getElementById("Nav_Menu_Content").style.display = "none";
</script>
now i am not amazing with js but i figured this would work... i get an error thrown every time though Quote: Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined now i assume (i am watching in debug) that this is because it is hitting the script before the rest of the page writes... but if i move the script below then the script never fires... ? here are the two nav bar ID's Note: i encapsulated the menus in <div>s and targeted the divs to ensure that there were no conflictions with my asp Code: <div id="Nav_Bar_Menu_Content" class="Nav_Menu"> ......... <div id="Nav_Menu_JS_Content" class="Nav_Menu_JS"> Hi, I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded. Thanks. //Ana Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. I want to be able to have multiple video's available on our site from our local news station. I have two separate video's in the code but only one shows. I wanted to show a player for each one but it looks as though I can display one player and need to know how to have more than one load in the same player - one at a time. I hope this makes sense. I need to have links but not leave this page or player. You can view the code with two video links here http://www.cincinnatidesigns.com/wri...ing/w_news.htm Hey all. I want to figure out how to make a new video pop up like this site I'm about to show you. Go to this link, then click on "Watch HD Video". You see how a new video pops up in the same window? Basically I want to do EXACTLY that. I've taken a good hour trying to figure it out for myself; viewing their source codes, looking at their java scripts, but I just couldn't get it to work. If any of you know how to achieve the exact same thing on that site, please share your knowledge with me! Hey, I am making a website and need to make a video archive like on this website http://5secondfilms.com/films/ so the newest videos are first and it just automatically updates as a new video page is added. Also what would be the easiest way to create the new video pages? Just make the one and then copy the page, paste, then edit the paragraphs and link to the new video? All help appreciated, Thanks. Hey im having a problem putting a swf video in a website Code: <script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function showIt(){
var so = new SWFObject('./images/portfolio/tours/stoodly_pano/panoStudioViewer.swf',Stoodly','325','325','9');
so.addParam('allowscriptaccess','always');
so.addParam('bgcolor','#FFFFFF');
so.addParam('flashvars','file=stoodly2.xml&autostart=true');
so.write('portfolio-content');
}
</script>
With this code it shows a loading bar thats as far as it goes can anyone show me where i am going wrong I have created a transparent flash video (virtual spokesperson) for my website. For demoing purposes, I would like to have this appear on any desired website. This is what I am trying to produce - here a virtual spokesperson appears on the codingforums.com website: http://www.innovateads.com/iads/demo...dingforums.com Have a look at other sites which enable one to type in a URL and their demo virtual spokesperson appears on the given site: http://www.vspworldwide.com, http://www.impactspokesperson.com, http://www.websitetalkingheads.com and http://www.laserstreamvideo.com. I believe they do this within an iframe to display the underlying website. Any ideas how to get this working ? I would really appreciate any feedback, code, how-tos, links... whatever. I am a complete javascript newbie. Thanks I am trying to mimic the video mouseover preview which can be viewed at the website below once you put your mouse over a picture a video preview window is opened which plays back the video and stops once the mouse is moved. http://videocopilot.net/tutorials/ How can i mimic this effect... any suggestions? Hello Friends, I have an <img> Tab to play a video(of type .wmv). The image tag is as follows: <img border="0" dynsrc="Test1.wmv" start="fileopen" loop="1" width=1081 height=838> Everything works fine, but now I need to play a video list (up to 5 videos). As soon as one video stops another video should start playing (at the same position automatically, without any user input) and as soon as the last video is stopped, it should start the first video again. So it will be like a loop. How can I achieve the above requirement? Thanks. I have a website where I am using a numbers counter and on the same page I have a video, I can't get both of them to work on the same page, Only one will work which is the numbers ticker. I have setup an example of it on a page, you can see he http://www.wordpressconnect.net/testing.php you can see the numbers ticker but at the bottom you can't see the video load. I have tested it with just the video and it works by itself. Is anyone able to help out pleaseeeeee, I've never coded javascript before so Im not sure how to fix this. thank youu Hi everyone. I'm new to the forum, and in need of help. The code below sometimes works the way I want it to...by downloading a video from an external site and displaying a placeholder whenever the page loads. But most of the time, the video won't download and display until a user hovers their mouse over the blank area. Is it possible to modify the code so that it functions consistently by always downloading and displaying the placeholder when the page loads? I don't want users to think there's a missing/broken video because there's a blank space where the video is supposed to be, and they don't realize they have to mouse over it. I would be grateful for any pointers. I searched the forums for a solution, but I don't think I'm using the correct keywords. Thanks so much for your help. Code: <a href="#" onclick="return(false);" rel="videoGUID=4cd75af679b39g4963V828c00c581024ae86&" style="display: block; width: 550px; height: 310px" id="4cd75af679b39g4963V828c00c581024ae86" width="550" height="310">How to Take Care of Your Dog's Teeth: VetVid Episode 001</a><script type="text/javascript" src="http://360.sorensonmedia.com/4cd75af679b39g4963V828c00c581024ae86/embedv2.js"></script> Hi I am trying to create a pop up window to view a video stream but it's not working. When I click on the image the pop up window doesn't appear. I have an oscMax site (this is oscommerce with more bells and whistles). This is my html code on my index page: Code: <td align="right" valign="middle"><a href="javascript:openNewWindow_01_01();"><img src="templates/my_custom/images/play_video.jpg" alt="Video Tutorial." border="0" width="50" height="20"></a></td> And this is my attempt at the javascript. I inserted it into my stylesheet but I'm not sure if this is the correct place for it. Code: </style>
<script language="Javascript" type="text/javascript">
<!--
function openNewWindow_01_01() {
window.open('http://buildawebsite.ie/store/catalog/flix/01_01/01_01.html', 'name', 'height=400,resizable=yes,width=600');
}
</script>
Any suggestions would be a great help. Thanks. I want to run a flash video on my web site. I've been working on this for days now, and obviously missing something. The page is really BRIEF -- nothing more than <object> calls and swfobject.registerObject call. when I look at it on the server, I get a totally blank page in IE. In firefox, I see a little "block" tab where the movie frame would be if it worked. Here is the whole code: thanks so much for looking at it. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK REL="SHORTCUT ICON" HREF="http://olympiceq.com/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Olympic Equine</title>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="360" height="264" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_2&streamName=HorseswithClicktoPlay&autoPlay=false&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="360" height="264">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_2&streamName=HorseswithClicktoPlay&autoPlay=false&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<param name="expressinstall" value="expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>
</body>
</html>
Hello - I've got an issue that I have mostly figured out except for one final step. I managed to build a rotating banner that goes through 4 slides with a YouTube video embedded on one side and text on the other. The entire slide (a large table) rotates automatically every 2.5 seconds - and when the user watches the video the slide stops onClick on the div. The problem I am having is getting the slides to start rotating again once the movie ends. Is there any way to do this? Basically I want the slides to stop rotating (not just the video - the entire slideshow) when the YouTube video is playing, and then when the video stops the slides start moving again after a few seconds. Is this even possible? What's the best way to do this? My code is below for two of the slides and the javascript code: (The conditional ie statements are temporary for now until I find a better solution for IE6) Code: <!--[if IE 6]>
<table cellpadding="0" cellspacing="0" width="1000"><tr><td valign="top" width="500">
<![endif]-->
<div class="ievideo" onclick="badrotate=true;" style="width: 450px; height: 294px; float: left; padding: 15px;"><!-- TemplateBeginEditable name="HomeVideo1" -->
<script type="text/javascript">
AC_AX_RunContent( 'width','400','height','250','onclick','badrotate=true;','src','http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US' ); //end AC code
</script><noscript><object width="400" height="250" onclick="badrotate=true;">
<param name="movie" id="movie2" value="http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>
</object></noscript>
<!-- TemplateEndEditable --></div>
<!--[if IE 6]>
</td><td width="500" valign="top">
<![endif]-->
<div class="ievideo2" style="width: 500px; height: 294px; float: left;"><!-- TemplateBeginEditable name="HomeVideo1Text" --><img src="../images/layout/integrated_health_systems.gif" style="margin-top: 40px;" />
<p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis,consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed. Duis quis nunc. Sed enim. Elementum sed, bibendum quis,consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, con sectetuer.</p>
<a href="#"><img src="../images/layout/learn_more_now.gif" style="margin-left: 150px;" /></a><!-- TemplateEndEditable --></div>
<!--[if IE 6]>
</td></tr></table>
<![endif]-->
</div>
</div>
<!-- videobox 1 -->
<!--[if IE 6]>
</div>
<![endif]-->
<!--[if IE 6]>
<div>
<![endif]-->
<!-- videobox2 -->
<div class="dyncontent" style="filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;">
<div class="videobox" style="width: 1000px; height: 294px;">
<div class="ievideo" onclick="badrotate=true;" style="width: 450px; height: 294px; float: left; padding: 15px;"><!-- TemplateBeginEditable name="HomeVideo2" -->
<script type="text/javascript">
AC_AX_RunContent( 'width','400','height','250','onclick','badrotate=true;','src','http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US' ); //end AC code
</script><noscript><object width="400" height="250" onclick="badrotate=true;">
<param name="movie" id="movie3" value="http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>
</object></noscript>
<!-- TemplateEndEditable --></div>
<div class="ievideo2" style="width: 500px; height: 294px; float: left;"><!-- TemplateBeginEditable name="HomeVideo2Text" --><img src="../images/layout/integrated_health_systems.gif" style="margin-top: 40px;" />
<p>This is the 2nd video</p>
<a href="#"><img src="../images/layout/learn_more_now.gif" style="margin-left: 150px;" /></a><!-- TemplateEndEditable --></div>
</div>
</div>
<!-- videobox 2 -->
<!--[if IE 6]>
</div>
<![endif]-->
Here is the script: Code: <script type="text/javascript">
var badrotate = false;
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{position:absolute;left:0px;top:0px; width: 1000px; height: 294px;}\n')
document.write('</style>')
}
var speed=5000;
var curcontentindex=0
var messages=new Array()
function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=new zxcAnimate('opacity',alltags[i],0);
}
}
function rotatecontent(){
if(badrotate==true) return;
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].obj.style.zIndex="0" //hide previous message
messages[prevcontentindex].animate(100,0,speed/4);
messages[curcontentindex].obj.style.zIndex="1" //show current message
messages[curcontentindex].animate(0,100,speed/4);
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("rotatecontent()", speed);
}
}
</script>
Thank you for any help/advice! 01) I would like to rollover (onmouseover?) a button that is a video and have the video (button) play. (A 5 sec video that stops at end) 02) On rolloff (onmouseoff?) the same button I would like it to rewind to the beginning for next rollover. 03) I would like to add more of these "Video Button Rollovers" to the same website page in the future. I would like to use DreamWeaver CS4, and stay away from flash for more accessibility and less memory intensive overhead. (obviously no control-bar for video) ----- I have all the parts to this to try a variety of solutions. ----- -The video is a box with untied string on a white background. - When played a person fades-on and ties the string into a bow. (white background matches website background) ----- Parts: 01) video from untied box to tied box with person .mov 02) image of first frame of video .jpg 03) video from untied box to tied box with person to person fade-off and untied box .mov 04) video of tied box with person to person fade-off and untied box.mov ----- The parts will be on this website: http://mydata.salve.edu/emersonb/g2/media.html Thanks Is it possible to have a thumbnail of a video, then when you click it it expands so you can watch it without having to link to a different page? I'm thinking kind of like how people link youtube videos on facebook
I am new to javascript (I started learning it today) so please explain it for newbies. I am trying to get the amount of video (in seconds) buffered already by the client and the whole duration of the video. Then, I divide them to get the precentage which was buffered so far. I have no problem storing the durating using: Code: var duration = document.getElementById('vid').duration
- returns "12.6" (seconds) I am struggling with getting the buffered time. I tried: Code: var buffered = document.getElementById('vid').buffered
This one returns "[object TimeRanges]". From what I understood this is some kind of an object (Like an array?). I tried returning "buffered.length" and I get "1" back. Please explain how I can do this. thanks Hi all, I need help with my problem. I have a plasma TV on which I invoking a lot of different short videos and I need at this TV also displayed a particular Web page. Video length is variable and depends on the actual length of the video currently playing and display the Web page is always 3 minutes. I'd like to do in this format: video1.html (3 minutes) -> pocasi.cz (5 minutes) -> video2.html (10 minutes) -> pocasi.cz (5 minutes)->...-> video30.html (1,5 minutes) -> pocasi.cz (5 minutes) -> video1.html (2,5 minutes )->... . Video's and web page in full screen without buttons. Can someone please advise how the script should look like? Thank you for your advice. I am using joomla, and have a tabbed menu at the top, which has different articles embedded within. I have embedded a flash video inside each article. The problem is that if i play a video and then switch to the other tab (article) without pausing the video, the video keeps on playing. And if i try to play the video in the other article, then both videos start playing. I want to stop the first video from playing as soon as I switch to the new tab. There are a lot of different files which are included in the page, so If I know where to place a particular code within the source of the final rendered webpage, I will be able to place it at the right point in a particular file. thanks the website link is: http://tinyurl.com/ycg4tcm |
|||||||