Add Initial Poster on Media Player
Environment
Product | Progress® Kendo UI® MediaPlayer for jQuery |
Description
This sample demonstrates how you can a separate image as the Poster of the player.
Solution
<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: false,
});
$("#mediaplayer").data("kendoMediaPlayer").one("ready",function(e){
var videoEl = $("#mediaplayer").find("video");
videoEl.attr("poster","https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Polar_Bear_AdF.jpg/400px-Polar_Bear_AdF.jpg");
videoEl[0].load();
});
var videos = new kendo.data.DataSource({
data: [{
title: "Build HIPAA-Compliant Healthcare Apps Fast",
poster: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Polar_Bear_AdF.jpg/400px-Polar_Bear_AdF.jpg",
source: "https://www.w3schools.com/tags/movie.mp4"
},
]
});
var listView = $("#listView").kendoListView({
dataSource: videos,
selectable: true,
scrollable: false,
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(e) {
this.select(this.content.children().first());
}
});
</script>
<script type="text/x-kendo-template" id="template">
<li class="k-item k-state-default" onmouseover="$(this).addClass('k-hover')"
onmouseout="$(this).removeClass('k-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: 360px;
overflow: auto;
width: 30%;
}
@media(max-width: 800px)
{
.playlist,
.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;
}
</style>
</div>