Category / Section
How to preview a video file in FileExplorer using MediaPlayer component?
In FileExplorer, you can play audio or video files using our ejMediaPlayer component, and you can customize it in your application-level using the FileExplorer BeforeOpen event. The following code sample demonstrates how to customize the ejMediaPlayer component at application-level to play video files.
[aspx]
<ej:FileExplorer ID="fileexplorer" runat="server" CssClass="myFileBrowser" IsResponsive="true" Width="100%" AjaxAction="FileExplorerFeatures.aspx/FileActionDefault" Path="~/content/images/FileExplorer/" ClientSideOnBeforeOpen="beforeOpen" Layout="Tile">
</ej:FileExplorer>
<ej:Dialog ID="dialog" runat="server" ShowOnInit="false" ClientIDMode="Static" Width="400px" Height="350px">
<DialogContent>
<div id="basicPlayer"></div>
</DialogContent>
</ej:Dialog>
[SCRIPT]
function beforeOpen(args) {
if (args.itemType == "File" && (/\.(mp4)$/i).test(this._selectedFile)) {
var dialogObj = $("#dialog").ejDialog("instance");
dialogObj.open();
$("#basicPlayer").ejMediaPlayer({
source: [
{
"url": args.path,
// You can modify the title, author, and posterUrl details based on the video opened.
"title": "Internet of things",
"author": "Syncfusion",
"posterUrl": "images/mediaplayer/IOT.mp4"
}]
});
}
}
The media player has been rendered in dialog component and the path of the video that needs to be opened has been passed.
Final output
Sample:
For more information about the ejMediaPlayer component, refer to this documentation.
