动态创建 Fancybox 并将视频粘贴到其中

Question

我需要将页面上的所有 HTML5 视频标签替换为附加了点击事件的海报图像；单击事件会启动包含该视频标签的 Fancybox。有人知道如何用 jQuery 做到这一点吗？谢谢。

Answer 1

我发现过去将 fancyBox 与对话视频结合使用的最佳方法是为您的 FLV 播放器创建一个空的 Flash 视频容器 div。然后，在加载 fancyBox 对话框时，您可以使用 fancyBox 上的“onStart”事件来定位容器 div，并用视频播放器内容填充它。然后，这会触发视频在您已经通过 fancyBox 显示的 div 容器中渲染。最后一部分是获取 fancyBox 正确的视频加载后尺寸，这取决于您的 FLV 播放器是否有要连接的事件以及 FLV 播放器是否能够为您提供电影尺寸。

有关此方法的完整教程，请参阅以下网址：

集成的 flowPlayer、fancyBox 和轮播教程。

有关实际演示，请参阅：

集成演示

Answer 2

也许更好的方法是使用一系列包含海报 img 的 div，然后将 onclick 事件附加到海报，以在框中呈现视频标签（或更改视频标签的源）。

Mobile Safari 允许点击事件触发视频播放，因此这也应该适用于 iPad。这也意味着用户无需单击海报图像两次即可播放视频（因为移动 Safari 不支持单击事件）。

Answer 3

找到了解决办法，调用$(window).load函数；该问题是为了解决 Safari 5/iPad 上的问题。我知道我们不应该使用特定于浏览器的东西，但这是解决这个特定问题的唯一方法:)

$(window).load(function () {
 if (jQuery.browser.safari) {
   var videoTag = "";
   var posterPath = "";
   var replacement = "";
   var boxId = "";
   var el = "";
   $("[id^='vid-']").each(function(){
     videoTag = "";
     posterPath = "";
     replacement = "";
     boxId = "";
     el = "";

     el = $('[id='+this.id+']');
     videoTag = el.parent().html();
     posterPath = el.parent().find("img").attr("src");
     boxId = this.id + "_manual";
     replacement = "<a title='' id='" + boxId + "' href='javascript:;'><img src='" +
       posterPath + "' style='float:left; padding-left:5px; '/></a>"
     el.parent().replaceWith(replacement);

     $("[id="+boxId+"]").fancybox( 
         {
           'content'   : videoTag,
           'autoDimensions' :true,
           'padding'   : 9,
           'showCloseButton' : true,
           'enableEscapeButton': true       
         }
     ); // end click function
   }); // end each function
 }  // end if
}  // end load function