無法訪問VideoJS閃存對象

Question

我正在使用VideoJS進行無線電直播。我試圖使用VideoJS沒有實際的video.js JavaScript文件 - 我只使用Flash部分 - video-js.swf文件。

這裏是我的index.html（這是手工編寫代碼）：

<object id="radio" type="application/x-shockwave-flash" data="/video-js.swf" width="0" height="0"> 
    <param name="allowNetworking" value="all"> 
    <param name="allowScriptAccess" value="always"> 
    <param name="flashvars" value="autoplay=false&amp;preload=false&amp;loop=false&amp;muted=false&amp;rtmpConnection=rtmp://192.168.1.6/air/&amp;rtmpStream=stream"> 
    <param name="movie" value="/video-js.swf"> 
    <param name="wmode" value="opaque"> 
</object> 

這是我的RTMP服務器：

rtmp://192.168.1.6/air/stream 

在這裏一切都很好 - 如果我寫

autoplay=true 

我的網頁開始播放音樂...只在Chrome中！

如果我試圖訪問Flash對象的JavaScript（文檔加載後，當然）：

setTimeout(function() { 
    document.getElementById('radio').vjs_pause(); 
}, 5000); 

或

setTimeout(function() { 
    document.getElementById('radio').vjs_setProperty('volume', 0.25); 
}, 5000); 

或

any other ExternalInterface's methods from video-js.swf file 

它也可以.. 。只在Chrome中。

在FF，在IE，在Opera，所有最新的，我總是得到這樣的錯誤：

document.getElementById('radio').vjs_play is not a function 
document.getElementById('radio').vjs_pause is not a function 
document.getElementById('radio').vjs_setProperty is not a function 

那麼，什麼可能是錯的我簡單的代碼？我如何訪問Flash對象的方法，就像現在在Chrome中一樣？

的jsfiddle：

/* 
 
    obviously, here in jsFiddle there will be an error in code below, because video-js.swf cannot load anything from rtmp://192.168.1.6/air — but on my local computer all this code works like a charm in Chrome, not in FF/IE/Opera 
 
*/ 
 

 
setTimeout(function() { 
 
    document.getElementById('radio').vjs_play(); 
 
}, 5000);

<object id="radio" type="application/x-shockwave-flash" data="/video-js.swf" width="0" height="0"> 
 
    <param name="allowNetworking" value="all"> 
 
    <param name="allowScriptAccess" value="always"> 
 
    <param name="flashvars" value="autoplay=false&amp;preload=auto&amp;loop=false&amp;muted=false&amp;rtmpConnection=rtmp://192.168.1.6/air/&amp;rtmpStream=stream"> 
 
    <param name="movie" value="/video-js.swf"> 
 
    <param name="wmode" value="opaque"> 
 
</object>

Answer 1

的事情是 - 你應該始終設置對象標籤寬度和高度：

<object ... width="100%" height="100%">...</object> 

但是，如果你把這個對象上面一些DIV，這沒有尺寸：

<div> 
    <object ... width="100%" height="100%">...</object> 
</div> 

您的Fl灰對象將無法工作...因爲它的大小變成了0x0像素。

（好吧，它只能在Google Chrome瀏覽器中使用）。

我採用了棱角分明的NG-transclude指令與DIV塊：

<div ng-transclude></div> 

transcluding後，我的HTML是：

<div ng-transclude=""> 
    <object ... width="100%" height="100%">...</object> 
</div> 

，當然它的大小是爲0x0像素和Flash沒有工作。

然後，我設置的1x1大小，一切都開始按預期方式工作：

<div ng-transclude=""> 
    <object ... width="1" height="1">...</object> 
</div> 

我花的時間量巨大，之前來到洞察力:)

Answer 2

SWF文件並不意味着要在它自己的使用，所以我不會推薦它。

但是，如果你選擇仍然走這條路線，你可以看看Flash技術如何使用瑞士法郎。具體來說，它是provides a ready function的swf在API方法可用時調用。

雖然這並不總是穩定，所以還有一個checkReady event。

Answer 3

而且，我不知道它是如何可能的，但如果你使用Grunt的connect-livereload它會破壞你的Flash對象，因爲livereload正在修改你的DOM。

所以，我只是從連接任務的中間件數組中刪除lrSnippet：

var LIVERELOAD_PORT = 35729; 

var lrSnippet = require('connect-livereload')({ 
    'port': LIVERELOAD_PORT 
}); 

// and then in config: 

connect: { 
    localhost: { 
     options: { 
      base: { 
       path: 'app/assets', 
       options: { 
        index: 'application.html' 
       } 
      }, 
      middleware: function(connect) { 
       return [ 
        lrSnippet, // remove it (well, if you are using Chrome, do not remove livereload, it will work fine in Chrome) 

        mountFolder(connect, 'tmp'), 
        mountFolder(connect, 'app/assets') 
       ] 
      } 
     } 
    } 
}