How to display HTML after video play finishes?

Question

Hello people,

I am new here.

I would like to know how can I display HTML code after a video is finished playing. I am using FlowPlayer (http://www.flowplayer.org) .

I have tried to achieve this using JW Flash Player (http://www.longtailvideo.com/players/jw-flv-player/), but was unable figure out anything.

Also, let me know if it's possible or not. And if it is, please share with me and everybody on StackOverflow.

P.S. I am using PHP.

Answer 1

What do you mean by "displaying HTML code"? Generally speaking, you must do it on client-side using javascript and bind a callback function to Flowplayer's onFinish clip event.

Answer 2

According to the FlowPlayer documentation an onFinish event is fired when the video finishes. While I've just changed some of the example code something like this should work:

flowplayer("player", "yourmoviefile.swf", {  

    // a clip object 
    clip: { 

        // a clip event is defined inside clip object 
        onFinish: function() { 
            $('#finish').html('your string to show here');
            alert("clip started"); 
        }  
    }
});

The line of jQuery will insert the html string you specify into a div with an ID of finish.

Answer 3

You can use the onFinish clip event with flowplayer to trigger whatever it is you are trying to show:

http://flowplayer.org/documentation/events/clip.html

Depending on the html you are trying to show, you could use the "Content" flash plug-in to display it. It's commonly used for stuff like captions.

http://flowplayer.org/plugins/flash/content.html

Answer 4

Okay people, I have finally figured it out, thanks for everyone who answered.

Here's the code I used along with the 'Content' plugin.

    <div id="page">         
        <a href="flowplayer.flv"  
             style="display:block;width:520px;height:330px"  
             id="player"></a>           
        <script>                
            var player = flowplayer("player", "flowplayer-3.1.5.swf", {             
            plugins: {                  
                myContent: {                                        
                    url: 'flowplayer.content-3.1.0.swf',                                        
                    top: 20, 
                    width: 300,                     
                    borderRadius: 10,
                    display: 'none'                                             
                } 
            }               
            });             
            )               
            player.onFinish(function(clip) {
                var m=this.getPlugin("myContent");
                m.show();
                m.setHtml('You advertisement here. <b>This is bold text.</b> <i>This is italicized.</i>');
            });
        </script>       
    </div>

I hope this helps someone.