Как заставить Flowplayer работать в Fancybox - PullRequest
Новая
       26

Как заставить Flowplayer работать в Fancybox

0 голосов
/ 24 ноября 2010

У меня есть ряд ссылок, и я настроил оба Flowplayer (http://flowplayer.org) и Fancybox (http://fancybox.net/):

<a class="fancybox" href="../public/video1.flv">Click here</a>
<a class="fancybox" href="../public/video2.flv">Click here</a>
<a class="fancybox" href="../public/video3.flv">Click here</a>
...

). Я хочу открыть эти видео в Fancybox (последняя версия,1.3 - я читаю учебники для 1.2, которые не подходят для моего случая), по одному я поражаюсь, насколько просто это делается с помощью JWPlayer: 

<a class="fancybox" href="../jwplayer/player.swf?file=../public/video1.flv">Click here</a>
<a class="fancybox" href="../jwplayer/player.swf?file=../public/video2.flv">Click here</a>
<a class="fancybox" href="../jwplayer/player.swf?file=../public/video3.flv">Click here</a>
...
$('a.fancybox').fancybox({
    'titleShow': false,
    'type': 'swf',
    'width': 480,
    'height': 385,
});

С Flowplayer, это очень простая вещьпохоже на ад

Я пытался: 

<a class="fancybox" href="../flowplayer/flowplayer-3.2.5.swf?&amp;config={'clip':'../public/video1.flv'}">Click here</a>
<a class="fancybox" href="../flowplayer/flowplayer-3.2.5.swf?&amp;config={'clip':'../public/video2.flv'}">Click here</a>
<a class="fancybox" href="../flowplayer/flowplayer-3.2.5.swf?&amp;config={'clip':'../public/video3.flv'}">Click here</a>

И, кроме отсутствия панели управления, я получаю щелчок "ошибка 301" (возможно, потому что он ищет панель управления .swf, но этоне загружается) Поиск функции «вставлять параметры как строку запроса» в онлайн-документацию является кошмаром (и на самом деле я нашел этот подход на других сайтах), поэтому я не могу проверить, прав я или нет, и что яможно сделать, чтобы избежать ошибки 301

РЕДАКТИРОВАТЬ: я решил ошибку 301, оригинальный файл "flowplayer.controls-3.2.3.swf" должен быть переименован в "flowplayer.controls.swf" (это написано нигде, вы должны угадать это); в любом случае, это не очень помогаетпоскольку в IE7 / 8 он плохо падает - консоль JavaScript мерцает и говорит, что «null» является нулем или не является объектом »

Я также пробовал решение jjames, опубликованное здесь: http://flowplayer.org/forum/2/17398 Ноэто не работает для меня: Firefox аварийно завершает работу, и в IE Fancybox сообщает мне, что ресурс не должен быть расположен. И, в любом случае, кажется, что это wotk для одного файла, в то время как мне нужна общая функция, которая получает ссылкикак параметр ... Значит, для меня это не имеет смысла ... 

$(".fancybox").fancybox({
    'callbackOnShow': function() { // callbackOnShow doesn't exists anymore on Fancybox 1.3; seems replaced by onComplete, but no luck
        flowplayer("fancy_div", "../flowplayer/flowplayer-3.2.5.swf", {
          clip: {
            baseUrl: 'http://www.myPathToVids',
            url: 'myVideo.flv' // I have not a single video! This should be a parameter taken from href of the clicked link
          }     
        }); 
    }
})

Пожалуйста, помогите?Заранее спасибо, я злюсь ...

1 Ответ

3 голосов
/ 02 июля 2011

Попробуйте вручную запустить fancybox и установить его содержимое в flowplayer. Например, по ссылке: 

<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" 
    class="videoLink">Demo</a>

создайте функцию щелчка JQuery следующим образом: 

$('a.videoLink').click(function(e) {
    e.preventDefault();

    var container = $('<div/>');

    container.flowplayer(
        'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
        $(this).attr('href')
    );

    $.fancybox({
        content: container,
        width: 300, height: 200,
        scrolling: 'no',
        autoDimensions: false
    });
});

Обратите внимание, что flowplayer по умолчанию принимает размер своего контейнера, поэтому для правильного просмотра необходимо указать конечные размеры.

...