This is a solution under development for those who seek a better video component for SAP Appgyver.

The problem: Appgyver has no native video component or any way to embed an iframe other than by using a webview; and even the webview can only be used on the mobile app build – it does not work on a desktop or web app build.

***

***

The solution: Create a custom web app with React.js as a video player with custom controls, and use url params to get the url for the video and any other data needed to customize the player, the user, or other data-driven functionality.

Clone our repository from Github: Appgyver Video Component

You can also play with the code on Stackblitz.

As you can see, it is a basic react video component. The only difference is, we are using the url params to get the url for the video:

Note: Uncomment the commented section and comment out the url params section to play with the player element, then, when ready to test with url params, change it back.

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactPlayer from 'react-player';
import './style.css';


const params = new URLSearchParams(window.location.search);

/*const paramValue = "https://res.cloudinary.com/wikacy-com/video/upload/v1642352266/trailers/zeitgeist-trailer_njhtpf.mp4"*/

const paramValue = params.get("url");




const App: React.FC = () => (
  <div>
    <ReactPlayer url={paramValue}

    playing     
    controls
    preload
    disableRemotePlayback={true}
    allowFullscreen ={false}
    playbackrate= {false}
    config={{ file: { attributes: { controlsList: 'nodownload noplaybackrate nofullscreen noremoteplayback',disablePictureInPicture: true } } }}
    width='100%'
    height='100%'
     />
  </div>
);

render(<App />, document.getElementById('root'));

In this demo, I simply disabled some of the unwanted elements in the controls, but we can take this much further and create custom play and pause icons. We can even write some code to also pull those images from url params, in case you want to change the controls based on some other factors in your app. You can also extend this code to use effects and swipe features, resize videos, or change the aspect ratio of the elements. You can use if statements to display a user’s avatar over the video and pass the url to the avatar in the params from your Appgyver App.

***

***

To use this in an Appgyver web app, simply create a page layout similar to your app, and pass any custom data in the url params. In a native mobile app, use a webview, and a formula flow function to join the url to your custom video player and the appended params (the url to the video).

Set a thumnail with a play icon and set the webview to invisible until a user clicks play, or set the video configurations to autoplay. Since the player is lightweight, it loads very fast.

The player works for Youtube, Vimeo, and self hosted video. You may need to change the layout and other configurations, such as whether you want to use Youtube native controls or create your own.

Deploy the app to firebase hosting. Then you can play any video by passing the url to the video in the url params, like this:

https://zeitgeist-network.web.app/?url=https://res.cloudinary.com/wikacy-com/video/upload/v1647293557/trailers/Custom-Appgyver-Video-Component_eaub2j.mp4

Even embedded in a webpage, it looks better than the standard generic player.

Stay tuned for more as this develops. I look forward to sharing these bits of information as I work to finish the production version of Wikacy.