Events In Kendo Media Player

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.

1. Ready
2. Play
3. Pause
4. Time Change
5. Volume Change
6. 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

1. 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
   
   
   
   
2. 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
   
   
   
   
3. 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
   
   
   
   
4. 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
   
   
   
   
5. 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
   
   
   
   
6. 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