jquery - 悬停时自动播放/暂停视频

Question

我有一张散布点的城市地图，当悬停点时会显示视频，但我不知道如何让它自动播放，然后在鼠标离开时停止。

这是示例的工作片段：（这是JSFiddle 版本）

$(document).ready(function() {
  $('#video1').css("display", "none"); //Hide video initially
  $('#video-wrapper1').mouseenter(function() {
    $('#video1').css("display", "block", "position", "absolute",
      "top", "100px"); //Show video on hover
  });
  $('#video-wrapper1').mouseleave(function() {
    $('#video1').css("display", "none");
  });

$("#video1").mouseenter(function(){
$(this).attr("src",$(this).attr("src") + "?autoplay=1");
});

$("#video1").mouseleave(function(){
var src= $(this).attr("src");
var arr_str = src.split("?");
$(this).attr("src",arr_str[0]);
});    

});

.bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  img.bg {
    left: 50%;
    margin-left: -512px;
  }
}
#video-wrapper1 {
  position: absolute;
  left: 700px;
  top: 100px;
  display: block;
  width: 15px;
  height: 15px;
  z-index: 99999;
  background: #0073ff;
  border-radius: 50%;
  transition-property: width, height;
  transition-duration: .2s;
  transition-timing-function: linear;
}
#video-wrapper1:hover {
  width: 20px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://s32.postimg.org/t78dw1h1h/Fundo.png" class="bg" alt="Lisboa">
<a href="index.html">
  <img src="http://s32.postimg.org/bdlm2uvt1/Logo.png" alt="" />
</a>
<div id="video-wrapper1">
  <iframe id="video1" width="200" height="169" src="https://www.youtube.com/embed/Inufy4FdnRk" frameborder="0" allowfullscreen>
  </iframe>
</div>

抱歉，蓝点没有到位，我需要找到一种方法让它保持正确的坐标。

Answer 1

您可以通过放在最后播放任何 youtube 视频?autoplay=1。例如。

https://www.youtube.com/embed/Inufy4FdnRk?autoplay=1

这将自动播放您的视频。

$("#video1").mouseenter(function(){
  
  $(this).attr("src",$(this).attr("src") + "?autoplay=1");
});

$("#video1").mouseleave(function(){
  var src= $(this).attr("src");
  var arr_str = src.split("?");
  $(this).attr("src",arr_str[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<iframe id="video1" width="200" height="169" src="https://www.youtube.com/embed/Inufy4FdnRk" frameborder="0" allowfullscreen>
  </iframe>