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

Question

我有一张城市地图，点分散开来，它会在悬停点时显示视频，但我无法发现如何使它自动播放，然后在鼠标离开时停止播放。

这里是一个工作片段与例如：（这里的JSFiddle version）

$(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

您可以将?autoplay=1放到最后播放任何YouTube视频。例如。

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>