AUTHOR: Peter Milchev
DATE POSTED: February 01, 2019
AutoPlay next video and implement a PlayNext video button.
The following example shows how to implement the logic for playing the next video and how to add and style the play next button.
<style>
.RadMediaPlayer .rmpNextButton {
width
:
26px
;
height
30px
}
.RadMediaPlayer .rmpNextIcon:before {
content
"\e009"
font-size
x-large
padding-top
7px
.rmpLeftControlsSet .rmpActionButton {
margin-right
0
.rmpLeftControlsSet .rmpActionButton:nth-last-of-type(.rmpActionButton) {
1em
html .RadMediaPlayer .rmpSeekBar {
padding-left
35px
</style>
function
playNextVideo(mediaPlayer) {
var
ACTIVE =
"rmpActive"
nextIndex = mediaPlayer.mediaFiles.indexOf(mediaPlayer.currentFile) + 1
if
(nextIndex < mediaPlayer.mediaFiles.length) {
nextVideo = mediaPlayer.mediaFiles[nextIndex];
mediaPlayer.currentPlayer.loadFile(nextVideo);
mediaPlayer.currentFile = nextVideo;
// update the highlighted item in the playlist
mediaPlayer.playlist._$list
.children()
.removeClass(ACTIVE)
.eq(nextIndex)
.addClass(ACTIVE);
OnClientEnded(sender, args) {
playNextVideo(sender);
OnClientReady(sender, args) {
// add the play next video button
$leftControlsSet = $telerik.$(sender.get_element()).find(
".rmpLeftControlsSet"
);
$button = $telerik.$(
'<button id="'
+ sender.get_id() +
'_Toolbar_NextButton" type="button" class="rmpActionButton rmpNextButton" title="Next"><span class="rmpIcon rmpNextIcon"></span></button>'
$leftControlsSet.append($button);
$button.on(
"click"
,
() {
})
<
telerik:RadMediaPlayer
RenderMode
=
"Lightweight"
ID
"RadMediaPlayer1"
runat
"server"
OnClientEnded
"OnClientEnded"
OnClientReady
"OnClientReady"
Height
"360px"
Width
"640px"
ToolbarDocked
"true"
AutoPlay
>
PlaylistSettings
YouTubePlaylist
"PLC679RvCan2CLAR4zqTm-8QDMir5CRKNN"
/>
</
Resources Buy Try