2

我的页面上有多个 HTML5 流播放器实例。当我开始播放一个,然后单击另一个,第一个不会停止。有没有办法配置它,以便一次只玩一个?

以下是测试页面的代码:

<html>
<head>
    <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
    </script>

    <!-- 2. flowplayer -->
    <script type="text/javascript"
        src="//releases.flowplayer.org/5.4.1/flowplayer.min.js">
    </script>

    <!-- 3. skin -->
    <link rel="stylesheet" type="text/css"
        href="//releases.flowplayer.org/5.4.1/skin/minimalist.css">
    <title>title</title>
</head>
<body>
    <div>
        <div class="flowplayer">
            <video>
                <source type="video/mp4" src="PATH TO VIDEO 1">
            </video>
        </div>
    </div>
    <div>
        <div class="flowplayer">
            <video>
                <source type="video/mp4" src="PATH TO VIDEO 2">
            </video>
        </div>
    </div>
</body>
</html>
4

2 回答 2

3

好的。终于找到了!这是一个名为“Splash”的功能

从文档中:

Flowplayer 有一个称为“启动画面”的独特功能,它类似于海报设置,只是嵌套的 VIDEO 或 Flash OBJECT 标签最初不存在于页面上,而是按需插入。当用户单击初始屏幕时,播放器会即时安装。这有以下好处: 您可以在页面上拥有无限数量的播放器,并且它们 - 或者更确切地说是它们的初始屏幕 - 都立即呈现,即使在 Flash 模式下也是如此。没有隐藏的 Flash 对象会干扰您的脚本或 CSS 布局动态。一次只能播放一个视频。当用户在另一个播放器实例运行时单击启动屏幕时,后者会自动卸载。通过设计,启动设置还禁用视频的预加载。

https://flowplayer.org/docs/setup.html#splash

于 2013-05-10T14:08:38.837 回答
1

据我所知,flowplayer 中没有默认行为,只允许在页面上有多个实例时播放一个视频(无论是使用 Flash 播放器还是较新的 HTML5)。

您可以使用flowplayer api自己执行此操作。该 api 提供方法,例如play(),pause()stop(). 在您的情况下,您可以绑定到click事件以停止所有其他实例。

例子

$('#bacon-player').bind("click", function(e, api)){
    // Add code here to stop other players.
    $('#other-player').stop();
};
于 2013-05-10T13:12:38.927 回答