This is a migrated thread and some comments may be shown as answers.

how to stop mediaplayer from playing after closing kendowindow

5 Answers 42 Views
MediaPlayer
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Iron
Iron
Iron
Tony asked on 14 Apr 2021, 10:36 AM

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

5 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 19 Apr 2021, 07:47 AM

Hi Tony,

It is expected the media player to continue playing due to the fact that when the window is closed, the elements are hidden rather than removed. Therefore, you should manually pause the media player.

For instance, within the close event of the Window, pause the media player:

https://docs.telerik.com/kendo-ui/api/javascript/ui/window/events/close

The actual pause can be achieved by using the following method of the MediaPlayer:

https://docs.telerik.com/kendo-ui/api/javascript/ui/mediaplayer/events/pause

I hope you find this helpful.

 

Regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Tony
Top achievements
Rank 1
Iron
Iron
Iron
answered on 23 Apr 2021, 09:11 AM

Hi Tsvetomir,

thanks for the feedback,

i have tried it this way but i get errors see attachments

<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: function (e) {
                var mediaPlayer = $("#mediaplayer").data("kendoMediaPlayer");
                 mediaPlayer.pause();
                $('demo-section.k-content.wide').remove();
             //     mediaPlayer.remove();
            },
            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
         * */
        $("#CIPSTRAINING").append($("<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>"));
        $("#mediaplayer").kendoMediaPlayer({
            autoPlay: true
        });
 
        /* set and get the data items to the datsource 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
        });
 
 
 
 
 
 
        windowElement.open();
        windowElement.center();
 
 
    }
 
 
 
</script>

 

0
Tsvetomir
Telerik team
answered on 28 Apr 2021, 07:18 AM

Hi Tony,

I have created a sample project where the media player is paused whenever the window is closed. Please examine the following Dojo:

https://dojo.telerik.com/uViPehuR

Note that the source of the media player is locked to the full screen of the Dojo. Hence, you should click on the "Full Screen" button that is located on the right-hand side of the Dojo.

In case the issue persists, modify the example and send it back to me. This way, I would debug it locally and get back to you with the respective suggestions.

 

Regards,
Tsvetomir
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Tony
Top achievements
Rank 1
Iron
Iron
Iron
answered on 18 May 2021, 10:46 AM

Hi Tsvetomir,

i tried your suggestion,

i'm getting the below error,

see attached.

the error happens when i try to close the window the second time.

kind regards

Tony

 

Tsvetomir
Telerik team
commented on 20 May 2021, 01:40 PM

Hi, I have noticed that the container elements inside the close event of the widget. Can you confirm that this is not the root of the problem? 

Also, I have performed several tests in the Dojo from earlier and it appears regardless of how many times the player is closed, the error is not thrown:

https://runner.telerik.io/fullscreen/uViPehuR

Can you confirm this?

Tony
Top achievements
Rank 1
Iron
Iron
Iron
commented on 20 May 2021, 02:47 PM | edited

Hi Tsvetomir, thanks for the feedback.
Tony
Top achievements
Rank 1
Iron
Iron
Iron
commented on 20 May 2021, 02:55 PM

Hi Tsvetomir,

this is how i have it defined. below


<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?"
         * */
        $(document).ready(function myfunction() {

            function onClose() {
                var mediaPlayer = $("#mediaplayer").data("kendoMediaPlayer");
                mediaPlayer.pause();
            }
            $("#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
             * */
            $("#CIPSTRAINING").append($("<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>"));
            $("#mediaplayer").kendoMediaPlayer({
                autoPlay: true
            });

            /* set and get the data items to the datsource and assign it to the videos variable. which later we use it to the listview datasource.
             * */
            var videos = new kendo.data.DataSource({
                data: [{
                    title: "01 Introduction CIP",
                    poster: "../Training/7 - Training/Thumbs/CIPintro.JPG",
                    source: "../Training/7 - Training/CIPS/01 Introduction (1min).mp4"
                },
                {
                    title: "02 Creating a CIP",
                    poster: "../Training/7 - Training/Thumbs/creatingCIP.JPG",
                    source: "../Training/7 - Training/CIPS/02 Creating a CIP (3min).mp4"
                },
                {
                    title: "03 Filling in the CIP Part 1",
                    poster: "../Training/7 - Training/Thumbs/FillinCIP part 1.JPG",
                    source: "../Training/7 - Training/CIPS/03 Filling in the CIP Part 1 (3min).mp4"
                },
                {
                    title: "04 Filling in the CIP Part 2",
                    poster: "../Training/7 - Training/Thumbs/FillinCIP part 2.JPG",
                    source: "../Training/7 - Training/CIPS/04 Filling in the CIP Part 2 (2min).mp4"
                }
                ]
            });


            var listView = $("#listView").kendoListView({
                dataSource: videos,
                selectable: true,
                scrollable: false,
                template: kendo.template($("#CIPStemplateTraining").html()),
                change: onChangeTrain,
                dataBound: onDataBoundTrain
            });






            windowElement.open();
            windowElement.center();
        });

    }



