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.

<video width=”320″ height=”240″ controls>
  <source src=”movie.mp4″ type=”video/mp4″> 
</video>

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

<audio controls autoplay>
  <source src=”song.mp3″ type=”mp3″>   
</audio>

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.

Please provide feedback!


you may be interested in this blog here:-

Top SAP Modules in Demand 2024 Insights & Trends

Advanced OOP Concepts in SAP ABAP A Comprehensive Guide

GRC Security: Ensuring Comprehensive Governance, Risk, and Compliance

Why Use SAP SuccessFactors: A Game-Changer for HR and Business Growth

  • Related Posts

    Part 28 of Advance SAPUI5: SAPUI5 Responsive Table – Contextual Width

    One of the most popular aspects of a responsive table is its automatic contextual width. Automatic contextual width refers to the way columns change from covert to popin content and…

    Accounting Entries for Inventory

    A vital component of corporate operations is inventory management, which makes sure that products are properly recorded, valued, and accounted for. In addition to showing a company’s financial health, accurate…

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You Missed

    Part 28 of Advance SAPUI5: SAPUI5 Responsive Table – Contextual Width

    • By Varad
    • February 27, 2025
    • 23 views
    Part 28 of Advance SAPUI5: SAPUI5 Responsive Table – Contextual Width

    Accounting Entries for Inventory

    • By Varad
    • February 26, 2025
    • 29 views
    Accounting Entries for Inventory

    How may an existing ABAP report be converted to OOPs ABAP

    • By Varad
    • February 25, 2025
    • 40 views
    How may an existing ABAP report be converted to OOPs ABAP

    Advanced SAPUI5 – Part 26 – SAPUI5 Grid Table Sorting Feature

    • By Varad
    • February 24, 2025
    • 37 views
    Advanced SAPUI5 – Part 26 – SAPUI5 Grid Table Sorting Feature

    Upgrade SAPUI5-14: Utilizing SAPUI5, Create an e-Signature Pad

    • By Varad
    • February 23, 2025
    • 49 views
    Upgrade SAPUI5-14: Utilizing SAPUI5, Create an e-Signature Pad

    Important Tables with SAP FI

    • By Varad
    • February 22, 2025
    • 27 views
    Important Tables with SAP FI