Embedded multi player (video)

**rexi** · 07-10-2012, 05:14 AM

Hello Molendijk,...
I like all videos system which you make.
Many different function video system,..and I have many question.But now just one question:

For this script above about video,...it is possible that you can make button "hide" on the corner player.It is easy to STOP.
Thank you.

**molendijk** · 07-10-2012, 10:29 AM

If you want the size and position of the script I've given above, you could do something like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>

<style type="text/css">
body {font-family: verdana; font-size:12px}
#video_container, #hider1, #hider2
{position:absolute; left:50%; top:50%; margin-top:-170px; margin-left:-176px; width: 352px; height:240px; overflow:hidden}
#hider1, #hider2{background:black;color:white; display:none;}
#hide_button{position: absolute; left: 50%; top:50%; margin-top:-170px; margin-left: 125px; display: none; z-index:1; cursor: pointer; width:50px}
</style>

<script type="text/javascript">
function include_video_prep(url)
{
video='<object id="the_video" type="application/x-shockwave-flash"  style="position:absolute;width:100%;height:100%;" data='+'"'+url+'"'+'><param name="movie" value='+'"'+url+'"'+'><param name="allowFullScreen" value="true"><param name="flashvars" value="autoplay=1"><param name="wmode" value="transparent"><param name="allowNetworking" value="all" ><param name="allowscriptaccess" value="always"><\/object>'

setTimeout("document.getElementById('video_container').innerHTML=video",0);
}

function include_video(which)
{
document.getElementById('hide_button').style.display='block';
document.getElementById('hider1').style.display='block';
document.getElementById('hider2').style.display='block';
include_video_prep(which);
setTimeout("document.getElementById('hider1').style.display='none'; document.getElementById('hider2').style.display='none'",3500); 
}
</script>

</head>

<body ><div>
<button id="hide_button" onclick="this.style.display='none';document.getElementById('video_container').innerHTML=''">HIDE</button>
<div id="video_container"></div>

<div id="hider1">
<iframe style="position:absolute;width:100%;height:100%;" src="http://www.youtube.com/apiplayer" frameborder="0"></iframe>
</div>

<div id="hider2" ></div>

<div style="position:absolute; top:50%; left:50%; margin-top:90px; margin-left: -225px">

Click on a link -> 
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Cux1bM35e1c?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Sibelius</a>&nbsp;&nbsp;

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/LB3VfxfBlnY?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Errol</a>&nbsp;&nbsp;

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jUvcyyU7UB4?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Arkansas</a>&nbsp;&nbsp;

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jTls82o-ChA?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Chimp</a>&nbsp;&nbsp;

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Wz1W_omigwg?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Spooky</a>&nbsp;&nbsp;


</div>

</div></body>

</html>

Arie.

**rexi** · 07-10-2012, 04:14 PM

I am not think directly about original "button".
I want put my text,..for exmp. ("stop",..."close video",..."hide",.."X").
I sow ,you have something on another system video.
So,if can't be like that,.."hide button" will be OK.
Thank You.

**molendijk** · 07-10-2012, 05:50 PM

You mean like this(?):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>

<style type="text/css">
body {font-family: verdana; font-size:12px}
#video_container, #hider1, #hider2
{position:absolute; left:50%; top:50%; margin-top:-170px; margin-left:-176px; width: 352px; height:240px; overflow:hidden; }
#hider1, #hider2{background:black;color:white; display:none;}
#hide_button{position: absolute; left: 50%; top:50%; margin-top:-170px; margin-left: 158px; display: none; z-index:1; font-family: verdana; font-size: 12px; cursor: pointer; font-weight: bold; background: black; color: white}
</style>

<script type="text/javascript">
function include_video_prep(url)
{
video='<object id="the_video" type="application/x-shockwave-flash"  style="position:absolute;width:100%;height:100%;" data=\''+url+'&amp;vq=large\'><param name="movie" value='+'"'+url+'"'+'><param name="allowFullScreen" value="true"><param name="flashvars" value="autoplay=1"><param name="wmode" value="transparent"><param name="allowNetworking" value="all" ><param name="allowscriptaccess" value="always"><\/object>'

setTimeout("document.getElementById('video_container').innerHTML=video",0);
}

