我在这个例子中有一个问题:
http://modstudio.eu/facebook/hq/vid.php#
单击相应的缩略图时,如何处理要显示的多组视频?并停止播放所有其他视频?
这是用于处理多个视频的https://modstudio.eu/facebook/hq/live2.php网站。这可能有助于解释我要完成的工作。
我认为这与<div class="vidContainer" id="vidContainer">
有关
我尝试将section ='A',section ='B'等添加到DIV vidContainers中,因此脚本对应于哪个脚本,但是我不太确定如何更改javascript以将视频更改为仅该特定容器。
有什么想法吗?
最佳答案
可能就是您需要的:http://jsfiddle.net/FCa7k/10/。
这是HTML,CSS和JS
img{
cursor : pointer;
}
ul li{
float : left;
list-style: none;
}
<ul id="container">
<li><img src="http://i2.ytimg.com/vi/mIMFL9wRaJE/default.jpg" data-id="mIMFL9wRaJE" class=""></li>
<li><img src="http://i1.ytimg.com/vi/HRtX_GhLNrU/default.jpg" data-id="HRtX_GhLNrU"></li>
<li><img src="http://i2.ytimg.com/vi/YH72FLaJe5Y/default.jpg" data-id="YH72FLaJe5Y"></li>
</ul>
<div id="video"></div>
<script>
$(function(){
$("li img").live('click', function(){
//alert( $(this).data('id') );
var id = $(this).data('id');
//alert(id);
var str = '<iframe width="200" height="200" src="http://www.youtube.com/embed/'+id+'?wmode=Opaque" frameborder="0" allowfullscreen></iframe>';
//alert(str);
$("#video").html(str);
});
});
</script>
关于jquery - 显示具有显示/隐藏DIV层的多个YouTube视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17083263/