javascript - 视频在图像悬停时播放

Question

我试图在有人将鼠标悬停在图像上时播放视频，如果他们点击它，应该会显示一个弹出窗口，播放该视频到目前为止，我已经实现了弹出并显示视频onclick，但我想实现这个悬停的事情

HTML

<div class="row">
    <div class="col-md-3">
        <img src="resources/image.jpg"  data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
    </div>
    <div class="col-md-3">
        <img src="resources/image.jpg"  data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
    </div>
    <div class="col-md-3">
    <   img src="resources/image.jpg"  data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
    </div>
</div>

JS

function showVideo(obj){
    $("#youtube").attr("src", $(obj).data("src"));
    $("#videoModal").on("hide.bs.modal", function () { 
        $("#youtube").removeAttr("src");
    }).modal('show');
}

更多 HTML

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="videoModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       <iframe id="youtube" width="100%" height="500px">
</iframe>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用jquery的hover函数和您自己的函数来播放视频:

$('#element').hover(function() {
    showVideo();
});