1

希望有人可以提供帮助。

我正在尝试创建一个页面，您可以在其中有 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>
4

2 回答 2

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"));
});
于 2013-05-17T11:57:35.267 回答
0

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

<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

你也可以看看<video>HTML5 引入的标签。

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

于 2013-05-17T11:34:02.690 回答