Play Videos Using Kendo Media Player And ListView In ASP.NET MVC5

Introduction

 

In some situations, we need to play the video(s) in our Web Application so, In this article, I will demonstrate how to load the videos to a media player, how to play the video(s) and create a playlist using Kendo Media Player and ListView in ASP.NET MVC5 with Entity framework. 

 

Prerequisites 

• Visual Studio
• SQL Server
• Basic Knowledge of ASP.Net MVC
• Basic Knowledge of Entity Framework
• Basic Knowledge of JQuery
• Basic Knowledge of CSS

Article Flow 

• Create a table in database with values
• Create ASP.NET MVC Empty project
• Configure Entity Framework with database and application
• Create a Controller and View
• Enable Kendo UI Features
• Load URLs and Create a playlist with Media Player and Listview

Create a table in the database

 

First, we will create a table in SQL Server to populate a kendo with video playlist in ASP.NET MVC.  I have created a table "Playlist" with the following design.  

 

Execute the below query to create a table with the above design.

CREATE TABLE [dbo].[playlist]
  (
     [videoid] [INT] IDENTITY(1, 1) NOT NULL,
     [title]   [NVARCHAR](200) NULL,
     [poster]  [NVARCHAR](max) NULL,
     [source]  [NVARCHAR](max) NULL,
     CONSTRAINT [PK_Playlist] PRIMARY KEY CLUSTERED ( [videoid] ASC )WITH (
     pad_index = OFF, statistics_norecompute = OFF, ignore_dup_key = OFF,
     allow_row_locks = on, allow_page_locks = on) ON [PRIMARY]
  )
ON [PRIMARY]
textimage_on [PRIMARY]

go

And, insert a few youtube URLs as records like below. 

 

Execute the below query to get the same records, 

SET IDENTITY_INSERT [dbo].[Playlist] ON

go

INSERT [dbo].[playlist]
       ([videoid],
        [title],
        [poster],
        [source])
VALUES (1,
        N'Telerik Platform - Enterprise Mobility. Unshackled.',
        N'http://img.youtube.com/vi/N3P6MyvL-t4/1.jpg',
        N'https://www.youtube.com/watch?v=N3P6MyvL-t4')

go

INSERT [dbo].[playlist]
       ([videoid],
        [title],
        [poster],
        [source])
VALUES (2,
        N'Learn How York Solved Its Database Problem',
        N'http://img.youtube.com/vi/_S63eCewxRg/1.jpg',
        N'https://www.youtube.com/watch?v=_S63eCewxRg')

go

INSERT [dbo].[playlist]
       ([videoid],
        [title],
        [poster],
        [source])
VALUES (3,
        N'Responsive Website Delivers for Reeves Import Motorcars',
        N'http://img.youtube.com/vi/DYsiJRmIQZw/1.jpg',
        N'https://www.youtube.com/watch?v=DYsiJRmIQZw')

go

INSERT [dbo].[playlist]
       ([videoid],
        [title],
        [poster],
        [source])
VALUES (4,
        N'Digital Transformation: A New Way of Thinking',
        N'http://img.youtube.com/vi/gNlya720gbk/1.jpg',
        N'https://www.youtube.com/watch?v=gNlya720gbk')

go

INSERT [dbo].[playlist]
       ([videoid],
        [title],
        [poster],
        [source])
VALUES (5,
        N'Take a Tour of the Telerik Platform',
        N'http://img.youtube.com/vi/rLtTuFbuf1c/1.jpg',
        N'https://www.youtube.com/watch?v=rLtTuFbuf1c')

go

INSERT [dbo].[playlist]
       ([videoid],
        [title],
        [poster],
        [source])
VALUES (6,
        N'Why Telerik Analytics - Key Benefits For Your Applications',
        N'https://i.ytimg.com/vi/CpHKm2NruYc/1.jpg',
        N'https://www.youtube.com/watch?v=CpHKm2NruYc')

go

SET IDENTITY_INSERT [dbo].[Playlist] OFF

go

Create ASP.NET MVC Empty project 

1. Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application name. Here, I named it "KendoMediaPlayerINMVC5".
2. Now, click OK.
3. Then, select Empty Web API template and click OK to create the project.
4. Once you click OK, the project will be created with the basic architecture of MVC.
5. If you are not aware of how to create an Empty ASP.NET Web Application, please visit  Step1 and Step 2 to learn. Once you complete these steps you will get the screen as below

 

Configure Entity Framework with database and application

 

