Videojs player on end action

When the video ends, BIG PLAY or BIG REPLAY button is displayed.
The endAction option of Nuevo plugin allows to change it and display either related container or sharing container when video ends.endAction option has two possible parameters: 'related' or 'share'. Example video above makes use of 'related' action when the video ends, you can change it to 'share' action. Just wait till video ends and see how it works!

Check Nuevo plugin setup code example below, it's easy.

Code snippet

<script>var player = videojs('example_video_1');
player.nuevo({
logo: '//domain.com/path/to/logo.png',
logoposition: 'RT',
logourl: '//domain.com',
endAction: "related"
});
</script>

Custom HTML End Action

One more option for video end action is "customEnd". The option value is string with custom HTML code. On one of our private websites, we display the comment textarea with an option to send comment by a user when video ends. In the example above, you can test custom HTML object when video ends.HTML source code is:

Code snippet

<style>.custom-end{display:table-cell;vertical-align:middle;text-align:center;white-space:nowrap}
.custom-end img {border:0}
.custom-end .thanks{margin:10px 0 20px 0;font-size:18px}
.custom-end .end-button{font-size:16px;margin:0 4px;cursor:pointer;padding:8px 10px;border:0;background-color:#cc0000;color:#fff}
.custom-end .end-button:hover{background-color:#e5e5e5;color:#222}
</style>
<div class="custom-end">
<img src="/images/nuevo_mid.png"/>
<p class="thanks">Thank you for watching</p>
<span class="end-button" onclick="player.play()">Play Again</span>
<a href="/nuevo/order" class="end-button">Buy Player</a>
</div>

Of course, you cannot pass formatted HTML as an option's value. You need to minimize/compress your HTML and pass it as an option's value directly or assign separate variable for your HTML and pass it as the plugin's value. A minimized version of the HTML above assigned to a variable is:

Code snippet

var my_end = '<style>.custom-end{display:table-cell;vertical-align:middle;text-align:center;white-space:nowrap}.custom-end img{border:0}.custom-end .thanks{margin:10px 0 20px 0;font-size:24px}.custom-end .end-button:hover{background-color:#e5e5e5;color:#222}.custom-end .end-button{font-size:16px;margin:0 4px;cursor:pointer;padding:8px 10px;border:0;background-color:#cc0000;color:#fff}</style><div class="custom-end"><img src="/images/nuevo_mid.png"><p class="thanks">Thank you for watching</p><span class="end-button" onclick="player.play()">Play Again</span><a href="/nuevo/order" class="end-button">Buy Player</a></div>';

Now you can easily use such variable as an options' value.

Code snippet

player.nuevo({ customEnd: my_end })

As you may have noticed, custom end HTML example is wrapped into DIV element with display:table-cell; and vertical-align:middle; CSS rules. This allows to align custom end content in the middle of the player object vertically.