Getting Started with the MediaPlayer
This guide demonstrates how to get up and running with the Kendo UI for jQuery MediaPlayer .
After the completion of this guide, you will achieve the following end result:
<div id="mediaplayer" style="width:640px; height: 360px;"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#mediaplayer").kendoMediaPlayer({
autoPlay: true,
navigatable: true,
media: {
title: "ProgressNEXT 2019 Highlights",
source: "https://youtu.be/2OvvwWShNWo"
}
});
});
</script>
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the component. The content of the <div> will be used as content for the MediaPlayer.
<div id="mediaplayer" style="width:640px; height: 360px;"></div>
2. Initialize the MediaPlayer
In this step, you will initialize the MediaPlayer from the <div> element.
<div id="mediaplayer" style="width:640px; height: 360px;"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#mediaplayer").kendoMediaPlayer();
</script>
3. Specify the Media
Here, you will specify the media that will be played by the component.
<div id="mediaplayer" style="width:640px; height: 360px;"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#mediaplayer").kendoMediaPlayer({
media: {
title: "ProgressNEXT 2019 Highlights",
source: "https://youtu.be/2OvvwWShNWo"
},
autoPlay: true, // The video or videos will start playing after the component initialization.
navigatable: true, // Enables the component keyboard navigation.
});
});
</script>
When using local sources, consider the video formats supported by the different browsers. For more information on the supported HTML5 video formats, refer to the HTML Video documentation. Once your video files are ready, initialize the MediaPlayer by using the
divelement.
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.