CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Max
Max

Reputation: 1

Play video and stick to the mouse - jQuery

I want a video to be played and stick to the mouse pointer when the visitor hovers the red box. When he leaves the red box with the mouse the video stops and disappears.

This is what I got so far: jsfiddle

jQuery:

$(document).bind('mousemove', function(e){
    $('#tail').css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
});

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}

$( "#red" ).mouseover(function() {

   $("#videosList").css("display","block");

});

HTML:

<div id="tail">
                  <div id="videosList">  



<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="http://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
      <source src="http://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
    Your browser does not support the video tag.
    </video>
  </div>
  Hover mouse over video. Desktop only [ Obviously! ;) ]
</div> 
</div>

<div id="red" style="height:200px;width:200px;background:red;">

</div>

Upvotes: 0

Views: 133

Answers (2)

jmcgriz
jmcgriz

Reputation: 3358

Made some changes, it's working now fiddle

There were a few syntax things that were a little off, and the hover event needed to be bound to #red rather than to .video

Upvotes: 0

qwertyuip9
qwertyuip9

Reputation: 1632

Your code is very close to being right. You can use jQuery's mouseleave() function to hide your video when your mouse leaves the red box. I also used jQuery's hide() and show() methods instead of modifying the css of the videosList.

$(document).ready(function() {
    $(document).bind('mousemove', function(e){
      $('#tail').css({
         left:  e.pageX + 20,
         top:   e.pageY
      });
  });

  var figure = $(".video").hover( hoverVideo, hideVideo );

  function hoverVideo(e) {  
    $('video', this).get(0).play(); 
  }

  function hideVideo(e) {
    $('video', this).get(0).pause(); 
  }

  $( "#red" ).mouseover(function() {
    $("#videosList").show();
  });

  $('#red').mouseleave(function() {
    $('#videosList').hide();
  });
});

Upvotes: 1

Related Questions