|
JavaScript - Remove Video <div> - Onended
Hello there,
I am new to javascript. I would like to remove the div containing a video, by javascript, on the 'onended' event, but am not sure how to do this yet. Here is my code so far: Code: <body onload="javascript:showDiv()">
<div class="fullscreen" id="fullscreen">
<video autoplay="autoplay" >
<source src="stage.mp4" type="video/mp4" />
<source src="stage.webm" type="video/webm" />
</video>
</div>
<script>
function hideDiv() {
if (document.getElementById) {
document.getElementById('fullscreen').style.visibility = 'hidden';
}
}
function showDiv() {
if (document.getElementById) {
document.getElementById('fullscreen').style.visibility = 'visible';
}
}
</script>
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
hideDiv();
document.write("<font color=\"white\">Work???</font>");
}
</script>
I expected the text 'Work???' to be executed after the onended function carries out. However the video is not removed... Thanks in anticipation to your answers.. Zugz Similar TutorialsI understand that there is an onended event handler that can be used to detect when a media event, such as the playing of am MP3 file or digital video file, is completed. I would like to know 1. how to use code this event handler and 2. how to use detection of the end of the media event to launch another Web page. Thanks for any help, George 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 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'm using jQuerys' $.ajax to load a div with some details in it and i want to use the esc key to close the div. Heres the code so far Code: $('.username span').click(function(){
$('.MiniPro').remove();
ID = $(this).parent().attr('ID');
This = $(this).parent();
miniPro();
});
function miniPro()
{
$(This).append('<div class="MiniPro">Loading...</div>');
$.ajax({
type: 'POST',
data: 'userID='+ID,
url: 'processing/miniPro.php',
success: function(msg)
{
$('.MiniPro').remove();
$(This).append('<div class="MiniPro"'+msg+'<div class="MiniProClose">X</div></div>');
}
});
}
Is it even possible to do that? Hi all, here i got a problem, i want to remove all the Li tag that with a classname"test" . Code: <html>
<head>
<title>Introduction to the DOM</title>
<script>
window.onload = function(){
var li = document.getElementsByTagName("li");
for ( var j = 0; j < li.length; j++ ) {
if(li[j].getAttribute('class')=='test'){
li[j].parentNode.removeChild( li[j] );
}
}
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the
DOM is awesome, here are some:</p>
<ul>
<li class="ppp">ppp.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
</ul>
</body>
</html>
Hello, I'm currently using this code: I want it so that there isnt a box around the countdown, and the countdown is the same text as "you will be redirected in" here is it in action: http://www.playelite.org/redirect.html Code: <form name="redirect">
<center>
<font face="Arial"><b>You will be redirected in:
<form>
<input type="text" size="3" border="0" name="redirect2">
</form>
seconds</b></font>
</center>
<script>
<!--
var targetURL="http://google.com"
var countdownfrom=10
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}
countredirect()
//-->
</script>
Thanks 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>
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. Greetings I'm using a script to display rotating youtube videos in the sidebar of my invision board. The problem is that the random thing causes the same video to be repeated twice in row at times. I need to add a cookie so that no video gets displayed to the same user until all other videos have been displayed. I also look for adding - if possible - a line to count the videos, so that I don't have to edit the number each time I add more videos.. Can someone please help me with that? Here is the script I'm using: Code: <script type="text/javascript">
function rand ( n )
{
return ( Math.floor ( Math.random ( ) * n + 1 ) );
}
// Store youtube [CHANGES NEEDED IN THE 3 URLS BELOW]
var vids = new Array ( );
vids[0] = "http://www.youtube.com/embed/aF4M0JtoIPk";
vids[1] = "http://www.youtube.com/embed/KMxWhovYfzc";
vids[2] = "http://www.youtube.com/embed/ffZUWZQE0EU";
vids[3] = "http://www.youtube.com/embed/povUgNcf4aI";
vids[4] = "http://www.youtube.com/embed/Zs9u7X0rrd0";
vids[5] = "http://www.youtube.com/embed/D4L0KpqNzkU";
vids[6] = "http://www.youtube.com/embed/Mfdnb0Q7IBM";
vids[7] = "http://www.youtube.com/embed/D-JJpPBjQwI";
vids[8] = "http://www.youtube.com/embed/kn5NSCJ2tiI";
vids[9] = "http://www.youtube.com/embed/BDxDMCWShds";
// Pick a random video from the list
function pick_vid ( )
{
var numberOfImages = 10; //[CHANGE THE 3 TO THE TOTAL NUMBER OF VIDS YOU USE]
var num = rand(numberOfImages)-1;
document.getElementById("random_youtube_vid").src = vids[num];
}
</script>
<script type="text/javascript">window.onload=pick_vid;</script>
<p style="padding: 6px 0;text-align:center">
<iframe id="random_youtube_vid" width="250" height="200" frameborder="0" allowfullscreen></iframe>
</p>
I found another scripts that could be of help, as it uses div and cookies.. But its for general display of anything. It doesn't have the iframe for the video. I don't know how to merge both scripts. Or perhaps you have better ideas.. Code: <div id="randomdiv1" style="display:none;">
[content for div 1]
</div>
<div id="randomdiv2" style="display:none;">
[content for div 2]
</div>
<div id="randomdiv3" style="display:none;">
[content for div 3]
</div>
<script type="text/javascript" language="JavaScript"><!--
/* Random Div Display
Version 1.0
March 9, 2009
Will Bontrager
http://www.willmaster.com/
Copyright 2009 Bontrager Connection, LLC
For information about implementing this software, see the article at
http://www.willmaster.com/library/javascript/random-div-display.php
*/
// One place to customize:
//
// Type the number of div containers to randomly display.
NumberOfDivsToRandomDisplay = 3;
// No other customizations required.
////////////////////////////////////
var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
if(NumberOfDivsToRandomDisplay > 1) {
var ck = 0;
var cookiebegin = document.cookie.indexOf(CookieName + "=");
if(cookiebegin > -1) {
cookiebegin += 1 + CookieName.length;
cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
}
while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
document.cookie = CookieName + "=" + r;
}
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
document.getElementById("randomdiv"+i).style.display="none";
}
document.getElementById("randomdiv"+r).style.display="block";
}
DisplayRandomDiv();
//--></script>
Many thanks in advance. So I have been converting videos to mp4 and it is working fine (I can download the file and play it in wmp without a hitch) but when I try to use the html5 video tag by itself or with video js (videojs.com) enabled, the video only plays audio. It doesn't play any video. What could I possibly be doing wrong? Video: http://www.xonicgames.com/user/uploads/videos/6360.mp4 JS: http://xonicgames.com/video/?i=6 Thanks Hello everyone, after a few days of looking i give up i just don't know what to look for or how to do it. on this website "http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding there is a section called How to make a video select list. I have been able to replicate and modify it to my liking how ever i have one issue. i can't make my videos fullscreen. The videos have and give the option for full screen but the fullscreen doesn't work. i prefer this kind of code because it allows my webpage to select a video without changing the webpage and play it, i find it much more smoother then then multiple embedded videos in tabs (i don't even know what to call it so thats what i call it) just incase the website doesnt work or something i will post the script first part<div id='videoPlayback' style='width: 435px; height:350px; background-color: #800000;'></div> then <div id='selectDemo1' style='display: none'> <object width="425" height="350"> <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="425" height="350"> </embed> </object> </div> <div id='selectDemo2' style='display: none'> <object width="425" height="350"> <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="425" height="350"> </embed> </object> </div> then <A HREF="#" onclick='return playVideo("selectDemo1","videoPlayback")'>RvD2: Ryan vs. Dorkman 2</A><BR> <A HREF="#" onclick='return playVideo("selectDemo2","videoPlayback")'>Beatboxing Flute </A><BR> and finally<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'm not sure the exact functions or how to write this kinda stuff from scratch so if you have any helpfull additions or suggestions please let me know. 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. Hello guys, I spent a lot of time searching for a good image/video gallery, but didn't find, what I'm looking for. All I need is a code, that I can insert to my webpage. I need a thumbnail gallery (images or videos), that I can scroll by next/previous buttons a open it by clicking in new window. This is how LightBox and VideoLightBox work, but they don't have the next/previous buttons. I found js ImageScroller, but it can't work together with VideoLightBox... Is there anybody solving this problem? Well I found this page http://codecanyon.net/item/jquery-ho...preview/112734 but I need it even for videos. If there is a solution for both images and videos... Thanks for help, DveD 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 want to encrypt my video file and wants to give source url of that file in my web page and while before playing of that file on my web page I want enable password for authentication. How to do this? (Using javascript or html5 ) |
|||||||