New to Kendo UI for jQuery? Download free 30-day trial

Get Current Time in MediaPlayer

Environment

Product Progress® Kendo UI® MediaPlayer for jQuery
Product Version Created with version 2017.3.1026

Description

How can I get the current time which is reached when playing a media file?

Solution

  1. Get a reference of the .k-mediaplayer-currenttime span element, which shows the current time, and extract the text from it.
  2. Split the text and push in an array.
  3. Iterate over the array and convert the time in seconds.
<div id="mediaplayer" style="height:360px"></div>

<button id="getTimeButton">Get current time</button>


<script type="text/javascript">
    $(document).ready(function () {

        $("#mediaplayer").kendoMediaPlayer({
            autoPlay: true,
            media: {
                title: "Take a Tour of the Telerik Platform",
                source: "https://www.youtube.com/watch?v=rLtTuFbuf1c"
            }
        });

        $("#getTimeButton").on("click", function (e) {
            var player = $("#mediaplayer").getKendoMediaPlayer();
            var timeHTML = $(".k-mediaplayer-currenttime").text();
            var timeParts = timeHTML.split(":").reverse();

            var seconds = 0;

            for (var i = 0; i < timeParts.length; i++) {
                seconds = seconds + (parseInt(timeParts[i]) * Math.pow(60, i));
            }

            alert("Current time is at " + seconds + " seconds.");

        });
    });

</script>
In this article