video.js: Visibility of Control Bar shall influence div element

Question

I am working with video.js and moved the control bar below my video.

When the video is playing and paused and the user is not moving his mouse over the area of the video the Control Bar with Play, Seekbar, Volume and Fullscreen fades out.

Now I also want to put a title and share options beneath the conventional controls. I tried the following link from stackoverflow VideoJS 4.0 Plugin: How to properly add items to the controlBar? but am too inexperienced to adapt it to my needs.

That is why I just want to start a js function that adjusts the visibility of a div element to the visibility of the control bar of video.js.

My code:

 <style>
#sharediv {
background-color: #FFFFFF;

  }
 </style> 

 <div id="sharebox"> Test </div>

 <script>

function showsharebox()
  { document.getElementById("sharebox").style.visibility=(document.getElementById("example_video_1").vjs-control-bar.style.opacity == 0) ? = hidden;
     }

</script>

I know that an Event-Handler is missing. Where and how do I need to insert that guy?

Thanks very much!

I know tried to tie the function to the class of the control bar but this doesn't work either:

  function showsharebox()
 { document.getElementById("sharebox").style.opacity=(document.getElementById('example_video_1').getElementsByClassName('vjs-default-skin vjs-control-bar').style.opacity;
     }

I would be very grateful for any kind of input.

video.js: Visibility of Control Bar shall influence div element

0 Answers0