Create your Video Playlist Using Kendo Media Player And List View

Introduction

In this article, I’ll describe how to create a playlist using Kendo Media Player, using ASP.NET Web API and Entity framework. The application is developed, using Entity framework "Database First" approach and ASP.NET Web API.

Prerequisites

Basic knowledge of ASP.NET MVC, Entity framework, and Kendo UI framework.

Create a Table

For demo purposes, I am going to create one table in MS SQL database. In my case, I named it Media. The script, given below, is used to create the tables with some records.

CREATE TABLE Media
(
    VideoId INT IDENTITY(1,1),
       title VARCHAR(max),
    poster VARCHAR(max),
    source VARCHAR(max)
)
GO
INSERT INTO Media VALUES('Telerik Platform - Enterprise Mobility. Unshackled.','http://img.youtube.com/vi/N3P6MyvL-t4/1.jpg','https://www.youtube.com/watch?v=N3P6MyvL-t4')
INSERT INTO Media VALUES('Learn How York Solved Its Database Problem','http://img.youtube.com/vi/_S63eCewxRg/1.jpg','https://www.youtube.com/watch?v=_S63eCewxRg')
Insert INTO Media VALUES('Responsive Website Delivers for Reeves Import Motorcars', 'http://img.youtube.com/vi/DYsiJRmIQZw/1.jpg','https://www.youtube.com/watch?v=DYsiJRmIQZw')
GO

The records in the table as shown in below figure 1.

  

Create ASP.NET WEB API application

Create a new empty ASP.NET WEB API Application, as per the figures given below.

Open Visual Studio -> File -> New Project -> ASP.NET Web Application.



Select Web API and click on OK.



Generate the Model

Now, we will create Entity framework models from the database tables.

Step 1

Right-click the Models folder, select Add -> ADO.NET Entity Data Model, or select Add->New Item in the "Add New Item" window.

Select data in the left pane and ADO.NET Entity Data Model from the center pane. Name the new model file (In my case, I made it as Media) and click Add.

Step 2

In the Entity Data Model wizard, select EF Designer from the database and click Next as shown in figure 4.

 

Step 3 

Click the "New Connection" button. The "Connection Properties" window will open. 

Step 4

In the "Connection Properties" window, provide the name of the local Server, where the database was created (in this case, (DESKTOP-585QGBN)). After providing the Server name, select demo from the available databases and click OK.

 

Step 5

You can use the default name for the connection to save the Web.Config file; In my case it is MediaPlayerEntities. Now, click Next.

Step 6

Select the table to generate the models for Media table and click Finish.



My database schema is similar to the image as shown in figure 7.



Create a Web API Controller

Create a new empty Controller. Right-click the Controllers folder and select Add –> New Empty Web API Controller, as shown in figure 8. In my case, I named it as MediaController.cs.

Write the code, given below, in the Controller.

public class MediaController : ApiController
    {
        MediaPlayerEntities __context = new MediaPlayerEntities();

      //  /api/Media/GetMediaPlaylist
        public HttpResponseMessage GetMediaPlaylist()
        {
            try
            {
                var playlist = __context.Media;
                return Request.CreateResponse(HttpStatusCode.OK, playlist, Configuration.Formatters.JsonFormatter);
            }
            catch(Exception ex)
            {
                return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
            }
        }
    }

Now, our Web API is ready. The above method GetMediaPlaylist in media controller is used to return the list of media table records from the context as a JSON format. Let us test the response, using the POSTMAN.

API - /api/Media/GetMediaPlaylist

Response in POSTMAN

Title : This will be the title for the video.

Poster : Thumbnail Image link for the video.

source : Video source link.

Note

Please make sure that the property name (title, poster, source) should be as it is  because on client side, the kendo media player property is predefined so if anything is misspelled in the property name, the media player doesn't work.

Create a HTML page

Right click on project add-> new HTML page, in my case I named it as MediaPlayer.html

MediaPlayer.html

<!DOCTYPE html>
<html>
<head>

    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></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>
    <div id="example">
        <h3 style="font-style:italic"> My Playlist</h3>
        <br/>
<br/>
        <div class="demo-section k-content wide" style="width: 925px;">
            <div id="mediaplayer" style="height:360px; width:640px"></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: "api/Media/GetMediaPlayerlist",
                        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;
            }

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

                .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>
    </div>

</body>
</html>

The above code consists of two Kendo widgets.

1. Media player
2. List view

Media Player

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.

List View

Please refer to my previous article to get how to work with kendo list view using ASP.NET WEB API.

This list view is used to display a list of media files  which we got from the datatsource and act as a playlist. The list view consists of two events i) Databound ii) change.

In the databound event, the first data item of the listview datasource 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.

Result

 
Conclusion

From this article, we have seen how to create a video playlist in our web application with Kendo widgets (Media player and list View) using ASP.NET Web API. Will see more about Kendo media player from my future articles.

I hope you enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.