Динамически создавайте Fancybox и вставляйте в него видео

Question

Мне нужно заменить все теги видео HTML5 на странице их постером с прикрепленным событием кликасобытие click запускает Fancybox, содержащий этот тег видео.Кто-нибудь знает, как это сделать с помощью jQuery?Спасибо.

Answer 1

Возможно, лучшим способом было бы иметь серию div, в которых содержится эмблема poster, а затем прикрепить событие onclick к постеру, который отображает тег видео (или изменяет источник тега видео) в поле.1002 * Mobile Safari позволяет щелкать события для запуска воспроизведения видео, поэтому это также должно работать на iPad.Это также означает, что пользователям не нужно будет дважды щелкать изображение плаката для воспроизведения видео (так как мобильный Safari не поддерживает событие нажатия).

Answer 2

Я обнаружил, что в прошлом лучший способ использования fancyBox с диалоговыми видео - это создание пустого контейнера flash-видео для вашего проигрывателя FLV. Затем, при загрузке диалогового окна fancyBox, вы используете событие onStart для on fancyBox, чтобы указать на div контейнера, заполнить его содержимым видеоплеера. Затем запускается рендеринг видео в контейнере div, который вы уже показываете через fancyBox. Последняя часть - получение размеров корректной загрузки видео fancyBox, это зависит от того, есть ли у вашего FLV-плеера событие, к которому нужно подключиться, и от того, что FLV-плеер может предоставить вам размеры фильма.

Полный учебник по этому подходу приведен по следующему адресу:

Интегрированный учебник по FlowPlayer, fancyBox и carousel.

И для демонстрации этого в действии см .:

демонстрация интеграции

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