function include_video(which)
{
document.getElementById('hide_button').style.display='block';
document.getElementById('hider1').style.display='block';
document.getElementById('hider2').style.display='block';
document.getElementById('video_container').style.background='black';
document.getElementById('video_container').style.color='white';

include_video_prep(which);
setTimeout("document.getElementById('hider1').style.display='none'; document.getElementById('hider2').style.display='none'",0); 
}
</script>

</head>

<body ><div>
<div id="hide_button" title="Stop video" onclick="this.style.display='none';document.getElementById('video_container').innerHTML=''; document.getElementById('video_container').style.background='';document.getElementById('video_container').style.color='';">&nbsp;X&nbsp;</div>
<div id="video_container"></div>

<div id="hider1">
<iframe style="position:absolute;width:100%;height:100%;" src="http://www.youtube.com/apiplayer" frameborder="0"></iframe>
</div>

<div id="hider2" ></div>

<div style="position:absolute; top:50%; left:50%; margin-top:90px; margin-left: -225px">

Click on a link &rarr;
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Cux1bM35e1c?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Sibelius</a>&nbsp;&nbsp;

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/LB3VfxfBlnY?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Errol</a>&nbsp;&nbsp;

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jUvcyyU7UB4?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Arkansas</a>&nbsp;&nbsp;

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jTls82o-ChA?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Chimp</a>&nbsp;&nbsp;

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Wz1W_omigwg?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Spooky</a>&nbsp;&nbsp;


</div>

</div></body>

</html>

Arie.

**rexi** · 07-10-2012, 11:07 PM

Yes,..that is perfect.
Mr.Molendijk,..thank you very-very much for your time for me.

Also I will ask you in the future about your other bigger video system which has huge menu link music.I will ask you if is possible when I click on the menu ("menu") on the player that open box-menu ( like content box ),..but no HTML web page.I have no web site,..I have just blog.
Thank you,..have good time.

**rexi** · 07-14-2012, 01:28 AM

Originally Posted by molendijk

If you're looking for something like THIS (raw version), I can make something for you.
(HERE's a sophisticated example of the technique)
===
Arie Molendijk

Hello Mr.Molendijk,...
I want ask you abut position menu.It is possible to put menu on the left top corner of video?.
On the same position on video like "X" which is on the left.
I am using classic open-close panel which I make content box for menu.You can see if you open "source" my page bellow.

Also I have problem with menu if I looking with Explorer,..When I have video on the blog,..Explorer can not see menu over video,..just under video.But with Firefox is OK .
But now on the empty page working good with Explorer...( usually on the blog no ).
Have solution to see content box-menu over video with Explorer???

This is page.

**molendijk** · 07-14-2012, 11:58 AM

You mean this?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>


<!--
Contractible Headers script-Dynamic Drive (www.dynamicdrive.com)
This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
Visit http://www.dynamicdrive.com/ for full source code
-->

<!--DROPDOWN PANEL BEGINING -->
<script type="text/javascript"> 
 
var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
 
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('<\/style>')
}
 
function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}
 
function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}
 
function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}
 
function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}
 
function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
 
function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}
 
function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}
 
document.cookie=window.location.pathname+"="+selectedItem
}
 
function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
 
if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate
 
</script>  
<!--DROPDOWN PANEL END -->


<style type="text/css">
body {font-family: verdana; font-size:12px;}
#video_container, #hider1, #hider2
{position:absolute; left:50%; top:50%; margin-top:-170px; margin-left:-276px; width: 550px; height:300px; overflow:hidden;}
#hider1, #hider2{background:black;color:white; display:none;}
#hide_button{position: absolute; left: 50%; top:50%; margin-top:-170px; margin-left: 256px; display: none; z-index:1; font-family: verdana; font-size: 12px; cursor: pointer; font-weight: bold; background: black; color: white}


