html - Flowplayer Javascript events - Stack Overflow

admin管理员组

文章数量:1023838

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?

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?

• javascript
• html
• jquery
• jquery-events
• flowplayer

Share Improve this question Follow edited May 28, 2021 at 19:14 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 16, 2014 at 16:44 MrCroftMrCroft 3,08933 gold badges3737 silver badges5050 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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.

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?

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?

• javascript
• html
• jquery
• jquery-events
• flowplayer

Share Improve this question Follow edited May 28, 2021 at 19:14 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 16, 2014 at 16:44 MrCroftMrCroft 3,08933 gold badges3737 silver badges5050 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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.

本文标签： htmlFlowplayer Javascript eventsStack Overflow