Post
Ask Question

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>  
    17.   
    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.                 });  
    49.   
    50.                 function onChange() {  
    51.                     var index = this.select().index();  
    52.                     var dataItem = this.dataSource.view()[index];  
    53.                     $("#mediaplayer").data("kendoMediaPlayer").media(dataItem);  
    54.                 }  
    55.   
    56.                 function onDataBound() {  
    57.                     this.select(this.element.children().first());  
    58.                 }  
    59.   
    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.             }  
    75.               
    76.             .playlist {  
    77.                 float: left;  
    78.                 width: 280px;  
    79.                 height: 360px;  
    80.                 overflow: auto;  
    81.             }  
    82.               
    83.             .playlist ul,  
    84.             .playlist li {  
    85.                 list-style-type: none;  
    86.                 margin: 0;  
    87.                 padding: 0;  
    88.             }  
    89.               
    90.             .playlist .k-item {  
    91.                 border-bottom-style: solid;  
    92.                 border-bottom-width: 1px;  
    93.                 padding: 14px 15px;  
    94.             }  
    95.               
    96.             .playlist .k-item:last-child {  
    97.                 border-bottom-width: 0;  
    98.             }  
    99.               
    100.             .playlist span {  
    101.                 cursor: pointer;  
    102.                 display: block;  
    103.                 overflow: hidden;  
    104.                 text-decoration: none;  
    105.             }  
    106.               
    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.             }  
    115.               
    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>  
    127.   
    128. </html>  
    Result

    play

  2. Play

    This event fires when the video begins to play.

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

    play

  3. Pause

    This event fires when the video is paused.

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

    play

  4. Time Change

    This event fires when the user changes the time.

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

    play

  5. Volume Change

    This event fires when the user changes the volume level.

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

    play

  6. End

    This event fires when the media finishes playing.

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

    play

Complete code

MediaPlayer.html

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <style>  
  6.         html {  
  7.             font-size: 14px;  
  8.             font-family: Arial, Helvetica, sans-serif;  
  9.         }  
  10.     </style>  
  11.     <title></title>  
  12.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />  
  13.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />  
  14.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />  
  15.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />  
  16.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  17.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  18. </head>  
  19.   
  20. <body>  
  21.     <div id="example">  
  22.         <h3 style="font-style:italic"> My Playlist</h3> <br/> <br/>  
  23.         <div class="demo-section k-content wide" style="width: 925px;">  
  24.             <div id="mediaplayer" style="height:360px; width:640px"></div>  
  25.             <div class="k-list-container playlist">  
  26.                 <ul id="listView" class="k-list"></ul>  
  27.             </div>  
  28.         </div>  
  29.         <script type="text/javascript">  
  30.             $(document).ready(function() {  
  31.                 $("#mediaplayer").kendoMediaPlayer({  
  32.                     autoPlay: true,  
  33.                     play: onPlay,  
  34.                     pause: onPause,  
  35.                     timeChange: ontimeChange,  
  36.                     volumeChange: onVolumeChange,  
  37.                     end: onEnd,  
  38.                     ready: onReady  
  39.                 });  
  40.                 var videos = new kendo.data.DataSource({  
  41.                     transport: {  
  42.                         read: {  
  43.                             url: "api/Media/GetMediaPlayerlist",  
  44.                             dataType: "json"  
  45.                         }  
  46.                     },  
  47.                 });  
  48.                 var listView = $("#listView").kendoListView({  
  49.                     dataSource: videos,  
  50.                     selectable: true,  
  51.                     scrollable: true,  
  52.                     template: kendo.template($("#template").html()),  
  53.                     change: onChange,  
  54.                     dataBound: onDataBound  
  55.                 });  
  56.   
  57.                 function onChange() {  
  58.                     var index = this.select().index();  
  59.                     var dataItem = this.dataSource.view()[index];  
  60.                     $("#mediaplayer").data("kendoMediaPlayer").media(dataItem);  
  61.                 }  
  62.   
  63.                 function onDataBound() {  
  64.                     this.select(this.element.children().first());  
  65.                 }  
  66.   
  67.                 function onPlay() {  
  68.                     console.log("On Play event fired")  
  69.                 }  
  70.   
  71.                 function onPause() {  
  72.                     console.log("Pause Event Fired")  
  73.                 }  
  74.   
  75.                 function ontimeChange() {  
  76.                     console.log("Time change")  
  77.                 }  
  78.   
  79.                 function onVolumeChange() {  
  80.                     console.log("Volume Change")  
  81.                 }  
  82.   
  83.                 function onEnd() {  
  84.                     console.log("The End of Video");  
  85.                 }  
  86.   
  87.                 function onReady() {  
  88.                     console.log("Video is Ready")  
  89.                 }  
  90.             });  
  91.         </script>  
  92.         <script type="text/x-kendo-template" id="template">  
  93.             <li class="k-item k-state-default" onmouseover="$(this).addClass('k-state-hover')" onmouseout="$(this).removeClass('k-state-hover')"> <span>    
  94.                     <img src="#:poster#" />    
  95.                     <h5>#:title#</h5>    
  96.                 </span> </li>  
  97.         </script>  
  98.         <style>  
  99.             .k-mediaplayer {  
  100.                 float: left;  
  101.             }  
  102.               
  103.             .playlist {  
  104.                 float: left;  
  105.                 width: 280px;  
  106.                 height: 360px;  
  107.                 overflow: auto;  
  108.             }  
  109.               
  110.             .playlist ul,  
  111.             .playlist li {  
  112.                 list-style-type: none;  
  113.                 margin: 0;  
  114.                 padding: 0;  
  115.             }  
  116.               
  117.             .playlist .k-item {  
  118.                 border-bottom-style: solid;  
  119.                 border-bottom-width: 1px;  
  120.                 padding: 14px 15px;  
  121.             }  
  122.               
  123.             .playlist .k-item:last-child {  
  124.                 border-bottom-width: 0;  
  125.             }  
  126.               
  127.             .playlist span {  
  128.                 cursor: pointer;  
  129.                 display: block;  
  130.                 overflow: hidden;  
  131.                 text-decoration: none;  
  132.             }  
  133.               
  134.             .playlist span img {  
  135.                 border: 0 none;  
  136.                 display: block;  
  137.                 height: 56px;  
  138.                 object-fit: cover;  
  139.                 width: 100px;  
  140.                 float: left;  
  141.             }  
  142.               
  143.             .playlist h5 {  
  144.                 display: block;  
  145.                 font-weight: normal;  
  146.                 margin: 0;  
  147.                 overflow: hidden;  
  148.                 padding-left: 10px;  
  149.                 text-align: left;  
  150.             }  
  151.         </style>  
  152.     </div>  
  153. </body>  
  154.   
  155. </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.

 


Similar Articles