Play preview video file

[jose luis barajas]

Hi

Its possible make something similar like your sample for play videos, but in blazor wasm?

Opening video files in FileExplorer | Syncfusion | ASP.NET Web Forms - FileExplorer

Thanks in advance!

[Sowmiya Padmanaban]

Hi Jose, 

  

Greetings from Syncfusion support. 

  

Currently, we don’t have direct support to open the video file in FileManager component. Currently, we are checking the feasibility of achieving your requirement with FileManager component.  We will update the details within four business days on 2nd July 2021. 

  

We appreciate your patience. 

 

Regards,  

Sowmiya.P 

[Sowmiya Padmanaban]

Hi Jose,  

  

Thanks for your patience. 

  

For your reference, we have prepared a sample to play the Video file inside the FileManager component. OnFileOpen event is triggered on double clicking the video file. In that event, we have opened the Dialog component and updated the source attribute of video file. 

  

Once the source attribute is updated, we have called the load event of the video file by OnOpen and Closed event of Dialog component. 

  

Please, refer the below code snippet. 

  

    <SfFileManager @ref="filemanager" ID="filemanager" TValue="FileManagerDirectoryContent" > 

        <FileManagerEvents TValue="FileManagerDirectoryContent" OnFileOpen="FileOpen" ></FileManagerEvents> 

        <FileManagerAjaxSettings Url="/api/Home/FileOperations" 

                                 UploadUrl="/api/Home/Upload" 

                                 DownloadUrl="/api/Home/Download" 

                                 GetImageUrl="/api/Home/GetImage"> 

        </FileManagerAjaxSettings> 

    </SfFileManager> 

    <SfDialog @ref="Dialog" Width="447px" Target="#filemanager" ShowCloseIcon="true" @bind-Visible="@IsVisible"> 

        <DialogEvents  OnOpen="open" Closed="close"></DialogEvents> 

        <DialogTemplates> 

            <Header> Video File </Header> 

            <Content> 

                <video id="videoTagId" controls="controls" width="400px" height="262px"> 

                    <source  src=@source> 

                </video> 

            </Content> 

        </DialogTemplates> 

    </SfDialog> 

    @code{ 

        SfDialog Dialog; 

        SfFileManager<FileManagerDirectoryContent> filemanager; 

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

        public string source { get; set; } = ""; 

        private void open() 

        { 

            // need to call the load event of video 

            jsRuntime.InvokeAsync<string>("loadVideo"); 

        } 

        public void close() 

        { 

            // changes the source attriute and call the load event of the video. 

            this.source = ""; 

            jsRuntime.InvokeAsync<string>("loadVideo"); 

        } 

  

        public void FileOpen(Syncfusion.Blazor.FileManager.FileOpenEventArgs<FileManagerDirectoryContent> args) 

        { 

            if ((args.FileDetails.IsFile == true) && args.FileDetails.Type == ".mp4") 

            { 

                this.IsVisible = true; 

                // update the path for source attribute. 

                this.source = args.FileDetails.FilterPath.Replace("\\", "/") + args.FileDetails.Name; 

  

            } 

        } 

    } 

  

Host.Cshtml 

  

  <script> 

    function loadVideo() 

    { 

        document.getElementById("videoTagId").load(); 

    } 

    </script> 

  

Please, refer the below sample link. 

  

https://www.syncfusion.com/downloads/support/directtrac/166714/ze/Demo1275525719.zip 

  

Please let us know, if you need any further assistance. 

  

Regards,  

Sowmiya.P 

[jose luis barajas]

Hi  Sowmiya 

I cannot download sample file, I get  The Syncfusion account you logged in to is not associated with this download. Please use the Syncfusion account associated with the file you are trying to download.

Please help!

[jose luis barajas]

Thanks I was able to get run this sample in my code!

[Indhumathy Loganathan]

Hi Jose,

Most welcome. We are glad to hear that the provided details helped you. Please get back to us if you need further assistance. We will be happy to assist you.

Regards,
Indhumathy L