HTML5 Video in SfDialog keeps playing after closing dialog

[Davy]

We have a Dialog component which plays a HTML5 video in the browser when the dialog is opened. Users can close the dialog with the default close button.

When closing the dialog, it disappears, but the video keeps playing somewhere in the background, you can here the sound continuing.

This seems like a bug, is there a workaround possible?

[Indrajith Srinivasan]

Hi Davy, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. Yes, you can achieve your requirement by pausing the video in the SfDialog OnClose event. We have also prepared a sample that tries to meet your requirements. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/158477/ze/SfDialog_with_video1800541397  

 

Index.razor 

 

 

<SfDialog Width="370px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible"> 

    <DialogEvents OnClose="@onclose"></DialogEvents> 

    <DialogTemplates> 

        <Header> Dialog with video </Header> 

        <Content> 

            <video id="videoDialog" width="320" height="240" controls> 

                <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> 

                <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg"> 

                Your browser does not support the video tag. 

            </video> 

        </Content> 

</SfDialog> 

 

@code { 

    private bool IsVisible { get; set; } = true; 

 

    [Inject] 

    IJSRuntime JSRuntime { get; set; } 

    private void OpenDialog() 

    { 

        this.IsVisible = true; 

    } 

 

    private void CloseDialog() 

    { 

        this.IsVisible = false; 

    } 

 

    public void onclose() { 

        this.JSRuntime.InvokeAsync<string>("pauseVideo"); 

    } 

} 

 

 

_Host.cshtml 

 

 

<script> 

   window.pauseVideo = () => { 

     var video = document.getElementById('videoDialog'); 

     video.pause(); 

   }; 

</script> 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith