Navigation In Kendo Media Player

Introduction

Kendo media player is used to play the videos from a static resource or online YouTube videos. It provides a rich UI for our Website. In this blog, we are going to see how to work with navigation in Kendo media player.

Kendo Media Player with streams online YouTube videos

Create a new HTML page in your application and write the code, as 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,
navigatable: true,
media: {
title: "Cooking with ASP.NET Core and Angular 2",
source: "https://www.youtube.com/watch?v=1Fe-L6pd3gw"
}
});
$(document).on("keydown.mediaplayer1", function (e) {
if (e.altKey && e.keyCode === 87 ) {
$("#mediaplayer1").focus();
}
});
</script>
</body>
</html>

We have seen the use of autoplay and media properties functionality in Kendo media player from my last blog. In this blog, we are going to see a navigation property functionality of Kendo media player.

To enable the navigation in Kendo media player, set the navigation property as true while initializing Kendo media player.

Keyboard action in Kendo media player

1. Alt +W -> It is used to focus the media player, which is written with the help of the code, as shown below.

$(document).on("keydown.mediaplayer1", function (e) {
if (e.altKey && e.keyCode === 87 ) {
$("#mediaplayer1").focus();
}

2. Space -> Toggles between play and pause.

3. M -> Toggles between Mute and UnMute

4. Enter and Esc -> Enter key opens the video in full screen mode and Esc is used to exit the full screen mode.

Conclusion

The navigation in Kendo media player plays a vital role to make the Application more user friendly with rich UI. I hope you have enjoyed this blog. Your valuable feedback, questions or comments about this blog are always welcome.