Introduction
Kendo media player is used to play videos from the static resources or online You Tube videos. It provides a rich UI for our web sites. In this blog, we are going to see how to implement Kendo media player with a static resource as well as with You Tube videos.
Kendo Media Player with static resource
Create a new HTML page in your application. I have one media (video) file in my Application, which I’m going to play using Kendo media player, as shown below.
Write the code, mentioned below, in the newly-created HTML page.
- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8" />
- <title>Kendo UI Snippet</title>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
- <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
- </head>
-
- <body>
- <h3> Kendo Media Player </h3> <br />
- <div id="mediaplayer1" style="width:640px; height: 360px;"></div>
- <script>
- $("#mediaplayer1").kendoMediaPlayer({
- autoPlay: true,
- media: {
- title: "Get Started with Beaconstac",
- source: "How to Get Started with Beaconstac.mp4"
- }
- });
- </script>
- </body>
-
- </html>
From the code mentioned above, it is obvious that the Kendo media player is initialized with the div tag of Id mediaplayer1, where the media player has a couple of properties. - autoPlay -> It is used to play the video automatically when the page loads.
- Media -> It consists of the title of the video and source information.
Result
Kendo Media Player with streams online YouTube videos
Write the code, mentioned below, where your HTML file is shown below.
- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8" />
- <title>Kendo UI Snippet</title>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
- <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
- </head>
-
- <body>
- <h3> Kendo Media Player </h3> <br />
- <div id="mediaplayer1" style="width:640px; height: 360px;"></div>
- <script>
- $("#mediaplayer1").kendoMediaPlayer({
- autoPlay: true,
- media: {
- title: "Cooking with ASP.NET Core and Angular 2",
- source: "https://www.youtube.com/watch?v=1Fe-L6pd3gw"
- }
- });
- </script>
- </body>
-
- </html>
Result
Your valuable feedback, questions, or comments about this blog are always welcome.