How to display HTML after video play finishes?
-
23-09-2019 - |
Question
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.
Solution
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.
OTHER TIPS
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.
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.
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.