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");
}

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

1 个答案: