JavaScript - W3c And Apple Video Embedding Via Ac_quicktime.js

I'm trying to embed flash onto a web page using the flash player that comes with Dreamweaver CS4. I've used other players in the past, such as the Longtail FLV player, but need to use one that's free for commercial use in this case. I've set up the file with a script to load the video dynamically using the swfobject (the CS4 flash player uses a modified version, not sure what's different about it). Everything works as expect on PC, but on Mac for some reason instead of playing the video it just displays the components of the flash player's skin (i.e. play button, etc.). Here's the script:

Code:

<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
	<script type="text/javascript">

			var flashvars = {};
			flashvars.MM_ComponentVersion = '1';
			flashvars.skinName = "skins/Halo_Skin_3";
			flashvars.streamName = "videos/base";
			flashvars.autoPlay = "false";
			var params = {};
			var attributes = {};
		
			
			swfobject.embedSWF("FLVPlayer_Progressive.swf", "myContent", "768", "432", "9.0.0","expressInstall.swf", flashvars, params, attributes);
	
	</script>

And the HTML:

Code:

<div id="myContent">
      <p>Some content requires Adobe Flash Player.  You can download it <a href="http://get.adobe.com/flashplayer/" rel="nofollow" target="_blank">here</a></p>
    		</div>

Any thoughts on what might be causing the problem? Thanks.

I'm getting Error: Object doesn't support property or method 'addEvent' in my webpage.

I'm trying to embed a flash carousel in an asp.net page and I have this, but nothing is showing on my page. Using IE9 and FF4

Code:

 <script type="text/javascript">
        window.addEvent('load', function() { 
            var flashvars = {
                xmlLocation: "<%=ResolveUrl("upload/data.xml")%>",
                imageLocation: "<%=ResolveUrl("~/upload/")%>"
            };
            swfobject.embedSWF("<%=ResolveUrl("~/upload/Carousel-Test.swf")%>", "FlashContainer", "576", "242", "10.0.32", "", flashvars, null, null);
       });
        </script>

The xml has some settings for the images and all my images are in the upload folder in my project. I have reference to the swfobject js in the masterpage (head) and the homepage inherits from it: Code:

<script src="javascript/swfobject.js" type="text/javascript"></script>.

Anyone give some suggestions?

i'm newb to java, but need to get my quicktime movie embeds working on windows/explorer. apparently i need to call external java script to make it work: http://developer.apple.com/internet/ieembedprep.html

here is my HEAD code: <script src="kitchslideembed.js" language="JavaScript" type="text/javascript"></script>

and BODY code: <script language="JavaScript"type="text/javascript">InsertKitchSlideMovie();</script>

and my "kitchslideembed.js" file...
function InsertKitchSlideMovie()
{
document.write('<object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="768" height="591" codebase='http://www.apple.com/qtactivex/qtplugin.cab'>\n');
document.write('<param name='src' value="http://jamesgivensdesign.com/public_html/notes/kitchenslide1.mov">\n');
document.write('<param name='autoplay' value="false">\n');
document.write('<param name='controller' value="true">\n');
document.write('<param name='loop' value="false">\n');
document.write('<embed src="kitchenslide1.mov" width="768" height="591" autoplay="false" controller="true" loop="false" pluginspage='http://www.apple.com/quicktime/download/'>\n');
document.write('</embed>\n');
document.write('</object>\n');
}
any help out there?

For a project in my high school web design class, I need to integrate an Excel spreadsheet as data so to speak for a web page. I want to pull the prices from the sheet, and make them appear on the page. I'd like to pull it from the sheet so that the client can still adjust and edit the prices without having to reach the actual webpage. Conceptually, I thought this would be fairly straight forward, but in researching how to do this, I got very confused. I'm not even positive that I'm putting this in the right section.

So my main question is this:
Is there a way to integrate an Excel spreadsheet in such a way that it can provide data for certain fields of a webpage? If so, can someone please explain how?

Thanks,
A Confused High School Girl

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 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

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 )

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

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'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>

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="&amp;MM_ComponentVersion=1&amp;skinName=Corona_Skin_2&amp;streamName=HorseswithClicktoPlay&amp;autoPlay=false&amp;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="&amp;MM_ComponentVersion=1&amp;skinName=Corona_Skin_2&amp;streamName=HorseswithClicktoPlay&amp;autoPlay=false&amp;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>