Unplanned
Last Updated: 26 Jul 2023 14:07 by ADMIN
Roop
Created on: 21 Jul 2023 21:33
Category: MediaPlayer
Type: Feature Request
1
Implementing closed captions with kendomediaplayer

Hi,

I am trying to show closed captions of a youtube video that's embedded into the kendo mediaplayer in my web application. Any pointers to help with that would be helpful. I've looked online with youtube's documentation as well as kendo's documentation and couldn't find any solutions that work. 

 

Thank you,

Roop Singh

3 comments
ADMIN
Anton Mironov
Posted on: 26 Jul 2023 14:07

Hi Roop,

Thank you for the additional details provided.

The Telerik UI MediaPlayer does provide this functionality, so converted this item into a Feature Request.

Thank you for pointing this one to our attention! I am now increasing your Telerik points.

Here is the public item. Feel free to subscribe to it for further updates:

I added a vote on your behalf for the item above. The most voted items are considered for implementation.

Best Regards,
Anton Mironov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Roop
Posted on: 25 Jul 2023 17:59

Is this the only way to add captions to the video? This seems like there would be a manual component in here for the vtt files to be generated for youtube embedded videos. To give more context, I have a list of youtube links that could be added to the database and i'm embedding that youtube video on the page based on the link in the database. I would have to generate a vtt file for those videos manually if i use this technique. Is there an easier way to just bring over the subtitles from youtube. Youtube already has a closed captions option available. I just need to be able to provide that option to the users to turn the subtitles on and off or switch to the languages available in that specific youtube video. I really appreciate your help on this.

Thank you,

Roop Singh

ADMIN
Anton Mironov
Posted on: 24 Jul 2023 08:50

Hi Roop,

Thank you for the details provided.

The subtitles captions could be added as follows:

        $(document).ready(function () {

            $("#mediaplayer").kendoMediaPlayer({
                media: {
                    title: "Recap of Progress Ringing The Bell at Nasdaq (2016)",
                    source: ""
                }
            });
          
              var vid = $('#mediaplayer video');
        			vid.removeAttr('src');
        			vid.append('<source src="video.ogg" />');
        			vid.append('<track label="English subtitles" kind="subtitles" srclang="en" src="subtitles.vtt" default="">')
        });
The following forum thread answer provides further information and an example:

Please keep in mind, it is necessary to run the sample through a live server in order to access the static files.

I hope this information helps. Give a try to the approach above and let me know if further information or assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.