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";}

i actually have another problem about video effects.

<div id="gallery">   <div id="slides">     <div class="slide" >                  <div id="contain" style="width:900px; height:350px; background-color:#000000; margin:0 auto; font:Arial, Helvetica, sans-serif;">         <video id="video" width="900" height="320" autoplay class="video-js vjs-default-skin" 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" style="background-color:#666666; height:30px;">                 <button id="playpause" style=" border:none; width:16px; height:16px; cursor:pointer; opacity:0.5; background:url(imajlar/pause.png); margin-left:5px; margin-top:7px;"></button>                            <input id="seekslider" type="range" min="0" max="100" value="0" step="1" style="width:250px; border-radius:100px;">                            <span id="curtimetext" style="color:#999999;"></span> / <span id="durtimetext" style="color:#999999;"></span>                            <button id="mutebtn" style="background-color:#999999; width:16px; height:16px; background:url(imajlar/volume.png); margin-left:5px; margin-top:7px; border:none; cursor:pointer;"></button>                            <input id="volumeslider" type="range" min="0" max="100" value="100" step="1" style="width:50px; border-radius:100px;">                            <button id="fullscreenbtn" style="width:16px; height:16px; background:url(imajlar/full_screen.png); margin-left:5px; margin-top:7px; border:none; cursor:pointer;"></button>                   </div>                </div>              </div>     <div class="slide"">              </div>     <div class="slide">              </div>     <div class="slide">              </div>        </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="imajlar/beyazDikdortgen196px-beyaz.gif" alt="whitespace" />            </li>         <li class="menuItem" id="button1">             <a id="hakkimizdaButon" href="">                 <img  src="imajlar/1hakkimizda-icon.png" alt="thumbnail"  />                </a>            </li>            <li  class="bosluk2">               <img src="imajlar/beyazDikdortgen149px-beyaz.gif" alt="whitespace"/>            </li>                     <li class="menuItem" id="button2">             <a id="islerimizButon" href="">                 <img  src="imajlar/2isler-icon.png" alt="thumbnail" />                </a>          </li>            <li  class="bosluk2">                <img src="imajlar/beyazDikdortgen149px-beyaz.gif" alt="whitespace"/>           </li>         <li class="menuItem" id="button3">             <a id="iletisimButon" href="">                 <img src="imajlar/3iletisim-icon.png" alt="thumbnail"/>                </a>         </li>      </ul></div>

i want to pause the video,when i clicked one of buttons have classname=menuItem

how can i solve this problems?

[justsomeguy]

The the hover issue, you're attaching the mouse out handler inside the hover handler. So every time you hover, you add another mouse out handler to hide it. You only need to attach event handlers once, you don't want them to keep firing multiple times for a single event.

 

If you want to attach an event handler to all elements with a particular class name, you can use this:

 

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

 

IE only supports that from version 9, so if you want to support older versions of IE then you'll probably need to get elements by tag name and loop through them to check the class for each one to see if you want to attach the handler to it.

[sweetysweety]

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

i try this code but it is not working too.i'm trying to reach all links of class name=menuItem.i use to reach: document.getElementsByClassName("menuItem").getElementsByTagName("a")

but it did not work.

[thescientist]

I don't see much debugging there. Have you tried logging the elements to the console? To make sure they exists? console logs in the event handlers to make sure they are firing? Or that initializePlayer is running?

[justsomeguy]

 

 

i use to reach: document.getElementsByClassName("menuItem").getElementsByTagName("a")

That's not going to work, document.getElementsByClassName returns a collection of elements, collections don't have a getElementsByTagName method. You would need to loop through each menuItem element and get the children for each one individually. You should be checking for Javascript error messages in your console though, it doesn't sound like you're doing that. That line would cause an error.