</style>

<script type="text/javascript">
function include_video_prep(url)
{
video='<object id="the_video" type="application/x-shockwave-flash"  style="position:absolute;width:100%;height:100%;" data=\''+url+'&vq=large\'><param name="movie" value='+'"'+url+'"'+'><param name="allowFullScreen" value="true"><param name="flashvars" value="autoplay=1"><param name="wmode" value="transparent"><param name="allowNetworking" value="all" ><param name="allowscriptaccess" value="always"><\/object>'

setTimeout("document.getElementById('video_container').innerHTML=video",0);
}

function include_video(which)
{
document.getElementById('hide_button').style.display='block';
document.getElementById('hider1').style.display='block';
document.getElementById('hider2').style.display='block';
document.getElementById('video_container').style.background='black';
document.getElementById('video_container').style.color='white';

include_video_prep(which);
setTimeout("document.getElementById('hider1').style.display='none'; document.getElementById('hider2').style.display='none'",0); 

}
</script>

</head>

<body >

<div id="hider1">
<iframe style="position:absolute;width:100%;height:100%;" src="http://www.youtube.com/apiplayer" frameborder="0"></iframe>
</div>
<div id="hider2" ></div>

<div id="hide_button" title="Stop video" onclick="this.style.display='none';document.getElementById('video_container').innerHTML=''; document.getElementById('video_container').style.background='';document.getElementById('video_container').style.color='';"> X </div>
<div id="video_container"></div>

<div style="  CURSOR: pointer" onclick="expandcontent('K6')"><font size="2" color="#111111">MENU</div>
<div id="K6" class="switchcontent" style="position:absolute;z-index:100">


<div style='position:fixed; left:50%; top:50%; margin-top:-170px; margin-left:-276px;WIDTH: 100px;height:200px;background-color:#D1CAC0;padding:15px;border:#000000 1px solid;-moz-border-radius: 10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;'>

<div style="position:relative;  CURSOR: pointer; margin-top:-10px"   onclick="expandcontent('K6'); "><font face="Tw Cen MT"><font size="2" color="#808080">  c l o s e - X</font></font></div><br>

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Cux1bM35e1c?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Sibelius</a><br > <br >  
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/LB3VfxfBlnY?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Errol</a><br > <br >  
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jUvcyyU7UB4?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Arkansas</a><br > <br >  
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jTls82o-ChA?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Chimp</a><br > <br >   
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Wz1W_omigwg?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Spooky</a><br>  

</div>
</div>


</body >
</html>

Arie

**rexi** · 07-14-2012, 03:39 PM

Thank You,..this is also good idea,...but I am not think about that.
I want sign "MENU" that is on the place when you put now content box.No problem about content box with links,..I can make position left or right,or top and bottom.

For example,..when I click on the "MENU" on the left corner,..will be open content box with this links,..and when click any link,will be show video,and on video on the left corner will be "MENU" also.

So ,..one more "MENU" will be on the left corner video,..just like on the right corner "X".,..but this is same (id) code ( MENU) from open-close panel.
Sorry for confusion.
Thanks,...

**molendijk** · 07-15-2012, 05:44 PM

I'm afraid I dont't quite understand what you mean. Could you give me some screenshots for clarification?
Arie.

**rexi** · 07-16-2012, 01:02 AM

Thank You for your time.
I can make some screenshot,but I think this will be just lost your time because I am discovered one big problem.
Generally,..your all system about video is very good on plain page ( empty page ) which has not under links.

I sow new problem on my blog when I test this system,that on the center place where show video,..even no video,..there is problem,I can not click any link on the post,..menu.

This is normal when show video that I can not click link under,because I can not see it,..but when I disconnect this video,..on the place when was video,..under can not click any links.

What you think about that,and any experience about.
Thank lots.