JQuery

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.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs