Message plugin demo

The message plugin demo shows how the Flowplayer Native message plugin displays custom messages in the player.

When playing the video you should see a greeting in the beginning and in the end of the video.

Sample implementation

var player = window.player = flowplayer("#player", { src: "//edge.flowplayer.org/bauhaus.mp4" , title: "native / message" }) player.on(flowplayer.events.PLAYING, function () { player.emit(flowplayer.message.events.SHOW_MESSAGE, { message: "Hello there!", timeout: 5000 }) }) player.on("ended", function () { player.emit(flowplayer.message.events.SHOW_MESSAGE, { message: "Bye bye!" , sticky: true } ) });

Libraries

<!-- <head> -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />

<!-- <body> -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/message.min.js"></script>

HTML code

<div id="player"></div>

Javascript

var player = flowplayer("#player", {
 token: "eyJraWQiOiI3cW5idHhsWkhMcWUiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCI3cW5idHhsWkhMcWVcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.7hqE246u2u_UbEXuEwcgM4LOqQOJkJT3bQaqcR023mazRZHKuAbYaxrIlPTXZIvl8iDu2wMkz5LSp3fE55xQgQ"
 , src: "//edge.flowplayer.org/bauhaus.mp4"
 , title: "native / message"
})
// show a message when playback started
player.on(flowplayer.events.PLAYING, function () {
    player.emit(flowplayer.message.events.SHOW_MESSAGE, {
        // we override the default of 3 seconds and show the message for 5
        timeout: 5000,
        message: "Hello there!"
    })
})

// show a message when playback ended
player.on("ended", function () {
    player.emit(flowplayer.message.events.SHOW_MESSAGE,
        { message: "Bye bye!"
        , sticky:  true
        }
    )
})

Standalone demo

message plugin demo