Here, I have already discussed how to configure and implement the database-first approach. In the meantime, choose your created table with Entity Framework. Once we are done with our configuration with SQL table "Playlist" from CSharpCorner database, we will get the below screen as a succeeding configuration.  

 

 

Create a Controller and View 

 

Now create an empty controller and view, here I created a controller with the name of "KenoMediaPlayerController".Whenever we create an empty Controller, it is created with empty Index action method. And create an empty view to this action method "Index".

 

Enable Kendo UI Features

 

Here, we going to enable the Kendo UI  features with our application by adding the below CSS and JS in our shared _Layout page or view. 

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

And now create a div which will act as Media Player

<div id="example">
    <div class="demo-section k-content wide" style="max-width: 644px;">
        <div id="mediaplayer" style="height:360px"></div>
    </div>
</div>

And, add the script given below to enable the kendoMediaPlayer plugin to the respective control.  In below code, you can see that autoPlay property has mentioned value true to play the video automatically, and the media will help us load the video from the source, in meantime title will be shown the top of the video and source represents where the video source from it is.Here we mentioned the static youtube URL on source property.

<script type="text/javascript">
    $(document).ready(function() {
        $("#mediaplayer").kendoMediaPlayer({
            autoPlay: true,
            media: {
                title: "C# Corner Annual Conference 2014",
                source: "https://www.youtube.com/watch?v=tGRdMMLIUHE"
            }
        });
    });
</script>

Okay now change the controller name in RouteConfig.cs file as below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace KendoMediaPlayerINMVC5 {
    public class RouteConfig {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
                controller = "KenoMediaPlayer", action = "Index", id = UrlParameter.Optional
            });
        }
    }
}

Run your application

 

 

Now we will create a playlist to play video(s) before that we should below add logic in controller to load the playlist URLs from database using entity framework

public JsonResult CreatePlaylist() {
    CSharpCornerEntities entity = new CSharpCornerEntities();
    var result = entity.Playlists.ToList();
    return Json(result, JsonRequestBehavior.AllowGet);
}

Now add two tags or divs which will act as Media Player and Listview in view

<div id="example">
    <div class="demo-section k-content wide" style="max-width: 925px;">
        <div id="mediaplayer" style="height:360px"></div>
        <div class="k-list-container playlist">
            <ul id="listView" class="k-list"></ul>
        </div>
    </div>

And enable the Kendo Media Player and Listview to those controls

$("#mediaplayer").kendoMediaPlayer({
    autoPlay: true,
});
$("#listView").kendoListView();

Load videos and Create a playlist with Media Player and Listview

 

Add the below codes in your view script

<script type="text/javascript">
    $(document).ready(function() {
        $("#mediaplayer").kendoMediaPlayer({
            autoPlay: true,
        });
        var videos = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://localhost:1583/KenoMediaPlayer/CreatePlaylist",
                    dataType: "json"
                }
            },
        });
        var listView = $("#listView").kendoListView({
            dataSource: videos,
            selectable: true,
            scrollable: true,
            template: kendo.template($("#template").html()),
            change: onChange,
            dataBound: onDataBound
        });

        function onChange() {
            var index = this.select().index();
            var dataItem = this.dataSource.view()[index];
            $("#mediaplayer").data("kendoMediaPlayer").media(dataItem);
        }

        function onDataBound() {
            this.select(this.element.children().first());
        }
    });
</script>
<script type="text/x-kendo-template" id="template">
    <li class="k-item k-state-default" onmouseover="$(this).addClass('k-state-hover')" onmouseout="$(this).removeClass('k-state-hover')"> <span>
<img src="#:poster#" />
<h5>#:title#</h5>
</span> </li>
</script>

Detailed Description 

 

In the above code, you can see that two Kendo Widgets have been added to the view such as Media Player and Listview.The Kendo UI Media player widget plays video files from static source or stream online youtube videos and enriches your website with dynamic content in a user-friendly interface.Here, we just stored the URL of videos in Database.This list view is used to display a list of media files which we got from the data source and act as a playlist. The list view consists of two events such as Databound and change.In the databound event, the first data item of the listview data source will be assigned to kendo media player using media function. On change event, the video which is clicked to play in list view will be assigned to Kendo media player using media function. If you are not aware to work with Kendo Listview means Please visit Here to learn. 

 

Now add the below CSS to give good appearance to those controls

