How to Create an Audio Video Multimedia Player in SAPUI5 (Advanced SAPUI5-23)

The drab blue screen that most users detested was no longer a feature of SAP Reports & Outputs. Please do not misunderstand us. Although end users were never satisfied, even in the S/4HANA world of today, the ABAP believed those outputs were lovely back then, and they still do. In life, there are folks we just can’t seem to please. However, several SAP haters have begun to like the SAP User Interface since the release of UI5 and Fiori. They’re prepared to give SAP another go. This post aims to inspire readers who share their desire to learn advanced SAP functions.

Let’s examine how to use SAPUI5 to create a multimedia player.

I hope my earlier post about the Super Mario game in SAPUI5 was enjoyable. Kindly remember to leave your honest evaluation in the comments area. This will motivate us to produce more intriguing, non-traditional articles for you.

SAP is no longer dull. Now let’s get going.

We do not currently have any control in the SAPUI5 library that allows us to play media files (.mp3 or.mpeg).SAP must be working on it, and one standard control will undoubtedly be released shortly.We have the chance to develop a Custom SAPUI5 Control in the interim. Sure, this is a legitimate application for custom controls. Since HTML5 and JavaScript are the foundation of SAPUI5, anything that is possible in those languages can also be done in SAPUI5.

Initially, we need to consider what we would write if we were limited to using HTML5 and JavaScript for this purpose.

For Audio Files you can utilize <Audio> tag instead of <Video> tag

Lets create a Custom Control now. Create a folder and place a JavaScript file in that. In our case, we have created a folder called “control” and placed a JavaScript file and name it AudioVideoPlayer.js.

Now we will write the below code in the AudioVideoPlayer.js file.

a) Controls :- which is a property to show/hide the control buttons such as volume, mute, maximize buttons of the media player

b) Autoplay :- the media player starts playing the multimedia file as you load the page.

Now our Custom Control is ready to be used in the XML view.

We will use this XML tag and will hardcode (for now) the media file path which we want to play. You can either attach one video file to the WebIDE project itself or you can choose to give an online URL of the video file. Here is the content of my XML view.

You can utilize File Uploader Control to choose the file that has to be played if you don’t want to hardcode the file URL.If so, you might also need to build controller logic.For everyone’s convenience, though, I will make it straightforward in my example.

Run the app after saving your work. We will be able to observe that our SAPUI5 application is playing our file.

Isn’t that awesome? You can experiment and attempt displaying PDF files with various HTML tags, including the tag. [I am aware that there is already a standard control to display PDF files, but if you’d like, you can test alternative possibilities.]

mates! I’m done for today. I’ll demonstrate how to create a signature pad in SAPUI5 in my upcoming article. Check out the screenshot that is below. Think of it as the teaser. The entire film will shortly be available.Happy exploring and coding until then.