的jsfiddle：

Question

我正在使用VideoJS制作广播直播。我试图在没有实际video.js javascript文件的情况下使用VideoJS - 我只使用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！

如果我尝试使用Javascript访问Flash对象（当然，在加载文档之后）：

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：

＆＃13;

/*
    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);

＆＃13;

<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>

＆＃13;

Answer 1

问题是 - 您应该始终将对象标记设置为宽度和高度：

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

但是，如果你把这个对象放在一些没有大小的 div 中：

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

你的Flash对象无效......因为它的大小变成了0x0像素。

（嗯，它只适用于Google Chrome等优质浏览器。）

我正在使用带有 div 块的Angular＆n; ng-transclude指令：

<div ng-transclude></div>

转录后，我的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

瑞士法郎不打算单独使用它，所以我不推荐它。

但是如果你选择继续这条路线，你可以看一下Flash技术如何使用swf。具体来说，当API方法可用时，swf会调用provides a ready function。

虽然这并不总是稳定的，但也有一个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')
                ]
            }
        }
    }
}

无法访问VideoJS flash对象

的jsfiddle：

3 个答案: