Question

我需要将页面上的所有HTML5视频标记替换为附加了点击事件的海报图片; click事件启动包含该视频标记的Fancybox。任何人都知道如何使用jQuery做到这一点？谢谢。

Answer 1

我发现在过去使用fancyBox和对话框视频的最佳方法是为FLV播放器创建一个空的flash视频容器div。然后在加载fancyBox对话框时，使用on fancyBox'onStart'事件来定位容器div，用视频播放器内容填充它。然后，这会触发视频在您已经通过fancyBox显示的div容器中呈现。最后一部分是获得fancyBox正确的后期视频加载的尺寸，这取决于你的FLV播放器有一个事件可以挂钩，FLV播放器能够为你提供电影尺寸。

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

integrated flowPlayer, fancyBox and carousel tutorial.

为了证明这一点，请参阅：

integration demonstration

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

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

3 个答案: