Is there a way to streaming video using Kendo UI?

[Atallabela]

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"

[Viktor Tachev]

Hi,

 

Thank you for describing the scenario.

The MediaPlayer component has a forwardSeek property that can prevent seeking of the video. Make sure that it is set to false or remove it from the configuration altogether.

In case the behavior persists would you send us a dojo sample where the behavior can be replicated. This will enable us to examine the behavior and look for its cause.

 

Regards,
Viktor Tachev
Progress Telerik