Post
Ask Question

How To Use Videos In Kendo Media Player

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.

Kendo

Write the code, mentioned below, in the newly-created HTML page.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Kendo UI Snippet</title>  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />  
  11.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  13. </head>  
  14.   
  15. <body>  
  16.     <h3> Kendo Media Player </h3> <br />  
  17.     <div id="mediaplayer1" style="width:640px; height: 360px;"></div>  
  18.     <script>  
  19.         $("#mediaplayer1").kendoMediaPlayer({  
  20.             autoPlay: true,  
  21.             media: {  
  22.                 title: "Get Started with Beaconstac",  
  23.                 source: "How to Get Started with Beaconstac.mp4"  
  24.             }  
  25.         });  
  26.     </script>  
  27. </body>  
  28.   
  29. </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.
  1. autoPlay -> It is used to play the video automatically when the page loads.
  2. Media -> It consists of the title of the video and source information.

Result

Kendo

Kendo Media Player with streams online YouTube videos

Write the code, mentioned below, where your HTML file is shown below.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Kendo UI Snippet</title>  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />  
  11.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  13. </head>  
  14.   
  15. <body>  
  16.     <h3> Kendo Media Player </h3> <br />  
  17.     <div id="mediaplayer1" style="width:640px; height: 360px;"></div>  
  18.     <script>  
  19.         $("#mediaplayer1").kendoMediaPlayer({  
  20.             autoPlay: true,  
  21.             media: {  
  22.                 title: "Cooking with ASP.NET Core and Angular 2",  
  23.                 source: "https://www.youtube.com/watch?v=1Fe-L6pd3gw"  
  24.             }  
  25.         });  
  26.     </script>  
  27. </body>  
  28.   
  29. </html>  
Result

Kendo

Your valuable feedback, questions,  or comments about this blog are always welcome.

 
Next Recommended Reading Get Column Name Of The Selected Cell In Kendo Grid Using jQuery