Flowplayer Javascript events

Question

I am trying to do something when the video starts playing. I've found onStart in the documentation, BUT wherever I look, the player is initialized differently than I have it setup.

This is my code:

$("#my-player").flowplayer({
    adaptiveRatio: true
});

And this is what I keep finding:

flowplayer("player", "flowplayer-3.2.18.swf", {
    clip: {
        onStart: function(clip) {
            // some code
        }
    }
});

I've tried:

$("#my-player").flowplayer({
    adaptiveRatio: true,
    onStart: function() { alert('movie has started'); }
});

OR

$("#my-player").flowplayer({
    adaptiveRatio: true
}).onStart(function() { alert('movie has started'); });

OR

$("#my-player").flowplayer({
    adaptiveRatio: true,
    clip: {
        onStart: function() { alert('movie has started'); }
    }
});

with no luck whatsoever. In my first try onStart doesn't fire, in the rest I get a Javascript "unexpected" error.

How do I add onStart in my code sample? (which is a valid way to initialize Flowplayer, since I've found it somewhere in their documentation, labeled "manual setup" - as opposed to not setting anything and just giving the "flowplayer" class in the html markup). I've searched for an hour and can't find the right sample to be able to add onStart to Flowplayer.

Also, does initializing like this flowplayer("player", "flowplayer-3.2.18.swf", {}); mean it uses flash automatically, no html5, regardless whether or not html5 is supported?

Answer 1

(I'm assuming that you're using FlowPlayer 5.)

To bind JavaScript functions to FlowPlayer events, you need to get a hold of the API for your given player, as is described here: https://flowplayer.org/docs/api.html

Among other things, the page contains a list of all available events. Notably, there is no "start" event, but I've found that "load" does the job just fine. "finish" and "unload" seem to do the same in the setups I've tried so far (I'm using the splash screen configuration exclusively).

An example of that might look like this:

<script type="text/javascript">
    // bind your player to a var
    var player = $('#something');

    // initialize the player
    player.flowplayer();

    // bind the api to a var - you can do this only after you have initialized it
    var api = player.data('flowplayer');

    // now we can bind events to the player via the api
    api.bind('load', function(){
        // do something when the video starts
    })
</script>

Answer 2

I'm using flowplayer 7, Javascript implementation:

<div id="video"></div>
<script>
    var container = document.getElementById("video");
    flowplayer(container, {
        clip: {
            sources: [
                {
                    type: "video/mp4",
                    src: "https://s3.amazonaws.co.....mp4"
                }
            ]
        }
    }).on("resume", function (e, api) {
        console.log("play");
    }).on("pause", function (e, api) {
        console.log("pause");
    });
</script>

so, to add an action when the video start playing you have to bind the "resume" method.