custom video controls hide show code problem

This site is best viewed in a modern browser with JavaScript enabled.

custom video controls hide show code problem

sweetysweety

hi,
i have a video and i created custom controls for this video.
i want to show custom controls,when mouse is over then hide controls,when mouse is out.
i wrote some code for this but it makes this even once.the second and more hovers,controls remains hidden.

here is my code:

function initializePlayer()
	{
control=document.getElementById("controls");
control.addEventListener("mouseover",hoverVideo,false);
}
window.onload=initializePlayer;
function hoverVideo(e)
		{
			control.style.visibility="visible";
			control.addEventListener("mouseout",hideVideo,false);
		}
		function hideVideo(e)
		{
			e.preventDefault();
			control.style.visibility="hidden";
		}

how can i solve this problem?

tenfold

It could be because you add several mouseout listeners. It's hard to tell.

Try this. If this doesn't work, you probably have a different problem.

var control;

function initializePlayer() {
    control = document.getElementById("controls");
    control.addEventListener("mouseover", showVideo, false);
    control.addEventListener("mouseout", hideVideo, false);
}

function showVideo(event) {
    control.style.visibility = "visible";
}

function hideVideo(event) {
    control.style.visibility = "hidden";
}

window.onload = initializePlayer;

sweetysweety

i try your code but it is not working too.

shawngn

I'd say make nested if elses into a loop . Either way yoyr gona need a loop so it reactivates the javascript that's already finished. It won't run the code twice unless you tell it to

shawngn

At the end of his functioms make a call back to th e original function. That should work

sweetysweety

ok i solve auto hide problem.
but i have another problem too.
i have some buttons outside the video.
like:

<div id="gallery">
	    <div id="slides">
	      <div class="slide" >
           <div id="contain">
        		<video id="video" width="900" height="320" autoplay  autohide="3">
            		<source src="video/The-Big-White---Sample.webm" type="video/webm"/>
                	<source src="video/big_buck_bunny_1080p_stereo.ogg" type="video/ogg"/>
  			<source  src="video/The-Big-White---Sample.mp4" type="video/mp4"/>
  			<source src="video/Examplevideo.ogv" type="video/ogg"/>
		</video>
            	<div id="controls" >
            	    <button id="playpause"></button>
                    <input id="seekslider" type="range" min="0" max="100" value="0" step="1" >
                    <span id="curtimetext"></span> / <span id="durtimetext"></span>
                    <button id="mutebtn" ></button>
                    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1" >
                    <button id="fullscreenbtn" ></button>
            	</div>
            </div>
          </div>
	      <div class="slide" align="center" style="background:url(imajlar/zemin.png);">
          	<img src=""  alt="aboutUs"/>
          </div>
	      <div class="slide">
          	<object data="" height="350" width="900" type="text/html" class="islerimizSayfasi" name="islerimizSayfasi" id="islerimizSayfasi" contenteditable="true"></object>
          </div>
	      <div class="slide">
          	<iframe src="" height="350" width="900" class="iletisimSayfasi" name="iletisimSayfasi" id="iletisimSayfasi" contenteditable="true" frameborder="0" scrolling="no"></iframe>
          </div>
        </div>
<div id="menu">
   	   <ul id="menuButtons" class="group">
       	   <li class="menuItem" id="current_page_item_two">
            	<a href="#"></a>
            </li>
            <li  id="bosluk">
                	<img  src="" alt="whitespace" />
            </li>
        	<li class="menuItem" id="button1">
            	<a id="hakkimizdaButon" href="">
                	<img  src="" alt="thumbnail"  />
                </a>
            </li>
            <li  class="bosluk2">
              	<img src="" alt="whitespace"/>
            </li>

    	<li class="menuItem" id="button2">
        	<a id="islerimizButon" href="">
            	<img  src="" alt="thumbnail" />
            </a>
     	</li>
        <li  class="bosluk2">
           	<img src="" alt="whitespace"/>
      	</li>
    	<li class="menuItem" id="button3">
        	<a id="iletisimButon" href="">
            	<img src="" alt="thumbnail"/>
            </a>
     </li>
  </ul>
</div>

i'm trying to do that when i click one of menuItem buttons,the video that is playing have to be paused.
do you have any idea for this?

shawngn

Why not link the code from your pause button to th e menu for both pause and play. That will save a lot of coding. I have to type on phone sry I can't login at work I am on a computer to read a andmd try codes.

sweetysweety

you mean like this:

var buttons;
function addEvent(target, functionref, eventType) {
  if (target.addEventListener) {
    target.addEventListener(eventType, functionref, false);
  }
  else if (target.attachEvent) {
    target.attachEvent('on' + eventType, function() {
      return functionref.call(target, window.event)
    });
  }
}
function initializePlayer()
	{

	buttons=document.getElementsByClassName("menuItem");

	addEvent(buttons,pauseVideo,"click");

}
window.onload=initializePlayer;
function pauseVideo()
		{
			if(vid.paused){
				vid.play();
			}
			else{
				vid.pause();
				}
		}

shawngn

Kind of not exactly what I had in mind. I'd post if I could. But again on phone right now. Does that work I don't think it would the way you described it.

sweetysweety

yes i wrote that you describe but it didn't work.
ok.
i can wait.
cause i couldn't find another way to do it.