在 jQuery 中的 Flowplayer 上设置 autoPlay false

发布于 2024-12-15 11:10:14 字数 791 浏览 2 评论 0原文

我正在使用 jQuery 和 Flowplayer 将 FLV 文件的链接转换为嵌入式视频,如下所示:

$(document).ready(function() {
    if($('a[type^="video"]').length > 0) {
        $('a[type^="video"]').each(function() {
            var video_path = $(this).attr('href');
            var video_box  = $(this).parent();
            video_box.html('');
            video_box.css('width', '680px');
            video_box.css('height', '460px');
            video_box.flowplayer('/sites/default/files/flowplayer-3.2.7.swf', video_path);
        });
    }
});

除了所有视频同时开始播放之外,这工作正常。我尝试过添加 autoPlay: false 几种不同的方法,但到目前为止都没有奏效。从文档看来我应该能够这样做:

video_box.flowplayer('/sites/default/files/flowplayer-3.2.7.swf', video_path, {clip: {autoPlay: false}});

但这不起作用。

I'm using jQuery and Flowplayer to turn links to FLV files into embedded videos like this:

$(document).ready(function() {
    if($('a[type^="video"]').length > 0) {
        $('a[type^="video"]').each(function() {
            var video_path = $(this).attr('href');
            var video_box  = $(this).parent();
            video_box.html('');
            video_box.css('width', '680px');
            video_box.css('height', '460px');
            video_box.flowplayer('/sites/default/files/flowplayer-3.2.7.swf', video_path);
        });
    }
});

This is working fine except that all the videos start playing simultaneously. I've tried adding autoPlay: false several different ways, but so far none have worked. From the documentation it seems like I should be able to do it this way:

video_box.flowplayer('/sites/default/files/flowplayer-3.2.7.swf', video_path, {clip: {autoPlay: false}});

But that doesn't work.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

梦回旧景 2024-12-22 11:10:14

@Kevin

你不需要在flowplayer-a-tag周围有一个额外的div。您需要做的就是在 a 标签上设置 display:block 。

所以你的代码可以简化为:

    $('a[type^="video"]').each(function(i) {
        $(this).css({'width': '680px','height': '460px','display': 'block'}).attr('id', 'player-' + i);
        var player = $f('player-' +i, '../flowplayer.commercial-3.2.7.swf', {
            clip: {
                autoPlay: false
            }
        });
    });

@Kevin

You don't need an extra div surrounding the flowplayer-a-tag. All you need to do is set display:block on the a-tag.

So your code can be condensed to this:

    $('a[type^="video"]').each(function(i) {
        $(this).css({'width': '680px','height': '460px','display': 'block'}).attr('id', 'player-' + i);
        var player = $f('player-' +i, '../flowplayer.commercial-3.2.7.swf', {
            clip: {
                autoPlay: false
            }
        });
    });
遗心遗梦遗幸福 2024-12-22 11:10:14

您是否尝试过文档中使用的语法?在每个循环中,您可以执行

$f(this.parentNode, {src: "flowplayer.swf"}, {
  clip: {
    url: video_path
    autoPlay: false,
    onStart: function(clip){alert("Clip "+ clip.url);}  // attach event listener
  },
});

以下操作:旁注:行 if($('a[type^="video"]').length > 0) { 不是必需的,因为 jQuery只会循环遍历元素(如果有的话),否则它只会跳过该块。

Have you tried the syntax, that is used in the documentation? In your each loop you can do:

$f(this.parentNode, {src: "flowplayer.swf"}, {
  clip: {
    url: video_path
    autoPlay: false,
    onStart: function(clip){alert("Clip "+ clip.url);}  // attach event listener
  },
});

A side note: The line if($('a[type^="video"]').length > 0) { is not necessary, because jQuery will only loop through the elements, if there are any, otherwise it just skips the block.

神仙妹妹 2024-12-22 11:10:14

我让它像这样工作:

$(document).ready(function() {
    $('a[type^="video"]').each(function(index) {
        var video_path = $(this).attr('href');
        var video_box  = $(this).parent();
        video_box.html('');
        video_box.css('width', '680px');
        video_box.css('height', '460px');
        video_box.attr('id', 'player-' + index);
        $f(video_box.attr('id'), '/sites/default/files/flowplayer-3.2.7.swf', {
            clip: {
                autoPlay: false,
                url: video_path
            }
        });
    });
});

$f() 函数工作的关键是给它一个 id。我使用的 div 没有 id,因此我用 video_box.attr('id', 'player-' + index); 行给了它们一个 id。

我仍然不知道为什么我无法让 jQuery object.flowplayer() 方法接受 autoPlay: false 属性。但我认为使用 $f() 函数也同样好。感谢您的帮助。

I got it to work like this:

$(document).ready(function() {
    $('a[type^="video"]').each(function(index) {
        var video_path = $(this).attr('href');
        var video_box  = $(this).parent();
        video_box.html('');
        video_box.css('width', '680px');
        video_box.css('height', '460px');
        video_box.attr('id', 'player-' + index);
        $f(video_box.attr('id'), '/sites/default/files/flowplayer-3.2.7.swf', {
            clip: {
                autoPlay: false,
                url: video_path
            }
        });
    });
});

The key to getting the $f() function to work was to give it an id. The divs I was using didn't have ids so I gave them one with the line video_box.attr('id', 'player-' + index);.

I still don't know why I couldn't get the jQuery object.flowplayer() method to accept the autoPlay: false property. But I suppose using the $f() function is just as good. Thanks for the help.

笑着哭最痛 2024-12-22 11:10:14

您可以向 flowplayer 传递一个选项对象,其中之一是自动播放,以下是相关文档: http:// flowplayer.org/documentation/configuration/

这是上面页面中的示例:

flowplayer("player", {
    src: "flowplayer.swf"
}, {
    clip:  {
        autoPlay: false,
        autoBuffering: true
    }
});

Flowplayer 有大量可以在初始化时设置的选项,包括诸如 onPauseonPlay 之类的事件绑定

You can pass flowplayer an object of options, one of which is autoplay, here is the documentation for this: http://flowplayer.org/documentation/configuration/

This is an example from the above page:

flowplayer("player", {
    src: "flowplayer.swf"
}, {
    clip:  {
        autoPlay: false,
        autoBuffering: true
    }
});

Flowplayer has tons of options you can set on initialization including event bindings for things like onPause and onPlay.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文