</script>

you will notice i have a listview inside the window which uses a template.


<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>

the first time closing the window it works fine. the second time when i open and try to close it. i get an error on this line of code.


onmouseout="$(this).removeClass('k-state-hover')">

or is there something that im doing wrong here?

Tsvetomir
Telerik team
commented on 25 May 2021, 09:48 AM

Hi, thank you for sharing the latest version of the code snippets for your application. Indeed, I have modified the previously shared Dojo to include a playlist and it appears that no error is thrown. Could you confirm the same?

https://dojo.telerik.com/unElEZey

0
Accepted
Tony
Top achievements
Rank 1
Iron
Iron
Iron
answered on 02 Jun 2021, 02:10 PM

Hi Tsvetomir,

thanks for the feedback,

took sometime to read through the code you provided on dojo. can see why its breaking. its the same code that you have and i have configured it the same way you did. but still showing up the error see attached screen shots.

kind regards

Tony

Tsvetomir
Telerik team
commented on 07 Jun 2021, 10:10 AM

Hi, Tony. Thank you for sharing the exact line of code that is causing the error. Unfortunately, I was not able to replicate the issue in the Dojo shared above https://dojo.telerik.com/unElEZey. Could you let me know what are the exact steps needed to replicate the issue in the aforementioned Dojo?

Also, would it be possible for you to update your initial question with the content of this answer with the attachments so that we can stick to the 1 Question - 1 Answer guidelines? After that, I will transition my current comment as a comment underneath your updated post. 

Tony
Top achievements
Rank 1
Iron
Iron
Iron
commented on 07 Jun 2021, 12:35 PM | edited

Hi Tsvetomir, thanks for the feedback. i think i might have resolved this. whats the difference between these settings( "this.select(this.content.children().first()) and this.select(this.element.children().first()) ) under onDatabound function. When i use this one - > this.select(this.content.children().first()); i get that error
Tsvetomir
Telerik team
commented on 08 Jun 2021, 12:56 PM

Hi Tony, with the new versions, the rendering of the Telerik UI ListView for ASP.NET Core has undergone changes. Therefore, depending on your version, you should either use the content or element. As the widget with the newer versions has an additional content element whereas the relatively older versions do not have such a content element.

I recommend sticking with the code snippet that does not error out. Both options serve the same purpose.

 
Tony
Top achievements
Rank 1
Iron
Iron
Iron
commented on 09 Jun 2021, 02:22 PM

Hi Tsvetomir, thanks you for the feedback. I highly appreciate it. everything now works as expected :)
Tsvetomir
Telerik team
commented on 10 Jun 2021, 07:39 AM

I am very happy to hear that everything has not been resolved. If there is anything else I could help with, do not hesitate to contact me back or submit a new forum thread or support ticket. 
Tags
MediaPlayer
Asked by
Tony
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Tsvetomir
Telerik team
Tony
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or