Hi, Im using the kendo media player inside a kendo window for playing a video. I'm able to get the video and play it but the problem is when I check the Chrome devTools, I dont know why there is multiple request been made to the backend for the video. In fact I just click once.
Below is the code:
var html = "<div id='dvPlayer' style='width:99%;height:99%;'></div>";
var mediaWind = $("<div id='mediawindow' />").kendoWindow({
title: "Media Player",
animation: false, width: "90%", height:"90%",
resizable: false, modal: true, draggable: true,
close: function ()
{
this.destroy();
}
}).data('kendoWindow').content(html);
var dvPlayer = $("#dvPlayer").kendoMediaPlayer({
autoPlay: false,
autoRepeat: false,
navigatable: true,
}).data("kendoMediaPlayer");
dvPlayer.media({
title: filename,
source: urlToBackend
});
mediaWind.center().open();
Hi, I use kendo ui for jquery media player in blazor project. On page load i call media player by this code;
await JSRuntime.InvokeAsync<string>("EmbedVideo", record.Id, record.Title);
and my javascript code is;
function EmbedVideo(recordId,title) {
$("#mediaplayer").kendoMediaPlayer({
autoPlay: true,
navigatable: true,
media: {
title: title,
source: "/api/record/GetRecordFile?recordId=" + recordId +"+&fileRequestType=1"
},
timeChange: function () {
console.log('changed')
}
});
}
when i change time i can see the 'changed' log in console but video starting over again.
These ara my referances;
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
Hi guys,
i have mediaplayer inside kendo window. now the problem is when you open the kendo window and play the video and then close it. The video keeps on playing in the background. How can i stop it from playing?
<
script
type
=
"text/javascript"
>
/* Date:2021-04-13
* Description: The pop up gets called from a click event of toolbar button(custome button on the CIP grid) called,
* "How to create/fill in a CIP?" through javascript function called pop();
*
* */
function Pop(e) {
/*
* kendow window initiated/created on click of toolbar button called "How to create/fill in a CIP?"
* */
$("#CIPSTRAINING").kendoWindow({
width: "40%",
height: "40%",
modal: true,
iframe: false,
close:onClose,
resizable: true,
dragable: true,
content: "",
visible: false
});
/*The Window provides the wrapper and element DOM elements as fields of its object which you can access and use to customize its appearance and content.
* Even though the handling of the position and size of the Window is normally done through its API and the setOptions method,
* you can also utilize wrapper to tweak the position or the size of the widget.
* * */
var windowElement = $("#CIPSTRAINING").data("kendoWindow");
// windowElement.wrapper.addClass("overflow:" ,"hidden");
/*
* initialize the mediaplayer referencing its dom element
* */
$("#mediaplayer").kendoMediaPlayer({
autoPlay: true
});
/* set and get the data items to the datsournce and assign it to the videos variable. which later we use it to the listview datasource.
* */
var videos = new kendo.data.DataSource({
data: [{
},
]
});
var listView = $("#listView").kendoListView({
dataSource: videos,
selectable: true,
scrollable: false,
template: kendo.template($("#CIPStemplateTraining").html()),
change: onChangeTrain,
dataBound: onDataBoundTrain
});
<
script
type
=
"text/x-kendo-template"
id
=
"CIPStemplateTraining"
>
<
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
<script>
function onClose(e) {
debugger;
var windowElement = $("#CIPSTRAINING").data("kendoWindow");
// get a reference to the media player widget
var mediaPlayer = $("#mediaplayer").data("kendoMediaPlayer");
// Stop the video
var listView = $("#listView").data("kendoListView");
windowElement.refresh();
mediaPlayer.stop();
}
function onChangeTrain() {
var index = this.select().index();
var dataItem = this.dataSource.view()[index];
$("#mediaplayer").data("kendoMediaPlayer").media(dataItem);
}
function onDataBoundTrain(e) {
// this.select(this.content.children().first());
}
</
script
>
also i get this error "Uncaught TypeError: Cannot read property 'removeClass' of undefined" when i use the close code that i have
kind regards
Tony
Hi
Is there a way to force poster image to be shown instead of the first video frame when autoplay is false?
As far as I can see Kendo generated video tag does not have poster tag and when I add it with jQuery attr() method… it does not work as video preloads first frame and just shows black rectangle.
Partial fix is adding (with jQ) preload=none attribute to video tag but then "current play time" shows actual date/time (full format) instead of 00:00:00.
I am out of ideas…
I am developing video streaming using Kendo UI Media Player in HTML 5.
For back-end I am using Java, Spring framework, JPA, and Hibernate. Firstly, the service in the backend will send a list (array) of the web service URL to get each video. After that, the screen (web page) will show the video playlist, the video will be played based on the video clicked by user.
When user click the video in the playlist, the screen will assign a Service URL to get video as a source for Kendo UI Media Player. The content type for Service Output is application/octet-stream. The code below is JavaScript code to switch between videos in the playlist.
Example for Service URL: http://10.25.88.36:800/ns/listen/D03042020LNB0000901_EKYC01_20200304100308_cust.webm
function
toggleActiveVideo(dataItem) {
var
mediaPlayer = $(
"#mediaplayer"
).data(
"kendoMediaPlayer"
);
// Data item is Web Service URL to get the video data as application/octet-stream
// Data item have structure like { title: "[File Name]" , poster: "/images/video.jpg" , source: "[Web Service to get Video Data]" }
mediaPlayer.media(dataItem);
$(
"li.k-state-selected"
).removeClass(
"k-state-selected"
);
$(
"li.k-state-default"
).eq(currentIndex).addClass(
"k-state-selected"
);
}
For the Response Headers of the service look like the image below.
For the Java code in the service look like this:
@RequestMapping(value=
"/ns/listen/{fileNm:.+}"
)
public
StreamingResponseBody listenVoice( @PathVariable(value=
"fileNm"
) String fileNm, HttpServletRequest req, HttpServletResponse response ) throws Exception {
logger.debug(
"#### /ns/listenVoice [{}] start ####"
, fileNm);
if
(StringUtil.isBlank( fileNm ))
{
throw
new
InoanException(
"999999999"
,
"Not Input File Name"
);
}
File rtnFile =
null
;
if
(StringUtil.endsWith(fileNm,
".mp4"
) || StringUtil.endsWith(fileNm,
".webm"
))
{
rtnFile = cnccUtil.getVideoFile(fileNm);
if
( rtnFile ==
null
)
{
rtnFile = cnccUtil.getEkycVideoFile(fileNm);
}
//response.setContentType( "video/mp4" );
response.setContentType( MediaType.APPLICATION_OCTET_STREAM_VALUE );
response.setHeader(
"Content-Disposition"
,
"attachment; filename="
+fileNm);
}
else
if
( StringUtil.endsWith(fileNm,
".mp3"
) || StringUtil.endsWith(fileNm,
".wav"
) )
{
rtnFile = cnccUtil.getVoiceFile(fileNm);
//response.setContentType( "audio/mpeg3" );
}
//InputStream in = FileUtils.openInputStream(rtnFile);
final InputStream
is
=
new
FileInputStream(rtnFile);
return
os -> {
readAndWrite(
is
, os);
};
}
private
void
readAndWrite(final InputStream
is
, OutputStream os) throws IOException {
byte
[] data =
new
byte
[2048];
int
read = 0;
while
((read =
is
.read(data)) > 0) {
os.write(data, 0, read);
}
os.flush();
}
The video streaming can be played, but can't move video time forward or backward.
Should I change Content Disposition or Content Type in the response headers? Or there's another way to do video streaming using Kendo UI?
Note: the video mime is video/webm; codecs="vp8, opus"
Hello,
The media player does not seem to work when using containers that use display: table. The themes primary color bleeds through the media player and the tool bars don't align. I have attached screen shots, and the URL to the page is at http://gregoryalexander.com/blogCfc/client/index.cfm/2019/1/1/Video-Test
Please advise.
Gregory
We have a media player which gives the following error: (the media player works but the console error is annoying)
www-widgetapi.js:99 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided (xxxx) does not match the recipient window's origin (yyyyy)
Is there some configuration I can change to enable this? The xxxx url is a youtube url with https at the begining
Thanks!
If I have a video in only two formats (ogg and webm), can I add both as sources and have the media player automatically detect which one to use? Or do I need to do the necessary browser checks before adding the source to the player?
Hello,
if i set the dimensions of the MediaPlayer with:
style="width: 500px; height: 400px;"
i have this problem:
kendo.all.js:77891 Uncaught TypeError: Cannot read property 'find' of undefined
with this settings: style="width:640px; height: 360px;"
everything works
why?
Thank you