0

Strelok 有正确的答案；但是，在第一次单击时没有任何反应（直到第二次单击）。在此之后，视频将无法加载，我无法关闭灯箱。

任何人都可以帮助进一步调整它吗？

这是我的 HTML：

<ul>
        <li><a href="#">album name</a></li>
        <li><a href="http://vimeo.com/13844810" class="lightbox_trigger" data-videoId="13844810">"Winter"</a></li>
        <li><a href="#">album name</a></li>
       <li><a href="#">video name</a></li>
</ul>

这是我的jQuery：

 $('.lightbox_trigger').click(function (e) {
       e.preventDefault();

       var videoId = $(this).data("videoId");

       if ($('#lightbox').length > 0) {
            $('#content').html('<iframe src="http://player.vimeo.com/video/'+videoId+'" width="640" height="480" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
            $('#lightbox').show();
        } else {

            var lightbox =
                '<div id="lightbox">' +
                '<p>Click to close</p>' +
                '<div id="content">' +
               '<iframe src="http://player.vimeo.com/video/'+
                videoId +
            '" width="320" height="240" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' +
            '</div>' +
            '</div>';

            $('body').append(lightbox);
        }
     });

    $('#lightbox').on('click', function () {
        $(this).hide();
   });
4

1 回答 1

1

您当然可以使用支持视频的现有灯箱插件。但是作为编码练习，您可以看看我如何修改您的灯箱以在嵌入式播放器中播放 vimeo 视频：

http://jsfiddle.net/rQqVj/2/

  1. 它使用data-videoId属性来指定要播放的 vimeo 视频的视频 ID。
  2. 它使用来自Vimeo开发者页面上 Player Embedding的通用播放器。
于 2013-08-27T01:59:25.583 回答