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

Multiple Sources

Updated on Jun 11, 2025

To add multiple sources for the same video, you have to configure the quality-dependent HD feature.

When you add multiple sources for the video, an HD button is automatically displayed in the bottom right corner next to the FullScreen button. This behavior enables you to select your preferred quality.

html

<div id="mediaplayer1" style="width:640px; height: 360px;"></div>
<script>
    $("#mediaplayer1").kendoMediaPlayer({
        autoPlay: true,
        media: {
            title: "Our Company Culture - Lesson 1",
            source: [
                { quality: "480p", url: "Video/video1.mp4" },
                { quality: "720p", url: "Video/video2.mp4" }]
        }
    });
</script>

Multiple Sources

See Also