JavaScript - Javascript Video - Need Help!
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! Similar TutorialsI 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 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, How can I insert ads on html5 video tag before the main video plays? Now, I need make a sample allow: - play first advertisment video - play second ad video - play main video after 10 mins (half of duration) . pause main video . and play ad video. after that. continue the main video playback. Can you help me please? Thank you very much! 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, I have created a flash video that work on a php table (like php-nuke), this is seen well on my PC, instead with various screen the video size is not good. ON screen big the video is small, on screen small the video is big... How i can made a script that change the dimension of flash video ? any idea ? please help me.. HI all , I need to embed videos at runtime using iframe tags , currently am opening them, using urls at runtime using the below javascript...how do i modify the function to embed the iframe in the new window at runtime?? iframe tag eg: iframe width="560" height="315" src="http://www.youtube.com/embed/bx2rhzcIVxo" frameborder="0" allowfullscreen></iframe> Calling point: <body> <form id="form1" runat="server"> <!--A HREF="javascript:makeFrame('http://youtu.be/WPgpb7e7YCA')">Open the Popup Window</A>--> <A HREF="javascriptopUp('http://youtu.be/WPgpb7e7YCA')">Open the Popup Window</A> </form> </body> javascript function: <script type="text/javascript"> <!-- Idea by: Nic Wolfe --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin function popUp(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=315,left = 430,top = 242.5');"); } Forgive me if this has been answered elsewhere. can anyone tell me if they are aware of the script which will allow an image button to appear, after a certain time. I'm running a sales video and I do not want the download button to appear until the end. Hope this makes sense?? Hello, I want to run video at our website at a specified time only,like i might want my video to be played at 9.00a.m exactly . how can i do it using javascript. Plz do revert back ASAP. Thanks, Revathi srikrishna Hi all, I need Media player to stream and play video in javascript...any help or working link will work. My requirement is I have .wmv files but when i embed them in html pages first it gets downloaded and then it gets played. I need them playing while they are getting downloaded. please help, i have tried lots of codes but got no success hi I am trying to play a video from youtube. What I have done so far is getting videos from my database and displaying all those videos thumbnails. So now what i want is to when i click any thumbnail it should play that video in my website. How can I do this? Here is my code Code: function showResult(result) { $('#videosLoader').css('display','none'); var videoId = result.split(" "); for(i = 0; i < videoId.length - 1; i++) { var vidId = $.trim(videoId[i]); vidLink = getScreen(vidId,"small"); $('#videosList').append("<div class='playVid'>" + "<img width=80 height=80 src=" + vidLink + " alt='' /> " + "<input type='hidden' name='vidId' value='" + vidId + "' />" + "</div>").addClass("playVid"); } $('.playVid').click(function() { var val = $("input[name='vidId']").val(); alert("val"); $("#haveYourDefinition").append("<embed src='http://www.youtube.com/v/" + val + "&rel=1' pluginspage='http://adobe.com/go/getflashplayer' type='application/x-shockwave-flash' quality='high' width='450' height='376' bgcolor='#ffffff' loop='false'></embed>"); }); When I click any thumbnail it does nothing. Why and please tell me how to do this? Help Hi gents, I am trying to figure out, how to play a video file saved on the server, displayed as a hyperlink from the file manager created in JavaScript? The outcome should be following: When a file name (video.avi) clicked in JavaScript file manager, the server will open a page with the embed Windows Media Player (player.php) and it will start playing the clicked video file? Any suggestions? Code of the JavaScript file manager Code: <? /* Start Directory - To list the files contained within the current directory enter '.', otherwise enter the path to the directory you wish to list. The path must be relative to the current directory. */ $startdir = '.'; /* Show Thumbnails? - Set to true if you wish to use the scripts auto-thumbnail generation capabilities. This requires that GD2 is installed. */ $showthumbnails = true; /* Show Directories - Do you want to make subdirectories available? If not set this to false */ $showdirs = true; /* Force downloads - Do you want to force people to download the files rather than viewing them in their browser? */ $forcedownloads = false; /* Hide Files - If you wish to hide certain files or directories then enter their details here. The values entered are matched against the file/directory names. If any part of the name matches what is entered below then it is now shown. */ $hide = array( 'dlf', 'index.php', 'Thumbs', '.htaccess', '.htpasswd' ); /* Show index files - if an index file is found in a directory to you want to display that rather than the listing output from this script? */ $displayindex = false; /* Allow uploads? - If enabled users will be able to upload files to any viewable directory. You should really only enable this if the area this script is in is already password protected. */ $allowuploads = false; /* Overwrite files - If a user uploads a file with the same name as an existing file do you want the existing file to be overwritten? */ $overwrite = false; /* Index files - The follow array contains all the index files that will be used if $displayindex (above) is set to true. Feel free to add, delete or alter these */ $indexfiles = array ( 'index.html', 'index.htm', 'default.htm', 'default.html' ); /* File Icons - If you want to add your own special file icons use this section below. Each entry relates to the extension of the given file, in the form <extension> => <filename>. These files must be located within the dlf directory. */ $filetypes = array ( 'png' => 'jpg.gif', 'jpeg' => 'jpg.gif', 'bmp' => 'jpg.gif', 'jpg' => 'jpg.gif', 'gif' => 'gif.gif', 'zip' => 'archive.png', 'rar' => 'archive.png', 'exe' => 'exe.gif', 'setup' => 'setup.gif', 'txt' => 'text.png', 'htm' => 'html.gif', 'html' => 'html.gif', 'fla' => 'fla.gif', 'swf' => 'swf.gif', 'xls' => 'xls.gif', 'doc' => 'doc.gif', 'sig' => 'sig.gif', 'fh10' => 'fh10.gif', 'pdf' => 'pdf.gif', 'psd' => 'psd.gif', 'rm' => 'real.gif', 'mpg' => 'video.gif', 'mpeg' => 'video.gif', 'mov' => 'video2.gif', 'avi' => 'video.gif', 'eps' => 'eps.gif', 'gz' => 'archive.png', 'asc' => 'sig.gif', ); /* That's it! You are now ready to upload this script to the server. Only edit what is below this line if you are sure that you know what you are doing! */ error_reporting(0); if(!function_exists('imagecreatetruecolor')) $showthumbnails = false; $leadon = $startdir; if($leadon=='.') $leadon = ''; if((substr($leadon, -1, 1)!='/') && $leadon!='') $leadon = $leadon . '/'; $startdir = $leadon; if($_GET['dir']) { //check this is okay. if(substr($_GET['dir'], -1, 1)!='/') { $_GET['dir'] = $_GET['dir'] . '/'; } $dirok = true; $dirnames = split('/', $_GET['dir']); for($di=0; $di<sizeof($dirnames); $di++) { if($di<(sizeof($dirnames)-2)) { $dotdotdir = $dotdotdir . $dirnames[$di] . '/'; } if($dirnames[$di] == '..') { $dirok = false; } } if(substr($_GET['dir'], 0, 1)=='/') { $dirok = false; } if($dirok) { $leadon = $leadon . $_GET['dir']; } } if($_GET['download'] && $forcedownloads) { $file = str_replace('/', '', $_GET['download']); $file = str_replace('..', '', $file); if(file_exists($leadon . $file)) { header("Content-type: application/x-download"); header("Content-Length: ".filesize($leadon . $file)); header('Content-Disposition: attachment; filename="'.$file.'"'); readfile($leadon . $file); die(); } } if($allowuploads && $_FILES['file']) { $upload = true; if(!$overwrite) { if(file_exists($leadon.$_FILES['file']['name'])) { $upload = false; } } if($upload) { move_uploaded_file($_FILES['file']['tmp_name'], $leadon . $_FILES['file']['name']); } } $opendir = $leadon; if(!$leadon) $opendir = '.'; if(!file_exists($opendir)) { $opendir = '.'; $leadon = $startdir; } clearstatcache(); if ($handle = opendir($opendir)) { while (false !== ($file = readdir($handle))) { //first see if this file is required in the listing if ($file == "." || $file == "..") continue; $discard = false; for($hi=0;$hi<sizeof($hide);$hi++) { if(strpos($file, $hide[$hi])!==false) { $discard = true; } } if($discard) continue; if (@filetype($leadon.$file) == "dir") { if(!$showdirs) continue; $n++; if($_GET['sort']=="date") { $key = @filemtime($leadon.$file) . ".$n"; } else { $key = $n; } $dirs[$key] = $file . "/"; } else { $n++; if($_GET['sort']=="date") { $key = @filemtime($leadon.$file) . ".$n"; } elseif($_GET['sort']=="size") { $key = @filesize($leadon.$file) . ".$n"; } else { $key = $n; } $files[$key] = $file; if($displayindex) { if(in_array(strtolower($file), $indexfiles)) { header("Location: $file"); die(); } } } } closedir($handle); } //sort our files if($_GET['sort']=="date") { @ksort($dirs, SORT_NUMERIC); @ksort($files, SORT_NUMERIC); } elseif($_GET['sort']=="size") { @natcasesort($dirs); @ksort($files, SORT_NUMERIC); } else { @natcasesort($dirs); @natcasesort($files); } //order correctly if($_GET['order']=="desc" && $_GET['sort']!="size") {$dirs = @array_reverse($dirs);} if($_GET['order']=="desc") {$files = @array_reverse($files);} $dirs = @array_values($dirs); $files = @array_values($files); ?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Directory Listing of <?=dirname($_SERVER['PHP_SELF']).'/'.$leadon;?></title> <link rel="stylesheet" type="text/css" href="dlf/styles.css" /> <? if($showthumbnails) { ?> <script language="javascript" type="text/javascript"> <!-- function o(n, i) { document.images['thumb'+n].src = 'dlf/i.php?f='+i; } function f(n) { document.images['thumb'+n].src = 'dlf/trans.gif'; } //--> </script> <? } ?> </head> <body> <div id="container"> <h1>Directory Listing of <?=dirname($_SERVER['PHP_SELF']).'/'.$leadon;?></h1> <div id="breadcrumbs"> <a href="<?=$_SERVER['PHP_SELF'];?>">home</a> <? $breadcrumbs = split('/', $leadon); if(($bsize = sizeof($breadcrumbs))>0) { $sofar = ''; for($bi=0;$bi<($bsize-1);$bi++) { $sofar = $sofar . $breadcrumbs[$bi] . '/'; echo ' > <a href="'.$_SERVER['PHP_SELF'].'?dir='.urlencode($sofar).'">'.$breadcrumbs[$bi].'</a>'; } } $baseurl = $_SERVER['PHP_SELF'] . '?dir='.$_GET['dir'] . '&'; $fileurl = 'sort=name&order=asc'; $sizeurl = 'sort=size&order=asc'; $dateurl = 'sort=date&order=asc'; switch ($_GET['sort']) { case 'name': if($_GET['order']=='asc') $fileurl = 'sort=name&order=desc'; break; case 'size': if($_GET['order']=='asc') $sizeurl = 'sort=size&order=desc'; break; case 'date': if($_GET['order']=='asc') $dateurl = 'sort=date&order=desc'; break; default: $fileurl = 'sort=name&order=desc'; break; } ?> </div> <div id="listingcontainer"> <div id="listingheader"> <div id="headerfile"><a href="<?=$baseurl . $fileurl;?>">File</a></div> <div id="headersize"><a href="<?=$baseurl . $sizeurl;?>">Size</a></div> <div id="headermodified"><a href="<?=$baseurl . $dateurl;?>">Last Modified</a></div> </div> <div id="listing"> <? $class = 'b'; if($dirok) { ?> <div><a href="<?=$_SERVER['PHP_SELF'].'?dir='.urlencode($dotdotdir);?>" class="<?=$class;?>"><img src="dlf/dirup.png" alt="Folder" /><strong>..</strong> <em>-</em> <?=date ("M d Y h:i:s A", filemtime($dotdotdir));?></a></div> <? if($class=='b') $class='w'; else $class = 'b'; } $arsize = sizeof($dirs); for($i=0;$i<$arsize;$i++) { ?> <div><a href="<?=$_SERVER['PHP_SELF'].'?dir='.urlencode($leadon.$dirs[$i]);?>" class="<?=$class;?>"><img src="dlf/folder.png" alt="<?=$dirs[$i];?>" /><strong><?=$dirs[$i];?></strong> <em>-</em> <?=date ("M d Y h:i:s A", filemtime($leadon.$dirs[$i]));?></a></div> <? if($class=='b') $class='w'; else $class = 'b'; } $arsize = sizeof($files); for($i=0;$i<$arsize;$i++) { $icon = 'unknown.png'; $ext = strtolower(substr($files[$i], strrpos($files[$i], '.')+1)); $supportedimages = array('gif', 'png', 'jpeg', 'jpg'); $thumb = ''; if($showthumbnails && in_array($ext, $supportedimages)) { $thumb = '<span><img src="dlf/trans.gif" alt="'.$files[$i].'" name="thumb'.$i.'" /></span>'; $thumb2 = ' onmouseover="o('.$i.', \''.urlencode($leadon . $files[$i]).'\');" onmouseout="f('.$i.');"'; } if($filetypes[$ext]) { $icon = $filetypes[$ext]; } $filename = $files[$i]; if(strlen($filename)>43) { $filename = substr($files[$i], 0, 40) . '...'; } $fileurl = $leadon . $files[$i]; if($forcedownloads) { $fileurl = $_SESSION['PHP_SELF'] . '?dir=' . urlencode($leadon) . '&download=' . urlencode($files[$i]); } ?> <div><a href="<?=$fileurl;?>" class="<?=$class;?>"<?=$thumb2;?>><img src="dlf/<?=$icon;?>" alt="<?=$files[$i];?>" /><strong><?=$filename;?></strong> <em><?=round(filesize($leadon.$files[$i])/1024);?>KB</em> <?=date ("M d Y h:i:s A", filemtime($leadon.$files[$i]));?><?=$thumb;?></a></div> <? if($class=='b') $class='w'; else $class = 'b'; } ?></div> <? if($allowuploads) { $phpallowuploads = (bool) ini_get('file_uploads'); $phpmaxsize = ini_get('upload_max_filesize'); $phpmaxsize = trim($phpmaxsize); $last = strtolower($phpmaxsize{strlen($phpmaxsize)-1}); switch($last) { case 'g': $phpmaxsize *= 1024; case 'm': $phpmaxsize *= 1024; } ?> <div id="upload"> <div id="uploadtitle"><strong>File Upload</strong> (Max Filesize: <?=$phpmaxsize;?>KB)</div> <div id="uploadcontent"> <? if($phpallowuploads) { ?> <form method="post" action="<?=$_SERVER['PHP_SELF'];?>?dir=<?=urlencode($leadon);?>" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form> <? } else { ?> File uploads are disabled in your php.ini file. Please enable them. <? } ?> </div> </div> <? } ?> </div> </div> <div></div> </body> </html> Code of the PHP page with the embed Windows Media Player (player.php) Code: <html> <head> <title>Player</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <body> </head> <OBJECT id=mediaPlayer classid=clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 width=400 height=300 type=application/x-oleobject VIEWASTEXT><PARAM NAME="AutoSize" VALUE="1"><PARAM NAME="DisplaySize" VALUE="2"><PARAM NAME="url" VALUE=""><PARAM NAME="autoStart" VALUE="true"><PARAM NAME="uiMode" VALUE="mini"> <embed id="mediaPlayer" name="mediaPlayer" width="400" height="300" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="video.avi" autostart="true" showstatusbar="0" showcontrols="1" autosize="1" displaysize="4"></embed> </OBJECT> </body> </html> Please note that video.avi in player.php will be variable (name of the video file chosen by user and clicked). Many thanks for help. ZizaX. 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 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 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. Hi, I started with the template on this site: http://www.pupinc.com/videobox/ However, I have about a dozen videos with more to come so I added a vertical scrollbar to navigate through the thumbnails. My problem is I don't know how to separate the main video player so that it doesn't scroll with the thumbnails. HTML: Code: <div id="middle4"> <div class="videobox" style="height: 360px; overflow-y: scroll;"> <ul> <li><a href="http://www.youtube.com/watch?v=iFGEHtqNZis">TRS 50X35</a></li> <li><a href="http://www.youtube.com/watch?v=9CaN2KBYpo8">98X104 Automobile Shredder</a></li> <li><a href="http://www.youtube.com/watch?v=BWHXX6u3tVk">60x60 Aluminum</a></li> <li><a href="http://www.youtube.com/watch?v=ZiWDKtdfqWQ">60X60 System</a></li> <li><a href="http://www.youtube.com/watch?v=VMbbXcFju9E">Portable Shredding System</a></li> <li><a href="http://www.youtube.com/watch?v=WEn5xtJwtu4">60X85 System</a></li> <li><a href="http://www.youtube.com/watch?v=1cOxYQB5icg">60X60 White Goods</a></li> </ul> </div> </div> JS: Code: // Videobox object VideoBox = Class.create(); VideoBox.prototype = { // Initialize object. initialize: function(index, item) { this.index = index; this.item = item; this.item.addClassName('videoboxjs'); this.list = this.item.getElementsBySelector('ul')[0]; // Create div.bigvideo and add it just before the ul. this.bigvideo = document.createElement('div'); Element.addClassName(this.bigvideo, 'bigvideo'); this.item.insertBefore(this.bigvideo, this.list); // Create array of videothumbs. this.thumbs = new Array; // Opera 9 doesn't like 'li a' in getElementsBySelector, so you // have to break it apart. var links = this.item.getElementsBySelector('li'); for (var i=0; i < links.length; i++) { this.thumbs[i] = new VideoThumb(index, i, links[i].getElementsBySelector('a')[0]); } // Load up the first video. this.swap(0); }, // Replace existing video with new one. swap: function(index) { // IE 6 won't show the video unless something else is in the box. // I chose to add a <br /> which I hide via CSS. this.bigvideo.innerHTML = '<br /><object width="425" height="350"><param name="movie" value="' + this.thumbs[index].video + '"></param><param name="wmode" value="transparent"></param><embed src="' + this.thumbs[index].video + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>'; // Deselect all the thumbnails. this.thumbs.invoke('deselect'); // Select the current thumbnail. this.thumbs[index].select(); } }; // Videothumb object VideoThumb = Class.create(); VideoThumb.prototype = { // Initialize object. initialize: function(boxindex, index, link) { this.boxindex = boxindex; this.index = index; this.item = link; this.href = this.item.getAttribute('href'); // Extract the v querystring value from the href. Youtube uses this // value for everything. this.videocode = this.href.toQueryParams().v; // Direct link to the video for use in the object/embed this.video = 'http://www.youtube.com/v/' + this.videocode; // Create thumbnail image and append it inside the list item var img = document.createElement('img'); img.src = 'http://img.youtube.com/vi/' + this.videocode + '/default.jpg'; img.alt = this.item.innerHTML; img.title = this.item.innerHTML; this.item.innerHTML = ""; this.item.appendChild(img); // Observe the click event. Event.observe(this.item, 'click', this.swap.bindAsEventListener(this)); }, swap: function(evt) { // Call the swap method of the parent videobox with the thumbnail // thumbnail index as a parameter. aVB[this.boxindex].swap(this.index); // Stop the event so the browser doesn't follow the link. if (evt) { Event.stop(evt); } }, select: function() { this.item.addClassName('current'); }, deselect: function() { this.item.removeClassName('current'); } }; // Don't do anything if we're using Opera 8 or earlier. if (!Prototype.Browser.Opera || (Prototype.Browser.Opera && navigator.userAgent.toLowerCase().charAt(navigator.userAgent.toLowerCase().indexOf('opera') + 6) > 8)) { // Create array of videoboxes so you can have more than one on a page. var aVB = new Array; $$('div.videobox').each ( function(videobox, index) { aVB[index] = new VideoBox(index, videobox); }); } 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 ) Greetings. It has been a long while since I have needed to code and a lot has changed. I am looking for resources on how to use JavaScript to When a button is pressed it moves the playhead of a single video to an assigned frame or timestamp in the video and begin playing. Then when the playhead reaches its destination it stops. I have done this in Flash before using AS1 and simple keyframe based commands and buttons for goToandPlay and stop. Is there any good reading to be had on the interwebs on this topic? Thanks in advance!! |