IE7 및 IE8 용 jQuery와 함께 Facebox에 FLV로드

Question

Chrome, Firefox 및 Safari에서 완벽하게 작동합니다. IE (모든 버전) 문제입니다.

목표 : Facebox 팝업에서 S3의 FLV를로드하는 JWplayer를로드하려고합니다.

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로 잘못된 크기의 빈 div를 표시합니다 (매개 변수는 nav 및 scrubber를 표시하지 않도록 설정 됨). nav 및 srubber에는 아무 버튼도 없습니다. IE8은 올바른 크기를 나타내지 만 탐색 및 스크러버가 작동하지 않는 동일한 동작과 빈 화면을 보여줍니다.

내 생각 : 나는 문제가 적시에 호출되지 않는 자바 스크립트와 것을 생각하고
. 그것은 jwplayer없이 facebox를로드하고있는 것 같습니다. 적어도 나는 생각한다. 그러므로 nav가있는 이유. 나는 그것을 위해 자바 스크립트를 읽지 않았다고 생각.

Answer 1

. IE7이나 IE8에는 비디오가 표시되지 않고 계속 진행되지만 JWplayer는 적절하게로드됩니다.

HTML :

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

자바 스크립트 :

$(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)을 FlashVars가 & A에 의해 분리 된 구성 옵션의 연결된 문자열입니다 addParam ('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'); 

당신이 어떤 추가 정보가 필요한 경우,에 대한 훌륭한 입문서가있다 JW 플레이어 사이트의및 즉시 사용할 수있는 SWFObject 코드를 제공하는 setup wizard이 있습니다.

두 번째 문제 : 자동 시작 WHILE 디스플레이 : 없음

이는 IE 빠르다. 대부분의 브라우저에서 display : none을 설정하면 Flash가 종료됩니다. IE에서는 그렇지 않습니다. 이를 방지하기 위해, 내가 좋겠, 당신은 당신이 디스플레이 CSS 속성을 설정 JS의 비트를 사용하는 경우

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

을 설정해야합니다 당신은 플레이어가 나타날 때 재생을 시작하는 플레이어를 싶습니다 it's API을 통해 플레이어를 시작하고 중지하도록 JS를 수정하는 것이 좋습니다. 틀림없이 이것이 좀 더 복잡하지만, 모든 것이 브라우저 간 원활한 작동을 가능하게합니다.이 코드가 성공적으로 인스턴스화 자바 스크립트 facebox 후 JWplayer를로드

최저

,

자크

개발자, 롱테일 비디오