Kendo UI for jQuery MediaPlayer Overview
The MediaPlayer plays video files from static sources or streams online YouTube videos and enriches your website with dynamic content in a user-friendly interface.
The MediaPlayer also provides a styled video UI functionality by using the HTML5 <video> element and brings powerful media capabilities to your applications without the necessity of installing additional plug-ins. It delivers tight integration with the YouTube media provider, rich media web experience for websites, blogs, online TV channels, e-commerce pages, and others, and enables the integration of Kendo UI components. In addition to the consistent and elegant built-in skins, the MediaPlayer possesses the main feature of every Kendo UI component—it is a useful and convenient tool designed for achieving fascinating results in a sharp time frame.
To respond to cutting-end design practices and trends, the MediaPlayer component provides a responsive layout. This means that its size adapts depending on the capabilities of the client (end user) device and browser. The component automatically resizes its area to display the video in the most suitable possible way within the provided dimensions. The responsive web design of the MediaPlayer is shipped out-of-the-box and intends to save you time and efforts when developing your responsive applications.
The MediaPlayer is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The following image demonstrates a template of the MediaPlayer.
Initializing the MediaPlayer
When using local sources, consider the video formats that are supported by the different browsers. For more information on the current supported HTML5 video formats, refer to this article. Once your video files are ready, initialize the MediaPlayer by using the div element.
The following example uses the autoPlay property:
- Because of the mobile considerations, browsers on iOS do not automatically play embedded media. This limitation prevents unsolicited downloads over cellular networks at the expense of the user. The user always has to initiate a playback. For more information, refer to the article on audio and video HTML.
- Other functionalities may also be limited due to iOS restrictions. For more information, refer to this article and to other available resources on the Web.
<div id="mediaplayer1" style="width:640px; height: 360px;"></div>
<script>
$("#mediaplayer1").kendoMediaPlayer({
autoPlay: true,
media: {
title: "Our Company Culture - Lesson 1",
source: "Video/video1.mp4"
}
});
</script>
Functionality and Features
Referencing Existing Instances
To refer to an existing MediaPlayer instance, use the .data() jQuery method which is executed by the jQuery object of the originating element. Once a reference is established, use the MediaPlayer API to control its behavior.
<button onclick="buttonClick();">Pause Video</button>
<div id="mediaplayer1" style="width:640px; height: 360px;"></div>
<script>
$("#mediaplayer1").kendoMediaPlayer({
autoPlay: true,
media: {
title: "Our Company Culture - Lesson 1",
source: "Video/video1.mp4"
}
});
function buttonClick() {
var player = $("#mediaplayer1").data("kendoMediaPlayer");
player.pause();
}
</script>