Questions on Kendo UI for jQuery Forum

0 answers

67 views

Kendo Media Player making multiple request

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.

screenshot

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();

MediaPlayer

asked on 26 Aug 2021

0 answers

63 views

Media Player Time Change Error

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>

Thank you for all your help!

MediaPlayer

asked on 25 Jun 2021

5 answers

328 views

how to stop mediaplayer from playing after closing kendowindow

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

MediaPlayer

answered on 02 Jun 2021

5 answers

255 views

Force video poster

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…

MediaPlayer

answered on 12 Feb 2021

1 answer

375 views

Is there a way to streaming video using Kendo UI?

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.

Response Headers Image

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"

MediaPlayer

answered on 18 Dec 2020

4 answers

30 views

Media player is not correctly displayed and bleeds through page

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

MediaPlayer

answered on 06 Mar 2019

4 answers

94 views

Media Player JS Error

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!

MediaPlayer

answered on 12 Jul 2018

1 answer

153 views

subtitles?

Is there a way to add subtitles/closed-captioning to the player?

MediaPlayer

answered on 03 Jul 2018

1 answer

27 views

Sources: auto choose .ogg or .webm?

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?

MediaPlayer