I have multiple HTML5 flowplayers on a page. How to I make them play mutually exclusively?

问题

I have Multiple HTML5 flow player instances on my page. When I start to play one, then click on another one, the first one doesn't stop. Is there any way to configure it so that only one will play at a time?

Here is the code for a test page:

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

回答1:

Ok. Finally found it! It's a feature called "Splash"

From the documentation:

Flowplayer has a unique feature called "splash screen" which is similar to the poster setup except that the nested VIDEO or Flash OBJECT tag initially is not present on the page, but is inserted on demand. The player is installed on the fly when the user clicks on the splash screen. This has the following benefits: You can have an unlimited amount of players on the page and they - or rather their splash screens - all render immediately, even in Flash mode. There are no hidden Flash objects which interfere with your scripting or CSS layout dynamics. Only one video can be played at a time. When the user clicks on a splash screen while another player instance is running, the latter is unloaded automatically. By design the splash setup also disables preloading of the video.

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

回答2:

As far as I'm aware there is no default behavior in flowplayer to only allow one video to play when there are multiple instances on a page (whether using the flash player or the newer HTML5).

You can do this yourself using the flowplayer api. The api offers methods such as play(), pause() and stop(). In your case you could bind to the click event to be able to stop all other instances.

Example

$('#bacon-player').bind("click", function(e, api)){
    // Add code here to stop other players.
    $('#other-player').stop();
};

来源：https://stackoverflow.com/questions/16482536/i-have-multiple-html5-flowplayers-on-a-page-how-to-i-make-them-play-mutually-ex

标签

html5

flowplayer