Загрузка FLV в лицевой коробке с jQuery для IE7 и IE8

Question

Это почти не говорит, это отлично работает в Chrome, Firefox и Safari. IE (любая версия), являющаяся проблемой.

Цель: Я пытаюсь загрузить JWPlayer, который загружает FLV из S3 в всплывающем окне лица.

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox() 
})

HTML (HAML):

%li#videoGirl
  = link_to 'What is HQchannel?', '#player', :rel => 'facebox'

.grid_8.omega.alpha#player{:style => 'display: none;'}
  :javascript
    var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0');
    so.addParam('allowscriptaccess','always');
    so.addParam('allowfullscreen','true');
    so.addParam('wmode','transparent');
    so.addVariable('file', 'http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv&autostart=true&controlbar=none&repeat=always&image=/flash/video_girl/whatishqchannel.jpg&icons=false&screencolor=none&backcolor=FFFFFF&screenalpha=0&overstretch');
    so.addVariable('overstretch', 'true')
    so.write('player');

Проблема:

1. Несмотря на установку видео на дисплее: нет; Это начинает играть в любом случае.
2. При нажатии на активацию Div, IE7 всплывает пустой размер неверного размера с NAV (параметры, не отображают NAV и Scrubber), и без кнопок на NAV и SRUBBER работают. IE8 показывает правильный размер, но одинаковое поведение с NAV и Scrubber, не работает, а пустой экран.

Мое предположение:
Я думаю, что проблема с JavaScript не вызывается в нужное время. Кажется, он загружает лицевую коробку без Jwplayer. По крайней мере, я предполагаю. Отсюда причина, почему навигация там. Я думаю, что это не прочитало JavaScript для этого.

Answer 1

Этот код успешно загрузит JWPlayer после создания JavaScript Facebox. Есть еще что-то закрученное, происходящее с видео, не отображающим в IE7 или IE8, но Jwplayer загружается соответствующим образом.

HTML:

<a class="flash" href="http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv" rel="/flash/video_girl/whatishqchannel.jpg">Flash</a>

JavaScript:

$(document).ready(function(){
 // click on flash video link
 $('.flash').click(function(){
  $.facebox('<div id="fbvideo"></div>');
  var so = new SWFObject('/flash/playerTrans.swf','fbvideo','640px','360px','0');
  so.addParam('allowscriptaccess','always');
  so.addParam('allowfullscreen','true');
  so.addParam('wmode','transparent');
  so.addVariable('file', $(this).attr('href'));
  so.addVariable('autostart','true');
  so.addVariable('controlbar','none');
  so.addVariable('repeat','always');
  so.addVariable('image',$(this).attr('rel'));
  so.addVariable('icons','false')
  so.addVariable('screencolor','none');
  so.addVariable('backcolor','FFFFFF');
  so.addVariable('screenalpha','0');
  so.addVariable('overstretch', 'true');
  so.write('fbvideo');
  return false;
 })
})

Answer 2

Здесь есть пара вопросов.

Первый вопрос: swfobject

Я думаю, что вы видите нежелательное / непредсказуемое поведение, потому что ваш синтаксис SwFObject немного выключен. С SwFObject, вы можете либо:

1.) Используйте AddParam («Flashvars», Flashvars), где Flashvars представляет собой объединенную строку параметров конфигурации, разделенные &, то есть

var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('wmode','transparent');
so.addParam('flashvars', 'file=http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv&autostart=true&controlbar=none&repeat=always&image=/flash/video_girl/whatishqchannel.jpg&icons=false&screencolor=none&backcolor=FFFFFF&screenalpha=0&overstretch=true');
so.write('player');

ИЛИ

2.) Используйте кучу приложенных операторов, то есть

var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('wmode','transparent');
so.addVariable('file', 'http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv');
so.addVariable('autostart', 'true');
so.addVariable('controlbar', 'none');
so.addVariable('repeat', 'always');
so.addVariable('image', '/flash/video_girl/whatishqchannel.jpg');
so.addVariable('icons', 'false');
so.addVariable('screencolor', 'none');
so.addVariable('backcolor', 'FFFFFF');
so.addVariable('screenalpha', '0');
so.addVariable('overstretch', 'true');
so.write('player');

Если вам нужна дополнительная информация, есть отличный учебник на Встраивание вспышки на сайте игрока JW и Мастер установки Это обеспечит готовый к использованию SWFObject Code.

Вторая проблема: автозапуск во время отображения: нет

Это быстрое. В большинстве браузеров Flash погибается при установке дисплея: нет. Это не так в IE. Чтобы предотвратить это, вам нужно будет установить

so.addVariable('autostart', 'false');

Если вы используете немного JS, чтобы установить свойство Display CSS, и вы хотите, чтобы игрок начать воспроизведение, когда появится проигрыватель, я бы предложил вам изменять ваши JS для начала и остановки проигрывателя через Это API. Отказ По общему признанию, это немного сложнее, но все это часть заставляют вещи работать беспрепятственно, кросс-браузер.

Лучший,

Zach.

Разработчик, Longtail Video