Question

希望有人可以提供帮助。

我正在尝试创建一个页面，其中有3个静止图像缩略图形成视频。当您单击图像链接时，视频应加载到缩略图上方的大div中。

我暂时将实际视频加载到大型div中，此时它会在新标签页中打开（以youtube视频为例）。

有人可以建议一种创建方法吗？

代码示例：

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>

Answer 1

这将是视频案例：

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

Answer 2

我认为你需要的是这样的：

<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>

http://www.w3schools.com/html/html_youtube.asp

您还可以查看HTML5引入的<video>标记。

http://www.w3schools.com/html/html5_video.asp

单击图像链接时将视频加载到div中

2 个答案: