Call to Action with JW Player

Sep 25, 2013

Share:

How to do it

All you need to do here is set up a normal JW Player embed like we always do, and use our API, and onComplete(), to tell the player to display the call to action at the end.

Into the Code

Below is the breakdown of the JavaScript code that is used. First, a basic player set up, like we always have. We include a WebM video so Firefox can play in HTML5 mode:

jwplayer("player").setup({
playlist: [{
image: "http://content.bitsontherun.com/thumbs/w5co0c24-480.jpg",
sources: [{
file: "http://content.bitsontherun.com/videos/w5co0c24-hV866gPy.mp4"
},{
file: "http://content.bitsontherun.com/videos/w5co0c24-hV866gPy.webm"
}]
}],
width: 600,
height: 300,
stretching: "fill"
});

Next, we use some JavaScript (to create the elements used for the demo), and ourJavaScript API (specifically the onComplete() event), to show the call to action at the end of he video. Note, due to the length of the code used for this example, the source code for this API example is on a separate page. If you are interested in the complete source code to this example pleaseclick here.

Wrapping Up

As you see, it is quite easy to add the call to action feature toJW Player 6. Feel free to use the demo in this blog post and adjust it as you see fit. A direct link to this demo is availablehere. There are many uses for this powerful feature. You can use this to display an email form at the end of a video, fill out a survey, or simply market a product. The possibilities are endless. Please let us know if you have any questions or if you have built a cool integration that you wish to show off, comments are welcome, happy embedding!