Загрузка FLV в Facebox с jQuery для IE7 и IE8

Question

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

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

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 выдает неправильный размер пустой div с навигацией (параметры установлены, чтобы не показывать навигацию и скруббер), и никакие кнопки на nav и srubber не работают. IE8 показывает нужный размер, но такое же поведение с навигацией и скруббером не работает, а пустой экран.

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

Answer 1

Этот код будет успешно загрузить JWplayer после facebox Javascript конкретизируется. В 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.) Используйте кучу заявлений addVariable, т.е.

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'); 

Если вам нужна дополнительная информация, есть отличный учебник по Embedding Flash на сайте JW Player и setup wizard, который предоставит готовый к использованию код SWFObject.

ВТОРОЙ ВОПРОС: AUTOSTART ПОКА дисплей: нет

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

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

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

Бест,

Zach

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