Events In Kendo Media Player

Gowtham K
8y
4.5k
0
2

Article

Introduction

In this article, we are going to learn about the different events in Kendo Media Player. To explain how to work with events in Kendo Media Player, I’m going to use the application that was developed in my previous article, Create a video playlist using kendo media player.

Events in Kendo Media Player

There are different kinds of events in Kendo Media Player, which are listed below.

Ready
Play
Pause
Time Change
Volume Change
End

Let’s look at these events one by one.

Before going through these events, please go through my previous article, where I have written about how to work with Kendo Media Player

Ready

This event is fired when the loading is over and Kendo Media Player is ready to start playing the video.

MediaPlayer.html - > This file is updated from my previous work
1. <!DOCTYPE html>
2. <html <head>
3. <style>
4. html {
5. font-size: 14px;
6. font-family: Arial, Helvetica, sans-serif;
7. }
8. </style>
9. <title></title>
10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
11. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
12. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
13. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
14. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
15. <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
16. </head>
18. <body>
19. <div id="example">
20. <h3 style="font-style:italic"> My Playlist</h3> <br/> <br/>
21. <div class="demo-section k-content wide" style="width: 925px;">
22. <div id="mediaplayer" style="height:360px; width:640px"></div>
23. <div class="k-list-container playlist">
24. <ul id="listView" class="k-list"></ul>
25. </div>
26. </div>
27. <script type="text/javascript">
28. $(document).ready(function() {
29. $("#mediaplayer").kendoMediaPlayer({
30. autoPlay: true,
31. ready: onReady,
32. });
33. var videos = new kendo.data.DataSource({
34. transport: {
35. read: {
36. url: "api/Media/GetMediaPlayerlist",
37. dataType: "json"
38. }
39. },
40. });
41. var listView = $("#listView").kendoListView({
42. dataSource: videos,
43. selectable: true,
44. scrollable: true,
45. template: kendo.template($("#template").html()),
46. change: onChange,
47. dataBound: onDataBound
48. });
50. function onChange() {
51. var index = this.select().index();
52. var dataItem = this.dataSource.view()[index];
53. $("#mediaplayer").data("kendoMediaPlayer").media(dataItem);
54. }
56. function onDataBound() {
57. this.select(this.element.children().first());
58. }
60. function onReady() {
61. console.log("Video is Ready")
62. }
63. });
64. </script>
65. <script type="text/x-kendo-template" id="template">
66. <li class="k-item k-state-default" onmouseover="$(this).addClass('k-state-hover')" onmouseout="$(this).removeClass('k-state-hover')"> <span>
67. <img src="#:poster#" />
68. <h5>#:title#</h5>
69. </span> </li>
70. </script>
71. <style>
72. .k-mediaplayer {
73. float: left;
74. }
76. .playlist {
77. float: left;
78. width: 280px;
79. height: 360px;
80. overflow: auto;
81. }
83. .playlist ul,
84. .playlist li {
85. list-style-type: none;
86. margin: 0;
87. padding: 0;
88. }
90. .playlist .k-item {
91. border-bottom-style: solid;
92. border-bottom-width: 1px;
93. padding: 14px 15px;
94. }
96. .playlist .k-item:last-child {
97. border-bottom-width: 0;
98. }
100. .playlist span {
101. cursor: pointer;
102. display: block;
103. overflow: hidden;
104. text-decoration: none;
105. }
107. .playlist span img {
108. border: 0 none;
109. display: block;
110. height: 56px;
111. object-fit: cover;
112. width: 100px;
113. float: left;
114. }
116. .playlist h5 {
117. display: block;
118. font-weight: normal;
119. margin: 0;
120. overflow: hidden;
121. padding-left: 10px;
122. text-align: left;
123. }
124. </style>
125. </div>
126. </body>
128. </html>
Result
Play

This event fires when the video begins to play.

Snippet
1. $("#mediaplayer").kendoMediaPlayer({
2. autoPlay: true,
3. play: onPlay,
4. });
6. function onPlay() {
7. console.log("On Play event fired")
8. }
Result
Pause

