Skip to content

Latest commit

 

History

History
54 lines (48 loc) · 2.14 KB

multiple-sources.md

File metadata and controls

54 lines (48 loc) · 2.14 KB
title page_title description previous_url slug position
Multiple Sources
Multiple Sources
Add multiple sources to the same video in the Telerik UI MediaPlayer for {{ site.framework }}.
/html-helpers/media/mediaplayer/features, /helpers/media/mediaplayer/multiple-sources
htmlhelpers_mediaplayer_multiplesources_aspnetcore
2

Multiple Sources

To add multiple sources for the same video, you have to configure the quality-dependent client-side 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.

The following example demonstrates how to configure multiple sources with different qualities.

	@(Html.Kendo().MediaPlayer()
		.AutoPlay(true)
		.Media(m => m
			.Title("Our Company Culture - Lesson 1")
			.Source(new[] { // Define the media files for different quality options.
				new { quality = "480p", url = "Video/videoLQ.mp4" },
				new { quality = "720p", url = "Video/videoHD.mp4" },
				new { quality = "1080p", url = "Video/videoFHD.mp4" },
			})
		)
		.Name("mediaPlayer")
		.HtmlAttributes(new { style = "height:360px; width:640px" })
	)

{% if site.core %}

	@{
		var sources = new[] { // Define the media files for different quality options.
				new { quality = "480p", url = "Video/videoLQ.mp4" },
				new { quality = "720p", url = "Video/videoHD.mp4" },
				new { quality = "1080p", url = "Video/videoFHD.mp4" },
			};
	}
    <kendo-mediaplayer name="mediaPlayer"
        auto-play="true"
        navigatable="true"
        style = "height:360px; width:640px">
        <media title="Our Company Culture - Lesson 1" source="@sources" />
    </kendo-mediaplayer>

{% endif %}

See Also