Question

我的页面上有多个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>

Answer 1

确定。终于找到了！这是一个名为“Splash”的功能

来自文档：

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

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

Answer 2

据我所知，在流媒体播放器中没有默认行为只允许在页面上有多个实例时播放一个视频（无论是使用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(); };

我在页面上有多个HTML5流播放器。如何让他们互相独占？

2 个答案: