javascript - 在悬停图像上它应该播放视频

Question

我需要一些帮助.. 我已经将视频链接到我的图像，所以如果有人点击我的图像，就会弹出一个视频，但我希望视频应该在有人将鼠标悬停在图像上时立即播放。 场景:一行中有 4 张图像(250*250 像素大小)，如果有人将第一张图像或任何图像悬停，则视频应以相同大小的图像(250*250)播放，如果他们将鼠标移动到另一张图像视频应该停止并且该特定图像的视频应该开始播放

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

添加 iframe在每张图片后加上 display:none .更改为 display:block对于 onMouseOver , 和 onMouseOut它应该更改为 display:none .为 onMouseOver 创建函数和 onMouseOut in your js`.

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

    <iframe id="youtube" width="100%" height="500px" style="display:none;">
    </iframe>
</div>

在你的 js 中:

//add onHover function.
function showVideoOnHover(obj)
{
    $("#image").css("display","none");
    $("#youtube").css("display","block");
    $("#youtube").attr("src", $(obj).data("src"));
}
function hideVideo()
{
    $("#youtube").css("display","none");
    $("#image").css("display","block");
}