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

Upload and Play Video Files with Media Player


Product Progress® Kendo UI® MediaPlayer for jQuery


How can I upload a video file by using the Kendo UI Upload and then play it with the Kendo UI MediaPlayer?


To upload and play a video file by using the Kendo UI Upload and Kendo UI MediaPlayer, follow these steps:

  1. Initialize the Media Player widget.
  2. Initialize the Upload widget.
  3. Handle the select event of the Upload.
  4. Load the video file by using the media method of the MediaPlayer.
<div style="width: 720px; position: absolute; left: 120px;">
  <input name="files" id="files" type="file" aria-label="files" />
  <div id="mediaplayer" style="height: 480px;"></div>

    var URL = window.URL || window.webkitURL;

    $(document).ready(function () {
        // Initialize the Media Player.
        let mediaPlayer = $("#mediaplayer").data("kendoMediaPlayer");

        // Initialize the Upload.
            // Allow only the HTML5 supported video formats.
            validation: {
                allowedExtensions: [".mp4", ".ogg", ".webm"]
            // Allow only 1 file to be uploaded a time.
            multiple: false,
            // Utilize the Select event to obtain the file.
            select: function(e) {
                let file = e.files[0].rawFile;
                let name = e.files[0].name;
                // Create an objectUrl using the selected file.
                let url = URL.createObjectURL(file);

                // Play the video through the url.
                    title: name,
                    source: url
In this article