单击图像链接时将视频加载到div中 [英] load a video into a div when clicking a image link

问题描述

希望有人可以提供帮助.

hope someone can help.

我正在尝试创建一个页面，在该页面中您将有3张静态图片的缩略图形成视频.单击图像链接时，视频应加载到缩略图上方的大div中.

I am trying to create a page where you have 3 thumbnail images of stills form a video. When you click on the image link, a video should load into a large div above the thumbnails.

我一直坚持将实际视频加载到大div中，但现在它在新标签页中打开(以youtube视频为例).

I am stuck on loading the actual video into the large div, at the moment it opens in a new tab (using a youtube video as an example).

任何人都可以建议一种创建此方法的方法吗?

Can anyone suggest a method of creating this?

代码示例:

jQuery:

 $(".video-1, .video-2, .video-3").on("click", function(event) {
          event.preventDefault();
          $(".video_main iframe").prop("src", $(event.currentTarget).attr("href"));
        });

html

<div class="video_main">
 <iframe width="100%" height="100%" src="video/video-1.mp4" frameborder="0" allowfullscreen></iframe>
</div>

<div class="video_wrapper">
    <ul>
        <li class="video_thumbnail"><a href="video/video-1.mp4" class="video-1" title=""><img src="images/videoPlayer-thumbnail-1.jpg" alt=""/></a></li>
        <li class="video_thumbnail"><a href="video/video-2.mp4" class="video-2" title=""><img src="images/videoPlayer-thumbnail-2.jpg" alt=""/></a></li>
        <li class="video_thumbnail"><a href="video/video-3.mp4" class="video-3" title=""><img src="images/videoPlayer-thumbnail-3.jpg" alt=""/></a></li>
    </ul>
</div>

推荐答案

这将是视频案例:

<div class="video_case">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/WY32nnKrB70" frameborder="0" allowfullscreen></iframe>
</div>

缩略图:

<div class="video_wrapper">
    <ul>
        <li class="video_thumbnail"><a href="http://www.youtube.com/embed/WY32nnKrB70" class="video-1" title=""><img src="images/videoPlayer-thumbnail-1.jpg" alt=""/></a></li>
        <li class="video_thumbnail"><a href="http://www.youtube.com/embed/oHg5SJYRHA0" class="video-2" title=""><img src="images/videoPlayer-thumbnail-2.jpg" alt=""/></a></li>
        <li class="video_thumbnail"><a href="http://www.youtube.com/embed/oHg5SJYRHA0" class="video-3" title=""><img src="images/videoPlayer-thumbnail-3.jpg" alt=""/></a></li>
    </ul>
</div>

还有您的js:

$(".video-1, .video-2, .video-3").on("click", function(event) {
  event.preventDefault();
  $(".video_case iframe").prop("src", $(event.currentTarget).attr("href"));
});

这篇关于单击图像链接时将视频加载到div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！