javascript - HTML, JS How to playstop video on hover - Stack Overflow

admin管理员组

文章数量:1432449

As you can see I have a question about playing/stoping video on hover. The user would hover the mouse on video and it would start playing and when he move the mouse away video would stop playing. Is it possible and how? I have video tag here

<video id="video" controls="" loop="" src="/wp-content/uploads/2016/06/vid/elipsiniai-treniruokliai.mp4" width="auto" height="auto" alt=""></video>

As you can see I have a question about playing/stoping video on hover. The user would hover the mouse on video and it would start playing and when he move the mouse away video would stop playing. Is it possible and how? I have video tag here

<video id="video" controls="" loop="" src="/wp-content/uploads/2016/06/vid/elipsiniai-treniruokliai.mp4" width="auto" height="auto" alt=""></video>

• javascript
• jquery
• html
• css
• video

Share Improve this question Follow asked Nov 19, 2017 at 20:43 Neimantas JociusNeimantas Jocius 10911 gold badge11 silver badge77 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Update

A fix is added for the error that was thrown in the console when hovering over the videos (tested in chrome)

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

adding muted="muted" attribute to the video tag fixes the problem. For details see this answer

---

Here you go

$(document).ready(function() {
  $(".myvideos").on("mouseover", function(event) {
    this.play();

  }).on('mouseout', function(event) {
    this.pause();

  });
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>

Try:

$("#video").hover(
    ()=>{ $(this).get(0).play(); },
    ()=>{ $(this).get(0).pause(); }
);

For this you have to use javascript. Easiest would be some kind of implementation with jQuery/javascript implementation.

You could also find this easily on the internet, this took me 3 seconds just by typing the "video on hover" in google: https://codepen.io/gil--/pen/bNxZWg

Html:

<div id="videosList">           
<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat./VerifiableTerrificHind.mp4" type="video/mp4">
    </video>
  </div>
</div>

You need to watch for hover event on video tag.

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

Now you add a function that plays video on hover:

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

And when user leaves the video you add another function:

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

To make a video play/pause on hover, try this:

JS:

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

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

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

CSS:

video::-webkit-media-controls {
    display:none !important;
}

本文标签： JavascriptHTMLJS How to playstop video on hoverStack Overflow