点击图片链接时将视频加载到div

问题描述：

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

你检查javascript代码？我认为它应该是：'$（“。video-1，.video-2，.video-3”）。click（function（）{' – mario595

Awgh在这里输入时出错，很抱歉！在我的文件:)似乎只加载不在我的main_video类div！试了一个本地文件，它打开在一个巨大的屏幕，而不是内部的div：/ – user2212564

_“这是一个错误，而在这里输入它，对不起！”_我虽然:)。我想我不能在这里很有帮助...我会尝试设置一个jsfiddle，以便轻松找出问题对其他用户的问题。 – mario595

答

我想你所需要的就是这样的：

<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

当每个图像链接被点击时，它更改主视频中的视频，而不是嵌入，我认为它与jQuery功能有关？虽然谢谢！ – user2212564

答

这将是视频案例：

<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时，它会在fulls creen模式而不是在div内打开。我将更新我的代码，因为我已经使用本地文件的示例。 – user2212564

Np。尝试使用Youtube中“嵌入”部分的网址。这是它的一个工作版本http://jsfiddle.net/6kL4K/。 – JMParsons

您的代码段可以正常工作，但是当应用于我的文件时，它仍会播放全屏！更改了浏览器，甚至从代码片段中复制了精确的代码。我禁用了我的css文件，因此无视任何内容，这太奇怪了！ – user2212564

点击图片链接时将视频加载到div

相关推荐