单击图像链接时将视频加载到div中
单击图像链接时将视频加载到div中
提问于 2013-05-17 19:29:54
希望有人能帮上忙。
我正在尝试创建一个页面，在那里你有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>回答 2
Stack Overflow用户
发布于 2013-05-17 19:57:35
这将是视频案例：
<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"));
});Stack Overflow用户
发布于 2013-05-17 19:34:03
我认为你这里需要的东西是这样的：
<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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16607893
复制相关文章
相似问题
腾讯云开发者