<style>
    .k-mediaplayer {
        float: left;
        box-sizing: border-box;
        width: 70%;
    }

    .playlist {
        float: left;
        height: 360px;
        overflow: auto;
        width: 30%;
    }

    .playlist ul,
    .playlist li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .playlist .k-item {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding: 14px 15px;
    }

    .playlist .k-item:last-child {
        border-bottom-width: 0;
    }

    .playlist span {
        cursor: pointer;
        display: block;
        overflow: hidden;
        text-decoration: none;
    }

    .playlist span img {
        border: 0 none;
        display: block;
        height: 56px;
        object-fit: cover;
        width: 100px;
        float: left;
    }

    .playlist h5 {
        display: block;
        font-weight: normal;
        margin: 0;
        overflow: hidden;
        padding-left: 10px;
        text-align: left;
    }
</style>

Run your application

 

 

 

Complete View

 

1._Layout.cshtml 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Media Player</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> @Html.ActionLink("Kendo Media Player with ASP.NET MVC5", "Index", "Home", null, new { @class = "navbar-brand" }) </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"> </ul>
            </div>
        </div>
    </div>
    <div class="container body-content"> @RenderBody()
        <hr /> </div>
</body>

</html>

Index.cshtml 

@ {
    ViewBag.Title = "Index";
} < br / > < div id = "example" > < div class = "demo-section k-content wide"
style = "max-width: 925px;" > < div id = "mediaplayer"
style = "height:360px" > < /div> < div class = "k-list-container playlist" > < ul id = "listView"
class = "k-list" > < /ul></div > < /div> < script type = "text/javascript" > $(document).ready(function() {
    $("#mediaplayer").kendoMediaPlayer({
        autoPlay: true,
    });
    var videos = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://localhost:1583/KenoMediaPlayer/CreatePlaylist",
                dataType: "json"
            }
        },
    });
    var listView = $("#listView").kendoListView({
        dataSource: videos,
        selectable: true,
        scrollable: true,
        template: kendo.template($("#template").html()),
        change: onChange,
        dataBound: onDataBound
    });

    function onChange() {
        var index = this.select().index();
        var dataItem = this.dataSource.view()[index];
        $("#mediaplayer").data("kendoMediaPlayer").media(dataItem);
    }

    function onDataBound() {
        this.select(this.element.children().first());
    }
}); < /script> < script type = "text/x-kendo-template"
id = "template" > < li class = "k-item k-state-default"
onmouseover = "$(this).addClass('k-state-hover')"
onmouseout = "$(this).removeClass('k-state-hover')" > < span > < img src = "#:poster#" / > < h5 > #: title# < /h5> < /span> < /li> < /script> < style > .k - mediaplayer {
    float: left;
    box - sizing: border - box;
    width: 70 % ;
}.playlist {
    float: left;
    height: 360 px;
    overflow: auto;
    width: 30 % ;
}.playlist ul, .playlist li {
    list - style - type: none;
    margin: 0;
    padding: 0;
}.playlist.k - item {
    border - bottom - style: solid;
    border - bottom - width: 1 px;
    padding: 14 px 15 px;
}.playlist.k - item: last - child {
    border - bottom - width: 0;
}.playlist span {
    cursor: pointer;
    display: block;
    overflow: hidden;
    text - decoration: none;
}.playlist span img {
    border: 0 none;
    display: block;
    height: 56 px;
    object - fit: cover;
    width: 100 px;
    float: left;
}.playlist h5 {
    display: block;
    font - weight: normal;
    margin: 0;
    overflow: hidden;
    padding - left: 10 px;
    text - align: left;
} < /style> < /div>

Complete Controller

using KendoMediaPlayerINMVC5.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace KendoMediaPlayerINMVC5.Controllers {
    public class KenoMediaPlayerController: Controller {
        //
        // GET: /KenoMediaPlayer/
        public ActionResult Index() {
            return View();
        }
        public JsonResult CreatePlaylist() {
            CSharpCornerEntities1 entity = new CSharpCornerEntities1();
            var result = entity.Playlists.ToList();
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
}

RouteConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace KendoMediaPlayerINMVC5 {
    public class RouteConfig {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
                controller = "KenoMediaPlayer", action = "Index", id = UrlParameter.Optional
            });
        }
    }
}

Here, we have created an empty project so it can not get build in CSS. So, I have attached the respective CSS under Content folder and referred to a project. Refer the attached project for reference and I did attach the demonstrated project without package for Entity Framework 6.0 due to the size limit.

Summary 

 

In this article, we have seen how to create a video playlist in our ASP.NET MVC5 web application with Kendo Media player and list View using Entity Framework.

I hope you enjoyed this article. Your valuable feedback and comments about this article are always welcome.