自定义滑块具有灯箱播放效果

时间:2014-10-16 20:14:37

标签: javascript jquery

我用它作为我的第一个视频,它运行正常。但是当我尝试使用其他呼叫复制相同的编码时,它无法正常工作。我基本上是在两张不同的幻灯片上播放两个视频,但第二张幻灯片在第一张幻灯片上播放。如何复制这个以分离视频? 点击链接查看我的意思。http://jsfiddle.net/4fkf34rq/

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a></p>
<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;
 top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
    <iframe width="500" height="315" 
     src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" 
      allowfullscreen></iframe>
    <br />
    <br />
    <a href="javascript:;" onClick="toggleVideo('hide');">close</a>
</div>

function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}

0 个答案:

没有答案