how to stop mediaplayer from playing after closing kendowindow

[Tony]

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

[Tsvetomir]

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

[Tony]

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>

 

[Tsvetomir]

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

[Tony]

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]

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]

Hi Tsvetomir, thanks for the feedback.

[Tony]

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]

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

[Tony]

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]

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]

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]

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]

Hi Tsvetomir, thanks you for the feedback. I highly appreciate it. everything now works as expected :)

[Tsvetomir]

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.