2013-04-11 50 views
0

我很難搞清楚如何讓這個(功能)客戶端js代碼在流星中工作(視頻變量在模板事件期間在屏幕上的輸入元素。)流星 - swfobject.js + YouTube的API

<script type="text/javascript" src="swfobject/swfobject.js"></script>  
    <div id="ytapiplayer"> 
     You need Flash player 8+ and JavaScript enabled to view this video. 
</div> 
<script type="text/javascript"> 
    theVideo = 'tAbCgr6jJ_0'; 

    if(theVideo != 'null'){ 
     var params = { allowScriptAccess: "always" }; 
     var atts = { id: "myytplayer" }; 
     swfobject.embedSWF("http://www.youtube.com/v/"+theVideo+"?enablejsapi=1&playerapiid=ytplayer&version=3", 
     "ytapiplayer", "325", "256", "8", null, null, params, atts); 
    } 

    function onYouTubePlayerReady(playerId) { 
     ytplayer = document.getElementById("myytplayer"); 
     ytplayer.playVideo(); 
    } 
</script> 

試圖加載由DOM注射(這個HTML/JavaScript的)不工作的腳本,該腳本的SWFObject似乎並沒有從本地和遠程主機的負荷。

添加腳本(swfobject.js)到我的項目根(排行榜例如)導致「的ReferenceError:未定義窗口」時,應用程序被啓動(終端輸出的內部)。

此代碼可在正常HTML頁面內正常工作,以加載腳本。

我在一個古老的(2009)回購中找到了一個library,它在啓動時沒有崩潰,但是'swfobject'沒有找到彈出的錯誤。

解決方法的任何想法?將這段代碼放入模板事件中也不起作用;加載swfobject似乎總是這個問題。

回答

0

通過將swfobject.js放置在根目錄中,它也在服務器上得到解析,並且沒有window,所以這就是返回錯誤的原因。

如果你把它移動到/client/lib(也代碼否則也不會被作用域到瀏覽器窗口的註釋下的第一行中刪除第一var

然後,你就不必引用文件手動你可以有一些HTML這樣的:

<template name="video"> 
    <div id="ytapiplayer"> 
    You need Flash player 8+ and JavaScript enabled to view this video. 
    </div> 
</template> 

有的(客戶端)JS:

Template.video.rendered = function() { 
    played = false; //prevent double plays on multiple renders 
    theVideo = 'tAbCgr6jJ_0'; 
    if(theVideo != 'null' && !played){ 
     played = true 
     var params = { allowScriptAccess: "always" }; 
     var atts = { id: "myytplayer" }; 
     swfobject.embedSWF("http://www.youtube.com/v/"+theVideo+"?enablejsapi=1&playerapiid=ytplayer&version=3", 
    "ytapiplayer", "325", "256", "8", null, null, params, atts); 

} 

onYouTubePlayerReady = function (playerId) { 
    var ytplayer = document.getElementById("myytplayer"); 
    ytplayer.playVideo(); 
} 

我reformatte d onYouTubePlayerReady,以便它可以在全球範圍內訪問。我認爲這是由腳本自動運行?我在代碼中沒有看到它的引用。

+0

看起來像它應該工作迷迷糊糊.. onYouTubePlayerReady功能是從谷歌的YouTube API參考一些鍋爐板代碼。我並不完全確定它在哪裏被調用;但我猜它是在HTML5對象獲取視頻並加載後調用的。 – redcap3000 2013-04-12 17:30:39

+0

試過了。我能夠獲取swf對象,但onYouTubePlayerReady函數永遠不會執行,也不能通過dom獲取對象(如api說明)。試圖把它放在swfobject的回調函數..沒有運氣.. – redcap3000 2013-04-13 22:14:08

0

這已經有一段時間,因爲這個問題被問,但我敢肯定其他人跟我一樣會碰到這個問題絆倒。這些只是我的筆記。

我的swfobject在我的項目中工作的方式(支持剪貼板副本)是直接在HTML鐵路由器模板中添加<script>代碼。

<template name="writeApp"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> ...

在我的.js的代碼,我用我的template.rendered函數來設置一個全局會話變量稱爲hasFlash:

Template.writeApp.rendered = function() { Session.set('hasFlash', (swfobject.hasFlashPlayerVersion('1') && true)); }

每次頁面呈現,現在我可以看到如果用戶現在有Flash。在需要顯示的頁面「錯誤:不閃」的消息,我有一個輔助功能:

Template.writeApp.helpers({ hasFlash: function() { return Session.get('hasFlash'); } });

在HTML

,我可以使用hasFlash輔助函數來顯示正確的訊息:

{{#if hasFlash}}Copy to Clipboard {{else}} Needs Flash to Copy {{/if}}

希望這有助於人誰碰到這個問題