JavaScript - Rewrite Video Text (help)

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

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

Hi there everyone I'm new here and to the world of coding in general. I have my own site now on it's third build. The second build was done by a someone else using ASP and database type things, which I don't really understand. Since I can no longer seem to contact him I'm trying to update the site myself but I'm having some trouble.

I have a page on my site which contains a flash video player with and xml based playlist, however when I access this page from my main computer the page produces an error message which reads 'playlist could not be loaded due to cross-domain policy restrictions'. If I add www. to the address then it works fine. I'm unsure of how to rectify this or whether it is a problem for anyone else viewing the site:

williammorrismusic.com/video.asp

Below is the code I have used for the player:

Code:

<script type='text/javascript' src='http://www.williammorrismusic.com/swfobject.js'></script>
 
<div id='mediaspace'>This text will be replaced</div>
 
<script type='text/javascript'>
  var so = new SWFObject('player.swf','mpl','640','560','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('playlistfile','http://www.williammorrismusic.com/playlist.xml');
  so.addVariable('backcolor','000000');
  so.addVariable('frontcolor','ffffff');
  so.addVariable('lightcolor','ffffff');
  so.addVariable('screencolor','000000');
  so.addVariable('playlist','bottom');
  so.write('mediaspace');
</script>

Any help on this would be most appreciated.

I've also posted this in the java section I think in error, if it is I apologize and please remove it.

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.

Hi there everyone I'm new here and to the world of coding in general. I have my own site now on it's third build. The second build was done by a someone else using ASP and database type things, which I don't really understand. Since I can no longer seem to contact him I'm trying to update the site myself but I'm having some trouble.

I have a page on my site which contains a flash video player with and xml based playlist, however when I access this page from my main computer the page produces an error message which reads 'playlist could not be loaded due to cross-domain policy restrictions'. If I add www. to the address then it works fine. I'm unsure of how to rectify this or whether it is a problem for anyone else viewing the site:

williammorrismusic.com/video.asp

Below is the code I have used for the player:


Code:

<script type='text/javascript' src='http://www.williammorrismusic.com/swfobject.js'></script>
 
<div id='mediaspace'>This text will be replaced</div>
 
<script type='text/javascript'>
  var so = new SWFObject('player.swf','mpl','640','560','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('playlistfile','http://www.williammorrismusic.com/playlist.xml');
  so.addVariable('backcolor','000000');
  so.addVariable('frontcolor','ffffff');
  so.addVariable('lightcolor','ffffff');
  so.addVariable('screencolor','000000');
  so.addVariable('playlist','bottom');
  so.write('mediaspace');
</script>

Any help on this would be most appreciated.

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&amp;hl=en_US" />
                        <param name="allowFullScreen" value="true" />
                        <param name="allowscriptaccess" value="always" />
                        <embed src="http://www.youtube.com/v/6Cka8KoMhPw?fs=1&amp;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&amp;hl=en_US" />
                        <param name="allowFullScreen" value="true" />
                        <param name="allowscriptaccess" value="always" />
                        <embed src="http://www.youtube.com/v/9fwNwiBU2GA?fs=1&amp;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!

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.

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

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

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

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 )