Upload and Play Video Files with Media Player

Environment

Product

Progress® Kendo UI® MediaPlayer for jQuery

Description

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

Solution

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>
</div>

<script>
    var URL = window.URL || window.webkitURL;

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

        // Initialize the Upload.
        $("#files").kendoUpload({
            // 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.
                mediaPlayer.media({
                    title: name,
                    source: url
                })
            }
        });
    });
</script>