New to Kendo UI for jQuery? Download free 30-day trial

Add Initial Poster on Media Player


Product Progress® Kendo UI® MediaPlayer for jQuery


This sample demonstrates how you can a separate image as the Poster of the player.


    <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>
      <script type="text/javascript">
$(document).ready(function () {

    autoPlay: false,

    var videoEl =  $("#mediaplayer").find("video");

  var videos = new{
    data: [{
      title: "Build HIPAA-Compliant Healthcare Apps Fast",
      poster: "",
      source: ""

  var listView = $("#listView").kendoListView({
    dataSource: videos,
    selectable: true,
    scrollable: false,
    template: kendo.template($("#template").html()),
    change: onChange,
    dataBound: onDataBound

  function onChange() {
    var index =;
    var dataItem = this.dataSource.view()[index];


  function onDataBound(e) {;


      <script type="text/x-kendo-template" id="template">
        <li class="k-item k-state-default" onmouseover="$(this).addClass('k-hover')"
                <img src="#:poster#" />
        .k-mediaplayer {
          float: left;
          box-sizing: border-box;
          width: 70%;

        .playlist {
          float: left;
          height: 360px;
          overflow: auto;
          width: 30%;
        @media(max-width: 800px)
          .k-mediaplayer {
            width: 100%;

        .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;

In this article