This event fires when the video is paused.

Snippet
1. $("#mediaplayer").kendoMediaPlayer({
2. autoPlay: true,
3. pause: onPause,
4. });
6. function onPause() {
7. console.log("Pause Event Fired")
8. }
Result
Time Change

This event fires when the user changes the time.

Snippet
1. $("#mediaplayer").kendoMediaPlayer({
2. autoPlay: true,
3. timeChange: ontimeChange,
4. });
6. function ontimeChange() {
7. console.log("Time change")
8. }
Result
Volume Change

This event fires when the user changes the volume level.

Snippet
1. $("#mediaplayer").kendoMediaPlayer({
2. autoPlay: true,
3. volumeChange: onVolumeChange,
4. });
6. function onVolumeChange() {
7. console.log("Volume Change")
8. }
Result
End

This event fires when the media finishes playing.

Snippet
1. $("#mediaplayer").kendoMediaPlayer({
2. autoPlay: true,
3. end: onEnd,
4. });
6. function onEnd() {
7. console.log("The End of Video");
8. }
Result

Complete code

MediaPlayer.html

<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<h3 style="font-style:italic"> My Playlist</h3> <br/> <br/>
<div class="demo-section k-content wide" style="width: 925px;">
<div id="mediaplayer" style="height:360px; width:640px"></div>
<div class="k-list-container playlist">
<ul id="listView" class="k-list"></ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#mediaplayer").kendoMediaPlayer({
autoPlay: true,
play: onPlay,
pause: onPause,
timeChange: ontimeChange,
volumeChange: onVolumeChange,
end: onEnd,
ready: onReady
});
var videos = new kendo.data.DataSource({
transport: {
read: {
url: "api/Media/GetMediaPlayerlist",
dataType: "json"
}
},
});
var listView = $("#listView").kendoListView({
dataSource: videos,
selectable: true,
scrollable: true,
template: kendo.template($("#template").html()),
change: onChange,
dataBound: onDataBound
});
function onChange() {
var index = this.select().index();
var dataItem = this.dataSource.view()[index];
$("#mediaplayer").data("kendoMediaPlayer").media(dataItem);
}
function onDataBound() {
this.select(this.element.children().first());
}
function onPlay() {
console.log("On Play event fired")
}
function onPause() {
console.log("Pause Event Fired")
}
function ontimeChange() {
console.log("Time change")
}
function onVolumeChange() {
console.log("Volume Change")
}
function onEnd() {
console.log("The End of Video");
}
function onReady() {
console.log("Video is Ready")
}
});
</script>
<script type="text/x-kendo-template" id="template">
<li class="k-item k-state-default" onmouseover="$(this).addClass('k-state-hover')" onmouseout="$(this).removeClass('k-state-hover')"> <span>
<img src="#:poster#" />
<h5>#:title#</h5>
</span> </li>
</script>
<style>
.k-mediaplayer {
float: left;
}
.playlist {
float: left;
width: 280px;
height: 360px;
overflow: auto;
}
.playlist ul,
.playlist li {
list-style-type: none;
margin: 0;
padding: 0;
}
.playlist .k-item {
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 14px 15px;
}
.playlist .k-item:last-child {
border-bottom-width: 0;
}
.playlist span {
cursor: pointer;
display: block;
overflow: hidden;
text-decoration: none;
}
.playlist span img {
border: 0 none;
display: block;
height: 56px;
object-fit: cover;
width: 100px;
float: left;
}
.playlist h5 {
display: block;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-left: 10px;
text-align: left;
}
</style>
</div>
</body>
</html>

References

http://docs.telerik.com/kendo-ui/controls/media/mediaplayer/overview
http://docs.telerik.com/kendo-ui/api/javascript/ui/mediaplayer#events-end

Conclusion

We have seen how to work with the events in Kendo Media Player, which are useful whenever we need to do some external/internal operations in our Application, while the event is fired .

I hope, you have enjoyed this article. Your valuable feedback, question or comments about this article are always welcome.

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all